/* Generated by design/_tools/make_web_css.py from design/web/tokens.json and component-sizes.json. Do not edit by hand. */

@property --px {
  syntax: "<length>";
  inherits: true;
  initial-value: 1px;
}

#app,
#boot {
  /* One design pixel. The desktop design is 1920px wide and scales with the page; from 1920px up it stays 1px. */
  --px: calc(min(100cqw, 1920px) / 1920);

  /* Colours */
  --color-white: #ffffff;
  --color-gray-73: #b9b9b9;
  --color-primary: #1cb376;
  --color-gray-60: #989898;
  --color-gray-45: #737373;
  --color-green: #1cb371;
  --color-teal: #1c9ab3;
  --color-green-2: #4fb31c;
  --color-gray-89: #e3e3e3;
  --color-gray-81: #cfcfcf;
  --color-gray-20: #333333;
  --color-black: #000000;
  --color-gray-87: #dddddd;
  --color-gray-19: #313131;
  --color-gray-3: #080808;
  --color-gray-69: #b1b1b1;
  --color-gray-55: #8b8b8b;
  --color-gray-98: #fafafa;
  --color-gray-44: #707070;
  --color-danger: #dc2b48;
  --color-background: #f6f6f6;
  --color-gray-80: #cccccc;
  --color-green-3: #1bb616;
  --color-gray-97: #f7f7f7;
  --color-gray-88: #e0e0e0;
  --color-red: #e21b1b;
  --color-green-4: #25b365;
  --color-gray-95: #f3f3f3;
  --color-green-5: #63b31c;
  --color-yellow: #b3ae1c;
  --color-teal-2: #25b3aa;
  --color-yellow-2: #ffde00;
  --color-teal-3: #3ab3ab;
  --color-green-6: #08630b;
  --color-orange: #ff9900;
  --color-gray-27: #464646;
  --color-red-2: #b43a3a;
  --color-gray-94: #f0f0f0;
  --color-green-7: #3ab340;
  --color-green-8: #3ab38f;
  --color-yellow-3: #b4a43a;
  --color-gray-100: #fefefe;
  --color-gray-38: #616161;
  --color-gray-63: #a1a1a1;
  --color-gray-94-2: #efefef;
  --color-teal-4: #19bfd3;

  /* Brand gradient of the role in use (host and guest); the preacher pair is set under [data-theme] below */
  --theme-from: var(--color-primary);
  --theme-to: var(--color-green-2);
  --theme-shadow-lg: var(--shadow-lg-green-4);
  --theme-field-ring: var(--form-field-ring-host);
  --page-background: var(--color-background);

  /* Gradients whose direction does not depend on the box. Diagonal ones get their angle from the component. */
  --gradient-preacher-vertical: linear-gradient(180deg, #1cb371 0%, #1c9ab3 100%);
  --gradient-host-vertical: linear-gradient(180deg, #1cb376 0%, #4fb31c 100%);
  --gradient-theme-vertical: linear-gradient(180deg, var(--theme-from) 0%, var(--theme-to) 100%);

  /* Radii */
  --radius-lg: calc(15 * var(--px));
  --radius-xl: calc(20 * var(--px));
  --radius-md: calc(10 * var(--px));
  --radius-2xl: calc(35 * var(--px));
  --radius-sm: calc(9 * var(--px));
  --radius-xs: calc(5 * var(--px));
  --radius-3_073: calc(3.073 * var(--px));
  --radius-30: calc(30 * var(--px));
  --radius-22: calc(22 * var(--px));
  --radius-25: calc(25 * var(--px));
  --radius-22_026: calc(22.026 * var(--px));
  --radius-6_293: calc(6.293 * var(--px));
  --radius-16: calc(16 * var(--px));
  --radius-29_306: calc(29.306 * var(--px));
  --radius-31: calc(31 * var(--px));
  --radius-8: calc(8 * var(--px));
  --radius-16_514: calc(16.514 * var(--px));
  --radius-7: calc(7 * var(--px));
  --radius-23_045: calc(23.045 * var(--px));

  /* Shadows (box-shadow form) */
  --shadow-lg-gray-89: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) rgba(227, 227, 227, 0.431);
  --shadow-md-gray-87: 0 calc(3 * var(--px)) calc(16 * var(--px)) rgba(221, 221, 221, 0.302);
  --shadow-sm: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(0, 0, 0, 0.161);
  --shadow-md-primary: calc(-4 * var(--px)) calc(5 * var(--px)) calc(15 * var(--px)) rgba(28, 179, 118, 0.412);
  --shadow-sm-2: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(0, 0, 0, 0.078);
  --shadow-md-green-3: 0 calc(3 * var(--px)) calc(16 * var(--px)) rgba(27, 182, 22, 0.502);
  --shadow-lg-green-4: 0 calc(13 * var(--px)) calc(26 * var(--px)) rgba(37, 179, 101, 0.6);
  --shadow-lg-gray-88: calc(-4 * var(--px)) calc(5 * var(--px)) calc(25 * var(--px)) #e0e0e0;
  --shadow-lg-teal-2: 0 calc(13 * var(--px)) calc(26 * var(--px)) rgba(37, 179, 170, 0.6);
  --shadow-md-gray-60: 0 calc(10 * var(--px)) calc(15 * var(--px)) rgba(152, 152, 152, 0.502);
  --shadow-lg-gray-81: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) #cfcfcf;
  --shadow-lg-gray-45: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) rgba(115, 115, 115, 0.451);
  --shadow-md: calc(3 * var(--px)) calc(3 * var(--px)) calc(10 * var(--px)) rgba(0, 0, 0, 0.102);
  --shadow-md-green-6: 0 calc(10 * var(--px)) calc(15 * var(--px)) rgba(8, 99, 11, 0.541);
  --shadow-lg-gray-27: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) rgba(70, 70, 70, 0.431);
  --shadow-lg-teal-3: 0 calc(13 * var(--px)) calc(26 * var(--px)) rgba(58, 179, 171, 0.357);
  --shadow-sm-3: 0 calc(6 * var(--px)) calc(6 * var(--px)) rgba(0, 0, 0, 0.102);
  --shadow-sm-yellow-2: 0 calc(3 * var(--px)) calc(6 * var(--px)) #ffde00;
  --shadow-lg-teal-3-2: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) rgba(58, 179, 171, 0.361);
  --shadow-md-2: 0 calc(10 * var(--px)) calc(16 * var(--px)) rgba(0, 0, 0, 0.161);
  --shadow-sm-4: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(0, 0, 0, 0.071);
  --shadow-md-3: 0 0 calc(16 * var(--px)) #000000;
  --shadow-lg-gray-73: calc(-4 * var(--px)) calc(10 * var(--px)) calc(25 * var(--px)) rgba(185, 185, 185, 0.529);
  --shadow-md-gray-60-2: calc(-10 * var(--px)) calc(10 * var(--px)) calc(15 * var(--px)) rgba(152, 152, 152, 0.502);
  --shadow-md-primary-2: 0 calc(3 * var(--px)) calc(16 * var(--px)) rgba(28, 179, 118, 0.431);
  --shadow-lg-gray-45-2: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) rgba(115, 115, 115, 0.251);
  --shadow-md-primary-3: 0 calc(3 * var(--px)) calc(12 * var(--px)) rgba(28, 179, 118, 0.529);
  --shadow-sm-primary: 0 calc(3 * var(--px)) calc(6 * var(--px)) #1cb376;
  --shadow-sm-primary-2: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(28, 179, 118, 0.49);
  --shadow-sm-danger: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(220, 43, 72, 0.522);
  --shadow-sm-orange: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(255, 153, 0, 0.49);
  --shadow-sm-5: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(0, 0, 0, 0.051);
  --shadow-lg: 0 calc(8 * var(--px)) calc(26 * var(--px)) rgba(0, 0, 0, 0.11);
  --shadow-sm-red: 0 calc(3 * var(--px)) calc(6 * var(--px)) #e21b1b;
  --shadow-lg-green-7: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) rgba(58, 179, 64, 0.361);
  --shadow-lg-green-8: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) rgba(58, 179, 143, 0.361);
  --shadow-md-gray-88: calc(-4 * var(--px)) calc(6 * var(--px)) calc(15 * var(--px)) rgba(224, 224, 224, 0.6);
  --shadow-sm-6: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(0, 0, 0, 0.31);
  --shadow-md-primary-4: calc(6 * var(--px)) 0 calc(9 * var(--px)) rgba(28, 179, 118, 0.278);
  --shadow-sm-green-5: 0 calc(3 * var(--px)) calc(6 * var(--px)) #63b31c;
  --shadow-sm-yellow: 0 calc(3 * var(--px)) calc(6 * var(--px)) #b3ae1c;
  --shadow-sm-primary-3: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(28, 179, 118, 0.502);
  --shadow-sm-yellow-2-2: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(255, 222, 0, 0.549);
  --shadow-sm-orange-2: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(255, 153, 0, 0.549);
  --shadow-md-4: calc(4 * var(--px)) calc(3 * var(--px)) calc(16 * var(--px)) rgba(0, 0, 0, 0.11);
  --shadow-lg-gray-27-2: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) rgba(70, 70, 70, 0.188);
  --shadow-md-teal-2: 0 calc(3 * var(--px)) calc(16 * var(--px)) rgba(37, 179, 170, 0.6);
  --shadow-md-5: 0 calc(10 * var(--px)) calc(15 * var(--px)) rgba(0, 0, 0, 0.078);

  /* Border widths */
  --border-1: calc(1 * var(--px));
  --border-2: calc(2 * var(--px));
  --border-5: calc(5 * var(--px));
  --border-3: calc(3 * var(--px));

  /* Opacities */
  --opacity-9: 0.09;
  --opacity-19: 0.19;
  --opacity-30: 0.3;
  --opacity-50: 0.5;
  --opacity-62: 0.62;
  --opacity-31: 0.31;

  /* Typography */
  --font-family: "IRANSansXFaNum", sans-serif;
  /* 1.5 for IRANSansX and its FaNum twin (ascender 1000 + descender 500). Written as `normal`: with the number, Chrome lifts odd-sized text by 1px. */
  --line-height: normal;
  --font-size-6: calc(6 * var(--px));
  --font-size-7: calc(7 * var(--px));
  --font-size-8: calc(8 * var(--px));
  --font-size-9: calc(9 * var(--px));
  --font-size-10: calc(10 * var(--px));
  --font-size-11: calc(11 * var(--px));
  --font-size-12: calc(12 * var(--px));
  --font-size-13: calc(13 * var(--px));
  --font-size-14: calc(14 * var(--px));
  --font-size-15: calc(15 * var(--px));
  --font-size-16: calc(16 * var(--px));
  --font-size-17: calc(17 * var(--px));
  --font-size-18: calc(18 * var(--px));
  --font-size-19: calc(19 * var(--px));
  --font-size-20: calc(20 * var(--px));
  --font-size-21: calc(21 * var(--px));
  --font-size-22: calc(22 * var(--px));
  --font-size-23: calc(23 * var(--px));
  --font-size-24: calc(24 * var(--px));
  --font-size-25: calc(25 * var(--px));
  --font-size-26: calc(26 * var(--px));
  --font-size-28: calc(28 * var(--px));
  --font-size-30: calc(30 * var(--px));
  --font-size-31: calc(31 * var(--px));
  --font-size-33: calc(33 * var(--px));
  --font-size-35: calc(35 * var(--px));
  --font-size-40: calc(40 * var(--px));
  --font-size-45: calc(45 * var(--px));
  /* One value per text style, for `font: var(--text-...)` where an element changes its style with the layout */
  --text-20-medium: 500 var(--font-size-20) / var(--line-height) var(--font-family);
  --text-17-medium: 500 var(--font-size-17) / var(--line-height) var(--font-family);
  --text-19-medium: 500 var(--font-size-19) / var(--line-height) var(--font-family);
  --text-16-medium: 500 var(--font-size-16) / var(--line-height) var(--font-family);
  --text-14-regular: 400 var(--font-size-14) / var(--line-height) var(--font-family);
  --text-20-regular: 400 var(--font-size-20) / var(--line-height) var(--font-family);
  --text-25-medium: 500 var(--font-size-25) / var(--line-height) var(--font-family);
  --text-17-regular: 400 var(--font-size-17) / var(--line-height) var(--font-family);
  --text-18-medium: 500 var(--font-size-18) / var(--line-height) var(--font-family);
  --text-20-bold: 700 var(--font-size-20) / var(--line-height) var(--font-family);
  --text-15-medium: 500 var(--font-size-15) / var(--line-height) var(--font-family);
  --text-20-demibold: 600 var(--font-size-20) / var(--line-height) var(--font-family);
  --text-30-medium: 500 var(--font-size-30) / var(--line-height) var(--font-family);
  --text-17-bold: 700 var(--font-size-17) / var(--line-height) var(--font-family);
  --text-30-bold: 700 var(--font-size-30) / var(--line-height) var(--font-family);
  --text-18-regular: 400 var(--font-size-18) / var(--line-height) var(--font-family);
  --text-21-medium: 500 var(--font-size-21) / var(--line-height) var(--font-family);
  --text-22-medium: 500 var(--font-size-22) / var(--line-height) var(--font-family);
  --text-25-bold: 700 var(--font-size-25) / var(--line-height) var(--font-family);
  --text-18-bold: 700 var(--font-size-18) / var(--line-height) var(--font-family);
  --text-19-bold: 700 var(--font-size-19) / var(--line-height) var(--font-family);
  --text-35-medium: 500 var(--font-size-35) / var(--line-height) var(--font-family);
  --text-19-regular: 400 var(--font-size-19) / var(--line-height) var(--font-family);
  --text-14-medium: 500 var(--font-size-14) / var(--line-height) var(--font-family);
  --text-24-bold: 700 var(--font-size-24) / var(--line-height) var(--font-family);
  --text-22-bold: 700 var(--font-size-22) / var(--line-height) var(--font-family);
  --text-25-demibold: 600 var(--font-size-25) / var(--line-height) var(--font-family);
  --text-24-medium: 500 var(--font-size-24) / var(--line-height) var(--font-family);
  --text-25-regular: 400 var(--font-size-25) / var(--line-height) var(--font-family);
  --text-26-regular: 400 var(--font-size-26) / var(--line-height) var(--font-family);
  --text-13-medium: 500 var(--font-size-13) / var(--line-height) var(--font-family);
  --text-30-demibold: 600 var(--font-size-30) / var(--line-height) var(--font-family);
  --text-40-medium: 500 var(--font-size-40) / var(--line-height) var(--font-family);
  --text-23-bold: 700 var(--font-size-23) / var(--line-height) var(--font-family);
  --text-35-regular: 400 var(--font-size-35) / var(--line-height) var(--font-family);
  --text-35-demibold: 600 var(--font-size-35) / var(--line-height) var(--font-family);
  --text-31-medium: 500 var(--font-size-31) / var(--line-height) var(--font-family);
  --text-28-bold: 700 var(--font-size-28) / var(--line-height) var(--font-family);
  --text-15-light: 300 var(--font-size-15) / var(--line-height) var(--font-family);
  --text-21-regular: 400 var(--font-size-21) / var(--line-height) var(--font-family);
  --text-23-medium: 500 var(--font-size-23) / var(--line-height) var(--font-family);
  --text-33-bold: 700 var(--font-size-33) / var(--line-height) var(--font-family);
  --text-45-bold: 700 var(--font-size-45) / var(--line-height) var(--font-family);
  --text-40-bold: 700 var(--font-size-40) / var(--line-height) var(--font-family);
  --text-15-bold: 700 var(--font-size-15) / var(--line-height) var(--font-family);
  --text-9-bold: 700 var(--font-size-9) / var(--line-height) var(--font-family);
  --text-11-medium: 500 var(--font-size-11) / var(--line-height) var(--font-family);
  --text-12-regular: 400 var(--font-size-12) / var(--line-height) var(--font-family);
  --text-16-bold: 700 var(--font-size-16) / var(--line-height) var(--font-family);
  --text-21-bold: 700 var(--font-size-21) / var(--line-height) var(--font-family);
  --text-13-regular: 400 var(--font-size-13) / var(--line-height) var(--font-family);
  --text-7-medium: 500 var(--font-size-7) / var(--line-height) var(--font-family);
  --text-8-regular: 400 var(--font-size-8) / var(--line-height) var(--font-family);
  --text-9-regular: 400 var(--font-size-9) / var(--line-height) var(--font-family);
  --text-10-regular: 400 var(--font-size-10) / var(--line-height) var(--font-family);
  --text-10-bold: 700 var(--font-size-10) / var(--line-height) var(--font-family);
  --text-11-regular: 400 var(--font-size-11) / var(--line-height) var(--font-family);
  --text-12-medium: 500 var(--font-size-12) / var(--line-height) var(--font-family);
  --text-12-bold: 700 var(--font-size-12) / var(--line-height) var(--font-family);
  --text-13-bold: 700 var(--font-size-13) / var(--line-height) var(--font-family);
  --text-14-bold: 700 var(--font-size-14) / var(--line-height) var(--font-family);
  --text-15-regular: 400 var(--font-size-15) / var(--line-height) var(--font-family);
  --text-9-medium: 500 var(--font-size-9) / var(--line-height) var(--font-family);
  --text-10-medium: 500 var(--font-size-10) / var(--line-height) var(--font-family);
  --text-6-bold: 700 var(--font-size-6) / var(--line-height) var(--font-family);
  --text-11-bold: 700 var(--font-size-11) / var(--line-height) var(--font-family);
  --text-8-bold: 700 var(--font-size-8) / var(--line-height) var(--font-family);
  --text-8-medium: 500 var(--font-size-8) / var(--line-height) var(--font-family);
  --text-8-light: 300 var(--font-size-8) / var(--line-height) var(--font-family);

  /* Component sizes */
  /* page: 221 artboards; Figma page 'site - 10/05/2026' and '360 px web app - 10/05/2026' */
  --page-design-width: calc(1920 * var(--px));
  --page-content-width: calc(1638 * var(--px));
  --page-content-inset: calc(141 * var(--px));
  /* site-header: Figma Web 1:974 (guest), 1:1498 (host), 1:3027 (preacher), 1:15109 (no active item); Application 1:5214 inside 1:5099 (mobile); active «درباره ما» and «ارتباط با ما» from #165, #2 (guest), #167, #4 (host), #166, #3 (preacher); the line without an active item of the preacher's header from #230, #199, #22 (Web 1:3560, 1:4511, 1:5472); active «محتوا» from #208, #210, #209 (Web 1:128756, 1:131002, 1:129466) */
  --site-header-height: calc(96 * var(--px));
  --site-header-logo-start: calc(135.99 * var(--px));
  --site-header-logo-top: calc(7.55 * var(--px));
  --site-header-logo-width: calc(64.88 * var(--px));
  --site-header-logo-height: calc(80.89 * var(--px));
  --site-header-search-start: calc(250 * var(--px));
  --site-header-search-top: calc(16 * var(--px));
  --site-header-search-size: calc(65 * var(--px));
  --site-header-search-icon-start: calc(19.55 * var(--px));
  --site-header-search-icon-top: calc(19.01 * var(--px));
  --site-header-search-icon-width: calc(27.24 * var(--px));
  --site-header-search-icon-height: calc(26.99 * var(--px));
  --site-header-nav-top: calc(37 * var(--px));
  --site-header-nav-active-top: calc(29 * var(--px));
  --site-header-nav-active-25-top: calc(31 * var(--px));
  --site-header-nav-home-center: calc(435.58 * var(--px));
  --site-header-nav-content-center: calc(545.52 * var(--px));
  --site-header-nav-guest-about-center: calc(648.96 * var(--px));
  --site-header-nav-guest-contact-center: calc(764.96 * var(--px));
  --site-header-nav-member-follow-center: calc(639.56 * var(--px));
  --site-header-nav-member-ticket-center: calc(731.6 * var(--px));
  --site-header-nav-member-about-center: calc(828.64 * var(--px));
  --site-header-nav-member-contact-center: calc(944.68 * var(--px));
  --site-header-indicator-top: calc(89 * var(--px));
  --site-header-indicator-height: calc(7 * var(--px));
  --site-header-indicator-active-width: calc(89 * var(--px));
  --site-header-indicator-home-start: calc(389 * var(--px));
  --site-header-indicator-content-start: calc(501 * var(--px));
  --site-header-indicator-member-follow-start: calc(595 * var(--px));
  --site-header-indicator-guest-about-start: calc(604 * var(--px));
  --site-header-indicator-guest-contact-start: calc(720 * var(--px));
  --site-header-indicator-member-about-start: calc(784 * var(--px));
  --site-header-indicator-member-contact-start: calc(900 * var(--px));
  --site-header-track-start: calc(398 * var(--px));
  --site-header-track-guest-width: calc(411 * var(--px));
  --site-header-track-member-width: calc(591 * var(--px));
  --site-header-track-preacher-start: calc(389 * var(--px));
  --site-header-track-preacher-width: calc(596 * var(--px));
  --site-header-donate-top: calc(30 * var(--px));
  --site-header-donate-width: calc(119 * var(--px));
  --site-header-donate-height: calc(43 * var(--px));
  --site-header-donate-guest-start: calc(866 * var(--px));
  --site-header-donate-member-start: calc(1046 * var(--px));
  --site-header-donate-label-top: calc(7 * var(--px));
  --site-header-donate-label-center: calc(59.79 * var(--px));
  --site-header-donate-angle: 250.133deg;
  --site-header-request-top: calc(16 * var(--px));
  --site-header-request-width: calc(251 * var(--px));
  --site-header-request-height: calc(65 * var(--px));
  --site-header-request-guest-start: calc(1253 * var(--px));
  --site-header-request-host-start: calc(1384 * var(--px));
  --site-header-request-label-start: calc(83 * var(--px));
  --site-header-request-label-top: calc(17 * var(--px));
  --site-header-request-angle: 256.54deg;
  --site-header-request-stop-from: 1.6536%;
  --site-header-request-stop-to: 101.96%;
  --site-header-request-plus-length: calc(28.97 * var(--px));
  --site-header-request-plus-thickness: calc(6.145 * var(--px));
  --site-header-request-plus-radius: calc(56 * var(--px));
  --site-header-request-plus-start: calc(19.74 * var(--px));
  --site-header-request-plus-top: calc(18.19 * var(--px));
  --site-header-login-top: calc(16 * var(--px));
  --site-header-login-width: calc(260 * var(--px));
  --site-header-login-height: calc(65 * var(--px));
  --site-header-login-start: calc(1519 * var(--px));
  --site-header-login-label-start: calc(65 * var(--px));
  --site-header-login-label-top: calc(17 * var(--px));
  --site-header-login-icon-start: calc(16.41 * var(--px));
  --site-header-login-icon-top: calc(16.69 * var(--px));
  --site-header-user-icon-width: calc(30.12 * var(--px));
  --site-header-user-icon-height: calc(32.86 * var(--px));
  --site-header-account-top: calc(16 * var(--px));
  --site-header-account-width: calc(129 * var(--px));
  --site-header-account-height: calc(65 * var(--px));
  --site-header-account-start: calc(1650 * var(--px));
  --site-header-account-icon-start: calc(68.5 * var(--px));
  --site-header-account-icon-top: calc(16.69 * var(--px));
  --site-header-account-chevron-start: calc(26.38 * var(--px));
  --site-header-account-chevron-top: calc(27.07 * var(--px));
  --site-header-chevron-width: calc(15.88 * var(--px));
  --site-header-chevron-height: calc(9.87 * var(--px));
  --site-header-account-picture: calc(44 * var(--px));
  /* site-footer: Figma Web 1:660 (light, on #162) and 1:15106 (on the gradient card, #86); baselines from the SVG export of #162 and #86. Vertical positions are measured from the top of the title line. The three rules are placed as Figma draws them: 5px thick with round ends, from the line downwards (the export has them 2.5px higher and 2.5px longer at each end; see docs/design-mismatches.md). */
  --site-footer-height: calc(618 * var(--px));
  --site-footer-main-start: calc(330.52 * var(--px));
  --site-footer-title-top: 0;
  --site-footer-main-rule-start: calc(340.276 * var(--px));
  --site-footer-main-rule-top: calc(86 * var(--px));
  --site-footer-main-rule-width: calc(199.194 * var(--px));
  --site-footer-text-width: calc(387 * var(--px));
  --site-footer-text-top: calc(108 * var(--px));
  --site-footer-text-line-pitch: calc(43 * var(--px));
  --site-footer-links-start: calc(907 * var(--px));
  --site-footer-link-1-top: calc(1 * var(--px));
  --site-footer-link-2-top: calc(42 * var(--px));
  --site-footer-link-3-top: calc(84 * var(--px));
  --site-footer-link-4-top: calc(125 * var(--px));
  --site-footer-link-5-top: calc(167 * var(--px));
  --site-footer-link-6-top: calc(209 * var(--px));
  --site-footer-link-7-top: calc(250 * var(--px));
  --site-footer-contact-title-top: calc(358 * var(--px));
  --site-footer-contact-rule-start: calc(916.756 * var(--px));
  --site-footer-contact-rule-top: calc(436 * var(--px));
  --site-footer-contact-rule-width: calc(199.194 * var(--px));
  --site-footer-address-top: calc(469 * var(--px));
  --site-footer-address-width: calc(357 * var(--px));
  --site-footer-address-line-pitch: calc(37 * var(--px));
  --site-footer-phone-top: calc(555 * var(--px));
  --site-footer-email-top: calc(588 * var(--px));
  --site-footer-social-start: calc(1327.52 * var(--px));
  --site-footer-social-title-top: calc(1 * var(--px));
  --site-footer-social-rule-top: calc(79 * var(--px));
  --site-footer-social-rule-width: calc(247.977 * var(--px));
  --site-footer-rule-thickness: calc(5 * var(--px));
  --site-footer-social-1-start: calc(1537.36 * var(--px));
  --site-footer-social-1-top: calc(111.84 * var(--px));
  --site-footer-social-1-size: calc(38.16 * var(--px));
  --site-footer-social-2-start: calc(1484.13 * var(--px));
  --site-footer-social-2-top: calc(111.83 * var(--px));
  --site-footer-social-2-size: calc(38.19 * var(--px));
  --site-footer-social-3-start: calc(1430.98 * var(--px));
  --site-footer-social-3-top: calc(112.17 * var(--px));
  --site-footer-social-3-size: calc(38.12 * var(--px));
  --site-footer-social-4-start: calc(1377.75 * var(--px));
  --site-footer-social-4-top: calc(111.98 * var(--px));
  --site-footer-social-4-size: calc(38.19 * var(--px));
  --site-footer-social-5-start: calc(1324.54 * var(--px));
  --site-footer-social-5-top: calc(111.98 * var(--px));
  --site-footer-social-5-size: calc(38.03 * var(--px));
  /* footer-card: Figma Web 1:15108 on #86 (Union 8, logo 1:14979); gradient vector of the SVG export, angle by atan2 for a 1638x751 box. The logo has the opacity of the export, 0.09 (Figma draws it at full opacity; owner's decision of 2026-10-07, docs/design-mismatches.md, case 1). */
  --footer-card-width: calc(1638 * var(--px));
  --footer-card-height: calc(751 * var(--px));
  --footer-card-angle: 245.369deg;
  --footer-card-content-top: calc(60.55 * var(--px));
  --footer-card-watermark-start: calc(1221 * var(--px));
  --footer-card-watermark-top: calc(213 * var(--px));
  --footer-card-watermark-width: calc(378.76 * var(--px));
  --footer-card-watermark-height: calc(500.01 * var(--px));
  --footer-card-watermark-opacity: 0.09;
  /* install-bar: Figma Web 1:15011 on #86; dots of the tile from the SVG export */
  --install-bar-width: calc(1638 * var(--px));
  --install-bar-height: calc(109 * var(--px));
  --install-bar-angle: 266.163deg;
  --install-bar-stop-from: 0.76519%;
  --install-bar-stop-to: 100%;
  --install-bar-tile-start: calc(26 * var(--px));
  --install-bar-tile-top: calc(25 * var(--px));
  --install-bar-tile-size: calc(60 * var(--px));
  --install-bar-dot-size: calc(8 * var(--px));
  --install-bar-dot-top: calc(26 * var(--px));
  --install-bar-dot-1-start: calc(14 * var(--px));
  --install-bar-dot-2-start: calc(26 * var(--px));
  --install-bar-dot-3-start: calc(38 * var(--px));
  --install-bar-label-start: calc(189.52 * var(--px));
  --install-bar-label-top: calc(32 * var(--px));
  /* footer-area: Figma Web: footer on the page background with its logo (#2: logo 1:130793, bar 1:130814; #162) and footer on the card (#86). The logo has the opacity of the export, 0.19 (Figma draws it at full opacity; owner's decision of 2026-10-07, docs/design-mismatches.md, case 10). The artboards draw the logo 309.45 below the top of the footer (366.45 on most of the lists of content), with its lower part behind the install bar; since 2026-10-11 the footer places it above the bar, by the sizes of the footer card (owner's decision, docs/design-mismatches.md, case H). */
  --footer-area-light-install-gap: calc(150.45 * var(--px));
  --footer-area-card-install-gap: calc(78 * var(--px));
  --footer-area-light-logo-start: calc(1261 * var(--px));
  --footer-area-light-logo-width: calc(378.76 * var(--px));
  --footer-area-light-logo-height: calc(500.01 * var(--px));
  --footer-area-light-logo-opacity: 0.19;
  /* text-field: Figma Web #229 (fields 1:3133, 1:3146), #197 (1:3989); corner radius from the SVG export. Application 1:5099, 1:8880. */
  --text-field-width: calc(417 * var(--px));
  --text-field-height: calc(65 * var(--px));
  --text-field-text-start: calc(25 * var(--px));
  --text-field-text-top: calc(17 * var(--px));
  --text-field-surname-icon-start: calc(362.5 * var(--px));
  --text-field-surname-icon-top: calc(15.02 * var(--px));
  --text-field-surname-icon-width: calc(36.91 * var(--px));
  --text-field-surname-icon-height: calc(33.96 * var(--px));
  --text-field-mobile-icon-start: calc(363.63 * var(--px));
  --text-field-mobile-icon-top: calc(14.33 * var(--px));
  --text-field-mobile-icon-width: calc(34.65 * var(--px));
  --text-field-mobile-icon-height: calc(34.65 * var(--px));
  --text-field-code-icon-start: calc(363.97 * var(--px));
  --text-field-code-icon-top: calc(15.02 * var(--px));
  --text-field-code-icon-width: calc(33.96 * var(--px));
  --text-field-code-icon-height: calc(33.96 * var(--px));
  /* app-button: Figma Web #229 (1:3160 primary, 1:3153 secondary), #197; Application 1:5099 (1:5141, 1:5134). */
  --app-button-height: calc(86.95 * var(--px));
  --app-button-primary-width: calc(208.25 * var(--px));
  --app-button-secondary-width: calc(183.84 * var(--px));
  --app-button-radius: calc(20 * var(--px));
  --app-button-label-top: calc(28.98 * var(--px));
  --app-button-angle: 247.337deg;
  /* sign-in: Figma Web #229 (1:3088), #230 (1:3560), #231 (1:3357), #197 (1:3794), #198 (1:4247), #199 (1:4511); Application 1:4964 (role choice), 1:5099 and 1:5215 (step 1), 1:8880 and 1:8988 (step 2). Desktop: the page starts under the header; what belongs to a card is measured from the top and the inline start of the card. Mobile: measured from the top of the frame under its header. One card is shown at a time (owner's decision of 2026-10-07): the two cards side by side of #229 are not built; `other-system-gap` places the line under the card that leads to the other system, which the design does not have. The large logo has the opacity of the export, 0.62 (docs/design-mismatches.md, case 11). */
  --sign-in-page-height: calc(984 * var(--px));
  --sign-in-card-width: calc(519 * var(--px));
  --sign-in-card-top: calc(167 * var(--px));
  --sign-in-card-height-1: calc(629 * var(--px));
  --sign-in-card-height-1-terms: calc(708 * var(--px));
  --sign-in-card-height-2: calc(540 * var(--px));
  --sign-in-card-height-2-terms: calc(604 * var(--px));
  --sign-in-card-single-start: calc(722 * var(--px));
  --sign-in-other-system-gap: calc(40 * var(--px));
  --sign-in-heading-start: calc(8 * var(--px));
  --sign-in-heading-top: calc(-94 * var(--px));
  --sign-in-heading-icon-start: calc(-43 * var(--px));
  --sign-in-heading-icon-top: calc(-83.93 * var(--px));
  --sign-in-heading-icon-width: calc(30.12 * var(--px));
  --sign-in-heading-icon-height: calc(32.86 * var(--px));
  --sign-in-text-start: calc(51 * var(--px));
  --sign-in-title-top: calc(65 * var(--px));
  --sign-in-step-top: calc(159 * var(--px));
  --sign-in-rule-start: calc(51.25 * var(--px));
  --sign-in-rule-top: calc(197 * var(--px));
  --sign-in-rule-width: calc(124.25 * var(--px));
  --sign-in-hint-top: calc(208 * var(--px));
  --sign-in-field-start: calc(51 * var(--px));
  --sign-in-field-1-top: calc(285 * var(--px));
  --sign-in-field-2-top: calc(370 * var(--px));
  --sign-in-buttons-top-1: calc(487 * var(--px));
  --sign-in-buttons-top-2: calc(397 * var(--px));
  --sign-in-primary-start: calc(51.25 * var(--px));
  --sign-in-secondary-start: calc(284.16 * var(--px));
  --sign-in-next-label-start: calc(64.63 * var(--px));
  --sign-in-clear-label-start: calc(33.92 * var(--px));
  --sign-in-confirm-label-start: calc(84.63 * var(--px));
  --sign-in-back-label-start: calc(51.92 * var(--px));
  --sign-in-terms-box-start: calc(53.99 * var(--px));
  --sign-in-terms-box-top: calc(123.67 * var(--px));
  --sign-in-terms-box-size: calc(32.6 * var(--px));
  --sign-in-terms-text-start: calc(115 * var(--px));
  --sign-in-terms-text-top: calc(125.26 * var(--px));
  --sign-in-terms-line-start: calc(118.5 * var(--px));
  --sign-in-terms-line-top: calc(161.26 * var(--px));
  --sign-in-terms-line-width: calc(103 * var(--px));
  --sign-in-watermark-width: calc(562.7 * var(--px));
  --sign-in-watermark-height: calc(742 * var(--px));
  --sign-in-watermark-opacity: 0.62;
  --sign-in-watermark-step-1-start: calc(1322 * var(--px));
  --sign-in-watermark-step-1-top: calc(202 * var(--px));
  --sign-in-watermark-host-code-start: calc(397 * var(--px));
  --sign-in-watermark-host-code-top: calc(213 * var(--px));
  --sign-in-watermark-preacher-code-start: calc(913 * var(--px));
  --sign-in-watermark-preacher-code-top: calc(1 * var(--px));
  --sign-in-band-start: calc(284 * var(--px));
  --sign-in-band-top: calc(931 * var(--px));
  --sign-in-band-width: calc(1352 * var(--px));
  --sign-in-band-height: calc(83 * var(--px));
  --sign-in-band-angle: 266.487deg;
  /* contact: Figma Web 1:130792 (#2), 1:131929 (#4), 1:131721 (#3): the page is the header and the footer on the page background; room above the title line of the footer and below the install bar */
  --contact-above: calc(52.55 * var(--px));
  --contact-below: calc(54 * var(--px));
  /* about: Figma Web 1:130086 (#165), 1:130321 (#167), 1:130562 (#166); line breaks, baselines and the crop of the two photos from the SVG export. Tops are measured from the lower edge of the header. The two rules are placed as Figma draws them (2px, from the line downwards, as the rules of the footer). Only #165 has the band in gray-95 behind the content. Release 2, R2: the texts are written in place; their widths (from the start of the text to the photo, and the whole frame) and the heights they have before the next title or photo. */
  --about-band-height: calc(1708.21 * var(--px));
  --about-text-start: calc(250 * var(--px));
  --about-title-1-top: calc(127 * var(--px));
  --about-rule-1-top: calc(205 * var(--px));
  --about-rule-width: calc(308 * var(--px));
  --about-text-1-top: calc(255 * var(--px));
  --about-title-2-top: calc(766 * var(--px));
  --about-rule-2-top: calc(844 * var(--px));
  --about-text-2-top: calc(894 * var(--px));
  --about-line-pitch: calc(30 * var(--px));
  --about-photo-1-start: calc(836 * var(--px));
  --about-photo-1-top: calc(107 * var(--px));
  --about-photo-1-width: calc(834 * var(--px));
  --about-photo-1-height: calc(572 * var(--px));
  --about-photo-1-image-width: calc(1034.65 * var(--px));
  --about-photo-1-image-height: calc(689.77 * var(--px));
  --about-photo-1-image-start: calc(-175.32 * var(--px));
  --about-photo-1-image-top: calc(-19.6 * var(--px));
  --about-photo-2-start: calc(250 * var(--px));
  --about-photo-2-top: calc(1259 * var(--px));
  --about-photo-2-width: calc(1420 * var(--px));
  --about-photo-2-height: calc(362 * var(--px));
  --about-photo-2-image-width: calc(1712.35 * var(--px));
  --about-photo-2-image-height: calc(1141.57 * var(--px));
  --about-photo-2-image-start: calc(-270.28 * var(--px));
  --about-photo-2-image-top: calc(-324.78 * var(--px));
  --about-footer-gap: calc(98.34 * var(--px));
  --about-below: calc(63 * var(--px));
  --about-text-1-width: calc(550 * var(--px));
  --about-text-1-height: calc(480 * var(--px));
  --about-text-2-width: calc(1420 * var(--px));
  --about-text-2-height: calc(345 * var(--px));
  /* featured: Figma Web 1:348, 1:178, 1:513 on #162 (the same block on #163, #164, #208-210); windows of the scroll groups, drawings and photos from the SVG export of #162; Application 1:68 (rows 1:138, 1:322, 1:501). design/_tools/pages/featured.py */
  --featured-height: calc(1711.19 * var(--px));
  --featured-track-width: calc(2382.48 * var(--px));
  --featured-band-1-angle: 253.524deg;
  --featured-band-1-from: -0%;
  --featured-band-1-to: 124.87%;
  --featured-band-3-angle: 74.296deg;
  --featured-band-3-from: -1.07%;
  --featured-band-3-to: 130.6%;
  --featured-bands-low: calc(7 * var(--px));
  --featured-extra-height: calc(582 * var(--px));
  /* media-card: the content card: Figma Web 1:300 on #162 (photo, shade, title, name, kind of content); Application 1:290 in 1:68 */
  --media-card-shade: linear-gradient(180deg, rgba(0, 0, 0, 0) 12.53%, rgba(0, 0, 0, 0.75) 79.54%);
  /* content: Figma Web 1:128756 (#208), 1:131002 (#210), 1:129466 (#209): where the rows of selected content start, the room above the footer and below the install bar; Application 1:2805 and 1:3546: the room for the invitation between the rows and «آمار سامانه». design/_tools/pages/content.py */
  --content-rows-top: calc(-25 * var(--px));
  --content-footer-gap: calc(120.36 * var(--px));
  --content-rows-top-host: calc(-22 * var(--px));
  --content-footer-gap-host: calc(117.36 * var(--px));
  --content-rows-top-preacher: calc(-6 * var(--px));
  --content-footer-gap-preacher: calc(101.36 * var(--px));
  --content-below: calc(63 * var(--px));
  /* home-hero: Figma Web 1:689 (slider) and 1:727 (invitation) on #162, the preacher's button 1:2103 on #163; Application 1:98 and the place of 1:137 in 1:68. design/_tools/pages/home.py */
  --home-hero-height: calc(767 * var(--px));
  --home-hero-offers-angle: 261.039deg;
  --home-hero-offers-from: 1.61%;
  --home-hero-offers-to: 102.16%;
  --home-hero-slide-shift: 7%;
  --home-hero-text-rise: calc(16 * var(--px));
  /* donation-bar: Figma Web 1:532 on #162; Application 1:707 in 1:68. design/_tools/pages/home.py */
  --donation-bar-height: calc(425.49 * var(--px));
  --donation-bar-angle: 264.924deg;
  /* news-list: Figma Web 1:955 on #162 (lines and baselines of the texts from the SVG export); Application 1:841 in 1:68. design/_tools/pages/home.py Release 2, R2: the news are written texts, not the lines of the design: the width of a summary (from its start to the margin the photo keeps on the other side) and of a title. */
  --news-list-height: calc(1516.56 * var(--px));
  --news-list-rule-thickness: calc(5 * var(--px));
  --news-list-line-pitch: calc(47 * var(--px));
  --news-list-text-width: calc(1156 * var(--px));
  /* stats-band: Figma Web 1:808 on #162; Application 1:918 in 1:68. design/_tools/pages/home.py. The mobile band ends 32 below its numbers (owner, 2026-10-26: the frame drew 287, empty under the numbers). */
  --stats-band-height: calc(596.65 * var(--px));
  /* home: the home pages #162, #164 (6157 high) and #163 (6143 high): room between the sections, above the footer and below the install bar */
  --home-footer-gap: calc(113.66 * var(--px));
  --home-below: calc(53 * var(--px));
  --home-below-preacher: calc(39 * var(--px));
  /* dev-preview: the Debug-only preview of the layout: room below the install bar as on #86 (94) and #162 (53) */
  --dev-preview-below-card: calc(94 * var(--px));
  --dev-preview-below-light: calc(53 * var(--px));
  /* content-tabs: Figma Web 1:113652 on #170 (the same bar on #186 and #5, with another tab open; on #171-185 as on these three); Application 1:2766 in 1:2499, 1:1887, 1:2193. design/_tools/pages/media.py */
  --content-tabs-height: calc(97 * var(--px));
  --content-tabs-many-start: calc(300 * var(--px));
  --content-tabs-many-end: calc(600 * var(--px));
  --content-tabs-many-gap: calc(48 * var(--px));
  /* media-list: Figma Web 1:113180 and 1:113431 on #170 («محبوب ترین ها», «جدید ترین ها»), the same on #186 and #5 with other cards; windows of the scroll groups, photos and drawings from the SVG exports; Application 1:2744 in 1:2499 (the same grid in 1:1887, 1:2193). design/_tools/pages/media.py */
  --media-list-track-width: calc(2053.34 * var(--px));
  --media-list-height: calc(1226.76 * var(--px));
  /* people-row: Figma Web 1:112925 on #170 («مداحان»), 1:119545 #186 («سخنرانان»), 1:123027 #5 («شاعران»); the same row on the pages of one piece of content. design/_tools/pages/media.py */
  --people-row-height: calc(235.28 * var(--px));
  /* occasions: Figma Web 1:112887 and 1:112926 on #170; the same block on every page of the three lists. design/_tools/pages/media.py. Since Release 2 the occasions come from the API: a chip is as wide as its label needs (the padding of the chips of the design), in one row from the place of the first chip that scrolls sideways. */
  --occasions-height: calc(47 * var(--px));
  --occasions-chips-start: calc(465.23 * var(--px));
  --occasions-chips-end: calc(249.53 * var(--px));
  --occasions-chip-gap: calc(16.42 * var(--px));
  --occasions-chip-padding: calc(21 * var(--px));
  --occasions-chip-height: calc(46.51 * var(--px));
  /* player-bar: Figma Web 1:113484 on #170 (the same bar on every list and on #172, #179, #181); the drawing of the controls and the cross from the SVG export. The window of the artboards is 1080 high: the bar ends 30.97 above its lower edge. design/_tools/pages/media.py. Since Release 2 the line, its played part and the knob are drawn by the page (they move with the time): the line is the one of the drawing, the drawing without them is graphics/player-bar-skips.svg. */
  --player-bar-height: calc(94.03 * var(--px));
  --player-bar-bottom: calc(30.97 * var(--px));
  --player-bar-angle: 266.602deg;
  --player-bar-time-color: rgba(255, 255, 255, 0.51);
  --player-bar-knob: calc(21.05 * var(--px));
  --player-bar-line: calc(3 * var(--px));
  --player-bar-rail-opacity: 0.35;
  --player-bar-skip-icon: calc(38 * var(--px));
  /* media-item: Figma Web 1:114072 on #172 (sound), 1:115977 on #173 (film), 1:116922 on #183 (text); lines of the two paragraphs from the SVG export of #183. design/_tools/pages/media.py */
  --media-item-text-pitch: calc(30 * var(--px));
  /* media-page: Figma Web: the 18 artboards of «روضه مداحی», «سخنرانی» and «اشعار» (#5, #170-186). A set per artboard: how high the page is above the white band of the footer, where the install bar stands in the footer, and the room below. design/_tools/pages/media.py */
  --media-page-footer-top: calc(131.55 * var(--px));
  /* overlay: Application 1:19536 in 1:19534 (the same layer behind the popups 1:20386 and 1:4902): what lies over the page while a popup is open. design/_tools/pages/media.py The layer in the colours of the role under the page of the filters on a phone: Application 1:32084 (design/_tools/pages/filters.py). */
  --overlay-backdrop: rgba(49, 49, 49, 0.7);
  /* search-panel: Figma Web 1:101480 on #161 «جستجو»; drawings and their painted boxes from the export. The field is the text field of the sign-in cards with the drawing at its start. design/_tools/pages/popups.py */
  --search-panel-icon-start: calc(19.55 * var(--px));
  --search-panel-icon-top: calc(19.01 * var(--px));
  --search-panel-icon-width: calc(27.24 * var(--px));
  --search-panel-icon-height: calc(26.99 * var(--px));
  --search-panel-text-start: calc(66.34 * var(--px));
  /* donation-dialog: Figma Web 1:98635 on #226 «نذورات» (nothing chosen) and the same on #227 and #228 (an amount chosen); Application 1:19729 in 1:19592 and 1:20514. The cross and its painted box from the export. design/_tools/pages/popups.py */
  --donation-dialog-sign-start: calc(18.94 * var(--px));
  --donation-dialog-sign-top: calc(18.49 * var(--px));
  --donation-dialog-sign-length: calc(24.98 * var(--px));
  --donation-dialog-sign-thickness: calc(5 * var(--px));
  --donation-dialog-sign-radius: 0;
  --donation-dialog-button-angle: 259.434deg;
  --donation-dialog-label-top: calc(33.16 * var(--px));
  --donation-dialog-label-center: calc(285.52 * var(--px));
  /* article-dialog: Figma Web 1:97524 on #205 «متن»: the lines of the text and the window in which it scrolls from the SVG export. design/_tools/pages/popups.py Release 2, R2: the news are written texts, not the lines of the design: the width of a summary (from its start to the margin the photo keeps on the other side) and of a title. */
  --article-dialog-line-pitch: calc(47 * var(--px));
  --article-dialog-title-width: calc(828 * var(--px));
  /* news-dialog: Figma Web 1:97780 on #206 «متن – 1»: the same panel as #205 with the six items of 1:97778 in a window that scrolls (window, lines and baselines from the SVG export). design/_tools/pages/popups.py Release 2, R2: the news are written texts, not the lines of the design: the width of a summary (from its start to the margin the photo keeps on the other side) and of a title. */
  --news-dialog-held-height: calc(2742.29 * var(--px));
  --news-dialog-title-pitch: calc(52 * var(--px));
  --news-dialog-line-pitch: calc(47 * var(--px));
  --news-dialog-rule-thickness: calc(5 * var(--px));
  --news-dialog-text-width: calc(734 * var(--px));
  /* account-menu: Figma Web 1:132381 on #20 «پاپ آپ حساب کاربری مبلغ» and 1:132249 on #21 «پاپ آپ حساب کاربری میزبان» (the menu alone; it hangs where #20 has the preacher's: approved mapping of the popups). The drawings from the export, each named by its layer. design/_tools/pages/popups.py */
  --account-menu-host-height: calc(545 * var(--px));
  --account-menu-preacher-height: calc(675 * var(--px));
  --account-menu-manage-row: calc(63.66 * var(--px));
  /* profile: Figma Web #25 «پروفایل میزبان» (1:4733) and #22 «پروفایل مبلغ» (1:5472): the column of the account, the same on #23, #24 and #26 to #34; drawings, the photo and their painted boxes from the export. Sets: the height above the footer and the room below it on each artboard. design/_tools/pages/profile.py */
  --profile-link-angle: 262.059deg;
  /* profile-stats: Figma Web 1:5218 on #25 and 1:6032 on #22 (the card «آمار مجالس شما»); #26 and #32 have the same card with the title of the others. The ring is the group of the export as one drawing (design/_tools/export_group.py). design/_tools/pages/profile.py */
  --profile-stats-button-angle: 260.04deg;
  --profile-stats-button-from: 2.04%;
  --profile-stats-button-to: 98.46%;
  /* profile-news: Figma Web 1:4947 on #25 («آخرین اخبار» with its four news; the same on #22): the window in which they scroll, their lines and baselines from the SVG export. design/_tools/pages/profile.py Release 2, R2: the news are written texts, not the lines of the design: the width of a summary (from its start to the margin the photo keeps on the other side) and of a title. */
  --profile-news-held-height: calc(1021 * var(--px));
  --profile-news-title-pitch: calc(36 * var(--px));
  --profile-news-line-pitch: calc(32 * var(--px));
  --profile-news-rule-thickness: calc(2 * var(--px));
  --profile-news-text-width: calc(443 * var(--px));
  /* profile-faq: Figma Web #31 «پروفایل میزبان – 6» (the six questions, 1:107487 and the five below it), #33 (the first one open, an answer of one line) and #34 (the second one open, four lines); the arrows and the lines of the answers from the export. An open question is as high as its answer needs: from the top of the answer, its lines, and the room below them. design/_tools/pages/profile.py */
  --profile-faq-height: calc(98.55 * var(--px));
  --profile-faq-gap: calc(22.23 * var(--px));
  --profile-faq-below: calc(85.35 * var(--px));
  --profile-faq-answer-start: calc(67 * var(--px));
  --profile-faq-answer-width: calc(531 * var(--px));
  --profile-faq-line-pitch: calc(30 * var(--px));
  /* outlined-field: Figma Web: the fields of #27 (1:103880 and the five beside it); Application: the fields of 1:17610. A box with an outline that throws the shadow; where its text starts and where its drawing stands is said by the form it stands in. design/_tools/pages/profile.py */
  --outlined-field-radius: calc(20 * var(--px));
  --outlined-field-border: calc(2 * var(--px));
  --outlined-field-height: calc(77.61 * var(--px));
  --outlined-field-small-height: calc(43 * var(--px));
  /* profile-addresses: Figma Web 1:105355 on #28 «پروفایل میزبان – 3» (heading, the pencil, three addresses, «ثبت آدرس جدید») and 1:106364 on #30 (the same list with a mark before every address and two buttons); the photos with their pictures and the drawings from the export. Application 1:17804 and 1:17980. With the marks every row stands `shift` further from the start. design/_tools/pages/profile.py */
  --profile-addresses-shift: calc(67 * var(--px));
  --profile-addresses-text-width-removing: calc(338.12 * var(--px));
  --profile-addresses-send-label-start: calc(52.62 * var(--px));
  --profile-addresses-send-label-shift: 0%;
  --profile-addresses-send-label-top: calc(28.98 * var(--px));
  --profile-addresses-back-label-start: calc(60.92 * var(--px));
  --profile-addresses-back-label-shift: 0%;
  --profile-addresses-back-label-top: calc(28.98 * var(--px));
  --profile-addresses-preacher-confirm-label-start: calc(104.12 * var(--px));
  --profile-addresses-preacher-confirm-label-shift: 50%;
  --profile-addresses-preacher-confirm-label-top: calc(28.98 * var(--px));
  --profile-addresses-preacher-back-label-start: calc(60.92 * var(--px));
  --profile-addresses-preacher-back-label-shift: 0%;
  --profile-addresses-preacher-back-label-top: calc(28.98 * var(--px));
  /* profile-address-form: Figma Web 1:112133 on #29 «پروفایل میزبان – 4» (heading, the map with its pin, five fields, two buttons); the picture of the map, the pin and the drawings of the fields from the export. Application 1:19156. design/_tools/pages/profile.py */
  --profile-address-form-map-radius: calc(30 * var(--px));
  --profile-address-form-send-label-start: calc(52.62 * var(--px));
  --profile-address-form-send-label-shift: 0%;
  --profile-address-form-send-label-top: calc(28.98 * var(--px));
  --profile-address-form-back-label-start: calc(60.92 * var(--px));
  --profile-address-form-back-label-shift: 0%;
  --profile-address-form-back-label-top: calc(28.98 * var(--px));
  /* profile-availability: Figma Web 1:8138 on #24 «پروفایل مبلغ آماده به کاری» with the two buttons under it (1:8045, 1:8052); Application 1:20060, where the same choice is a popup: a white sheet with a row for every choice and the buttons under it. Everything is measured from the box around the card and the buttons. The dot of a chosen option on a phone is the one of #24 at the scale of the two rings (the frame draws nothing chosen). design/_tools/pages/profile.py */
  --profile-availability-confirm-label-start: calc(104.12 * var(--px));
  --profile-availability-confirm-label-shift: 50%;
  --profile-availability-confirm-label-top: calc(28.98 * var(--px));
  --profile-availability-back-label-start: calc(60.92 * var(--px));
  --profile-availability-back-label-shift: 0%;
  --profile-availability-back-label-top: calc(28.98 * var(--px));
  --profile-availability-ring: calc(3 * var(--px));
  --profile-availability-dot-inset: calc(5.12 * var(--px));
  /* profile-sheet: Figma Web #23 «پروفایل مبلغ اطلاعات حساب» (the five cards 1:7061, 1:7101, 1:7305, 1:6441, 1:6328 and the two buttons); Application 1:18543. Every layer that shows is one placed item (d1, d2, … on the desktop, m1, m2, … on a phone), in the order of the file; drawings and the picture of the map from the export. design/_tools/pages/profile.py */
  --profile-sheet-back-label-start: calc(104.12 * var(--px));
  --profile-sheet-back-label-shift: 50%;
  --profile-sheet-back-label-top: calc(28.98 * var(--px));
  --profile-sheet-edit-label-start: calc(33.42 * var(--px));
  --profile-sheet-edit-label-shift: 0%;
  --profile-sheet-edit-label-top: calc(28.98 * var(--px));
  --profile-sheet-note-pitch: calc(23 * var(--px));
  --profile-sheet-ring: calc(3 * var(--px));
  --profile-sheet-card-border: calc(2 * var(--px));
  --profile-sheet-card-radius: calc(20 * var(--px));
  --profile-sheet-photo-radius: calc(15 * var(--px));
  /* tickets: Figma Web 1:110227 on #84 «تیکت» (the same card on #216 «مدیریت آدرس ها – 5»): heading, button, the names of the columns, eight rows, measured from the frame of the page (the card is wider on #216); what a row holds is measured from the row. Application 1:20713 (and 1:20968): a ticket is a card; what a card holds is measured from the card, and the name of the site from the lower edge of the last card. design/_tools/pages/tickets.py */
  --tickets-new-label-start: calc(88.5 * var(--px));
  --tickets-new-label-shift: 50%;
  --tickets-new-label-top: calc(14.5 * var(--px));
  --tickets-new-angle: 254.426deg;
  --tickets-new-from: 2.15%;
  --tickets-new-to: 98.11%;
  --tickets-row-radius: calc(16 * var(--px));
  --tickets-details-radius: calc(9 * var(--px));
  --tickets-dash: calc(3 * var(--px));
  /* ticket-form: Figma Web 1:110961 on #85 «تیکت – 1» (the same card on #217 «مدیریت آدرس ها – 6»): heading, five labels with their stars, four fields, the field of the text, two buttons. Application 1:18174 (and 1:18362), measured from the top of the frame. A text starts as far from the other edge of its field as from the first. design/_tools/pages/tickets.py */
  --ticket-form-send-label-start: calc(72.75 * var(--px));
  --ticket-form-send-label-shift: 50%;
  --ticket-form-send-label-top: calc(14.5 * var(--px));
  --ticket-form-cancel-label-start: calc(72.75 * var(--px));
  --ticket-form-cancel-label-shift: 50%;
  --ticket-form-cancel-label-top: calc(14.5 * var(--px));
  --ticket-form-field-radius: calc(9 * var(--px));
  --ticket-form-send-angle: 251.331deg;
  --ticket-form-send-from: 2.23%;
  --ticket-form-send-to: 97.86%;
  --ticket-form-button-radius: calc(15 * var(--px));
  /* option-list: Figma Web 1:132640 on #203 «گروه برگزارکننده» (#204 is the same): the list that a field with a choice opens, drawn alone. It hangs under its field, as wide as the field (521 on #85). A row is as high as the lines are apart and ends at its line; the panel keeps the room of the design above the first row and below the last one; the text is measured from its row. design/_tools/pages/tickets.py */
  --option-list-width: calc(521 * var(--px));
  --option-list-radius: calc(20 * var(--px));
  --option-list-row: calc(56 * var(--px));
  --option-list-pad-top: calc(7.43 * var(--px));
  --option-list-pad-bottom: calc(5.57 * var(--px));
  --option-list-text-start: calc(33 * var(--px));
  --option-list-text-top: calc(15.22 * var(--px));
  --option-list-line-start: calc(23.5 * var(--px));
  --option-list-line-width: calc(470.33 * var(--px));
  /* profile-organizer: Figma Web #212 «مدیریت آدرس ها – 1» (title, the list of the organizers 1:9896 in its window with the bar beside it, «با این مجموعه آشنایی دارید؟», two buttons); the window of the list, the cross and the picture from the export. Application 1:19935, where the same choice is a popup. Everything is measured from the box around all of it; a row of the desktop list from its window; what a row holds from the row. design/_tools/pages/preacher.py */
  --profile-organizer-confirm-label-start: calc(104.12 * var(--px));
  --profile-organizer-confirm-label-shift: 50%;
  --profile-organizer-confirm-label-top: calc(28.98 * var(--px));
  --profile-organizer-back-label-start: calc(60.92 * var(--px));
  --profile-organizer-back-label-shift: 0%;
  --profile-organizer-back-label-top: calc(28.98 * var(--px));
  --profile-organizer-ring: calc(3 * var(--px));
  --profile-organizer-dot-inset: calc(5.12 * var(--px));
  --profile-organizer-know-radius: calc(20 * var(--px));
  --profile-organizer-row: calc(135.25 * var(--px));
  --profile-organizer-thumb-radius: calc(12 * var(--px));
  --profile-organizer-thumb-angle: 188.314deg;
  --profile-organizer-thumb-travel: calc(294.61 * var(--px));
  /* follow-up: Figma Web #62 «پیگیری میزبان - مجالس جاری» and #60 «- سابقه مجالس»: the column beside the list (1:22236, 1:22271, 1:22303: the two tabs, the numbers under the open one, the large logo, «تماس با پشتیبانی»), measured from the frame below the header, and the distances of the list. design/_tools/pages/followup.py */
  --follow-up-gap: calc(37 * var(--px));
  --follow-up-stack-gap: calc(88 * var(--px));
  --follow-up-session-gap: calc(25 * var(--px));
  --follow-up-dash-above: calc(13 * var(--px));
  --follow-up-column-height: calc(928.06 * var(--px));
  --follow-up-footer-gap: calc(78 * var(--px));
  --follow-up-below: calc(30 * var(--px));
  --follow-up-tab-angle: 256.81deg;
  --follow-up-tab-radius: calc(15 * var(--px));
  --follow-up-support-radius: calc(15 * var(--px));
  --follow-up-count-dash: calc(4 * var(--px));
  /* ceremony-card: Figma Web: the cards of #62, #63, #60, #61 and #59 (1:22409 and the groups like it). One set of boxes per kind of card (current, current-multi, history, history-multi, session), each measured from its card; a box is the one most cards of the kind have. design/_tools/pages/followup.py */
  --ceremony-card-radius: calc(15 * var(--px));
  --ceremony-card-tile-radius: calc(22 * var(--px));
  --ceremony-card-stack-radius: calc(20 * var(--px));
  --ceremony-card-date-border: calc(2 * var(--px));
  --ceremony-card-pill-angle: 264.04deg;
  --ceremony-card-pill-narrow-angle: 260.19deg;
  --ceremony-card-sessions-angle: 249.07deg;
  --ceremony-card-action-angle: 250.77deg;
  --ceremony-card-action-from: 1.74%;
  --ceremony-card-action-to: 101.6%;
  --ceremony-card-action-border: calc(1 * var(--px));
  --ceremony-card-date-pitch: calc(29 * var(--px));
  --ceremony-card-steps-dash: calc(6 * var(--px));
  --ceremony-card-steps-dash-gap: calc(8 * var(--px));
  --ceremony-card-session-dash: calc(5 * var(--px));
  --ceremony-card-steps-faded: 0.3;
  --ceremony-card-pill-gap: calc(24 * var(--px));
  --ceremony-card-pill-padding: calc(20 * var(--px));
  /* offer-list: Figma Web #40 «پیگیری مبلغ - پیشنهادی» (1:23450), #54 «- جاری» and #56 «- سابقه»: the column beside the list (three tabs, the numbers under the open one, «فیلترها», the large logo, «تماس با پشتیبانی»), the panel «پذیرش مجالس» (1:24528) and the distances of the list, measured from the frame below the header; Application 1:10364, 1:15391, 1:16388: the strip of the tabs, the panel above the bottom bar and the end of the page. design/_tools/pages/offers.py */
  --offer-list-gap: calc(37 * var(--px));
  --offer-list-stack-gap: calc(88 * var(--px));
  --offer-list-first-session-gap: calc(37.58 * var(--px));
  --offer-list-session-gap: calc(25.57 * var(--px));
  --offer-list-after-sessions-gap: calc(37.36 * var(--px));
  --offer-list-session-start: calc(9 * var(--px));
  --offer-list-dash-above: calc(12.08 * var(--px));
  --offer-list-column-height: calc(928.06 * var(--px));
  --offer-list-footer-gap: calc(145 * var(--px));
  --offer-list-below: calc(28 * var(--px));
  --offer-list-current-below: calc(25 * var(--px));
  --offer-list-history-footer-gap: calc(169 * var(--px));
  --offer-list-history-below: calc(24 * var(--px));
  --offer-list-tab-angle: 256.81deg;
  --offer-list-tab-radius: calc(15 * var(--px));
  --offer-list-support-radius: calc(15 * var(--px));
  --offer-list-count-dash: calc(4 * var(--px));
  --offer-list-filters-radius: calc(15 * var(--px));
  --offer-list-panel-radius: calc(31 * var(--px));
  --offer-list-panel-button-radius: calc(15 * var(--px));
  --offer-list-panel-button-border: calc(2 * var(--px));
  --offer-list-panel-angle: 247.34deg;
  /* offer-card: Figma Web: the cards of #40 to #58 (1:24399 and the groups like it) with the boxes to tick beside them. One set of boxes per kind of card (proposed, current and history, each for one session and for several, and a session of an open ceremony), measured from the card; a box is the one most cards of the kind have. Application: the cards of 1:10364, 1:11513, 1:12662, 1:13812, 1:15391 and 1:16388. design/_tools/pages/offers.py */
  --offer-card-radius: calc(15 * var(--px));
  --offer-card-tag-radius: calc(10 * var(--px));
  --offer-card-tag-border: calc(1 * var(--px));
  --offer-card-button-radius: calc(10 * var(--px));
  --offer-card-button-angle: 180deg;
  --offer-card-stack-radius: calc(20 * var(--px));
  --offer-card-date-border: calc(2 * var(--px));
  --offer-card-date-pitch: calc(27 * var(--px));
  --offer-card-session-dash: calc(5 * var(--px));
  --offer-card-head-tint: 0.1;
  /* tick-box: Figma Web: the boxes to tick beside the cards of #40 to #58 (1:24296 large, 1:24305 small): how far the outline of an empty box reaches beyond the box (half its stroke). Application 1:10913, 1:10921, 1:13212, 1:12063, 1:11243: the same, and where a mark stands in its box. design/_tools/pages/offers.py */
  --tick-box-outline-large: calc(2 * var(--px));
  --tick-box-outline-small: calc(1 * var(--px));
  /* ceremony-details: Figma Web #111 to #141 «جزئیات مجالس پذیرش شده» (the preacher; 1:61628 and the frames like it) and #142 to #160 «جزئیات مجالس جاری» (the host; 1:78863): the strip under the header, the two columns and the buttons, measured from the frame below the header; a box is the one most artboards of the role have. Application 1:22386, 1:24679, 1:27270 and the eighteen frames like them: the strip, the four cards (a part is measured from its card or its row), the buttons and the end of the page. design/_tools/pages/details.py */
  --ceremony-details-host-footer-top: calc(974 * var(--px));
  --ceremony-details-host-below: calc(24 * var(--px));
  --ceremony-details-preacher-footer-top: calc(999 * var(--px));
  --ceremony-details-preacher-below: calc(31 * var(--px));
  --ceremony-details-radius: calc(15 * var(--px));
  --ceremony-details-border: calc(2 * var(--px));
  --ceremony-details-map-radius: calc(30 * var(--px));
  --ceremony-details-tag-radius: calc(10 * var(--px));
  --ceremony-details-tag-border: calc(1 * var(--px));
  --ceremony-details-tile-radius: calc(22 * var(--px));
  --ceremony-details-host-pill-angle: 264.04deg;
  --ceremony-details-preacher-pill-angle: 264.12deg;
  --ceremony-details-owner-angle: 262.61deg;
  --ceremony-details-accept-angle: 253.24deg;
  --ceremony-details-host-comment-angle: 245.29deg;
  --ceremony-details-host-again-angle: 251.35deg;
  --ceremony-details-preacher-comment-angle: 253deg;
  --ceremony-details-steps-dash: calc(6 * var(--px));
  --ceremony-details-steps-dash-gap: calc(8 * var(--px));
  --ceremony-details-strip-tint: 0.1;
  --ceremony-details-tile-tint: 0.5;
  --ceremony-details-tick-outline: calc(2 * var(--px));
  /* confirm-dialog: Figma Web #36 «پیغام عدم نمایش» (1:92356), #37 (1:97256), #38 (1:91358) and #39 (1:91397): a sheet with a question and two buttons under it, one set of boxes per question; the panel is measured from the artboard, the rest from the panel. Application 1:19442, 1:19488, 1:20347: the sheet holds its buttons. design/_tools/pages/dialogs.py */
  --confirm-dialog-radius: calc(30 * var(--px));
  --confirm-dialog-button-radius: calc(20 * var(--px));
  --confirm-dialog-button-border: calc(2 * var(--px));
  --confirm-dialog-text-pitch: calc(42 * var(--px));
  --confirm-dialog-note-pitch: calc(42 * var(--px));
  /* opinion-page: Figma Web #101 to #110 «ثبت نظر سامانه میزبان» (1:60702 and the frames like it) and #99, #100 «ثبت نظر سامانه مبلغ» (1:59731): the boxes of the two pages, measured from the frame below the header; a part of another part from that part. Application 1:22083 and the eight frames like it (the host) and 1:7488 (the preacher): a column of blocks, each part measured from its block. design/_tools/pages/opinion.py */
  --opinion-page-host-footer-top: calc(1519 * var(--px));
  --opinion-page-host-below: calc(22 * var(--px));
  --opinion-page-preacher-footer-top: calc(1219.01 * var(--px));
  --opinion-page-preacher-below: calc(30.99 * var(--px));
  --opinion-page-radius: calc(15 * var(--px));
  --opinion-page-border: calc(2 * var(--px));
  --opinion-page-panel-radius: calc(20 * var(--px));
  --opinion-page-panel-border: calc(2 * var(--px));
  --opinion-page-mark-radius: calc(22 * var(--px));
  --opinion-page-button-radius: calc(20 * var(--px));
  --opinion-page-option-pitch: calc(105.99 * var(--px));
  --opinion-page-row-pitch: calc(90.16 * var(--px));
  --opinion-page-row-radius: calc(20 * var(--px));
  --opinion-page-radio-border: calc(3 * var(--px));
  --opinion-page-radio-dot-inset: calc(5 * var(--px));
  --opinion-page-pill-angle: 260.05deg;
  --opinion-page-option-angle: 262.46deg;
  --opinion-page-next-angle: 247.34deg;
  /* star-rating: Figma Web 1:72459 (1:72518): five stars, of which a coloured part shows from the left as far as a rectangle reaches; the rectangle is larger than the row, carries the two colours and slides along the row (`cut-…`: its size and how far it starts above the stars). Application 1:22083 (1:22173). design/_tools/pages/opinion.py */
  --star-rating-star: calc(36.28 * var(--px));
  --star-rating-pitch: calc(46.65 * var(--px));
  --star-rating-sample: calc(208.23 * var(--px));
  --star-rating-angle: 253.32deg;
  --star-rating-cut-width: calc(242.13 * var(--px));
  --star-rating-cut-height: calc(72.57 * var(--px));
  --star-rating-cut-above: calc(22.61 * var(--px));
  /* admin-chat: Figma Web #35 «پیام به ادمین» (1:98550): the sheet is the panel the popup layer places, the rest is measured from it; a message from its bubble. Application 1:21216 (host) and 1:21320 (preacher), the same sheet in the colours of the role: the panel is the sheet with «بازگشت» under it. design/_tools/pages/chat.py */
  --admin-chat-radius: calc(30 * var(--px));
  --admin-chat-talk-radius: calc(20 * var(--px));
  --admin-chat-talk-border: calc(1 * var(--px));
  --admin-chat-field-radius: calc(20 * var(--px));
  --admin-chat-field-border: calc(1 * var(--px));
  --admin-chat-bubble-radius: calc(15 * var(--px));
  --admin-chat-first: calc(69 * var(--px));
  --admin-chat-gap: calc(15 * var(--px));
  --admin-chat-line: calc(30 * var(--px));
  --admin-chat-admin-text-start: calc(21 * var(--px));
  --admin-chat-admin-text-end: calc(34 * var(--px));
  --admin-chat-admin-text-top: calc(27 * var(--px));
  --admin-chat-admin-time-gap: calc(40 * var(--px));
  --admin-chat-admin-bottom: calc(20 * var(--px));
  --admin-chat-admin-photo-edge: calc(35.9 * var(--px));
  --admin-chat-admin-photo-gap: calc(10 * var(--px));
  --admin-chat-admin-photo-width: calc(72 * var(--px));
  --admin-chat-admin-photo-height: calc(71 * var(--px));
  --admin-chat-user-text-start: calc(19 * var(--px));
  --admin-chat-user-text-end: calc(14 * var(--px));
  --admin-chat-user-text-top: calc(17 * var(--px));
  --admin-chat-user-time-gap: calc(45 * var(--px));
  --admin-chat-user-bottom: calc(19 * var(--px));
  --admin-chat-user-photo-edge: calc(35.44 * var(--px));
  --admin-chat-user-photo-gap: calc(14 * var(--px));
  --admin-chat-user-photo-width: calc(72 * var(--px));
  --admin-chat-user-photo-height: calc(71 * var(--px));
  --admin-chat-user-time-end: calc(54.88 * var(--px));
  --admin-chat-time-height: calc(15 * var(--px));
  --admin-chat-ticks-end: calc(11.5 * var(--px));
  --admin-chat-ticks-bottom: calc(15.92 * var(--px));
  --admin-chat-ticks-width: calc(29.69 * var(--px));
  --admin-chat-ticks-height: calc(16.62 * var(--px));
  /* filter-sheet: Figma Web #187 to #196 «فیلتر»: the list (1:97782, #187; chosen rows #189, #191, #192, #196), a step of three choices (1:100144, #188; #190, #193) and the date (1:98262, #195). The three panels are what the popup layer places; the rest is measured from its panel, a part of a row from the row. design/_tools/pages/filters.py */
  --filter-sheet-radius: calc(30 * var(--px));
  --filter-sheet-row-radius: calc(20 * var(--px));
  --filter-sheet-row-border: calc(2 * var(--px));
  --filter-sheet-button-radius: calc(20 * var(--px));
  --filter-sheet-button-border: calc(2 * var(--px));
  --filter-sheet-confirm-angle: 244.83deg;
  --filter-sheet-show-angle: 254.29deg;
  --filter-sheet-ring: calc(3 * var(--px));
  --filter-sheet-ring-dot: calc(4.97 * var(--px));
  /* month-calendar: Figma Web #195 (1:98262): the month on the sheet of the date; Application 1:34254: the month in the card of the date. Measured from the box of the calendar (Group 398): a column is where most days stand, the rows one distance apart from the baselines of the days. The range of a phone is the one of the desktop at the size of the day of the phone (no frame draws one). design/_tools/pages/filters.py */
  --month-calendar-column-1: calc(28.16 * var(--px));
  --month-calendar-column-2: calc(100.27 * var(--px));
  --month-calendar-column-3: calc(178.82 * var(--px));
  --month-calendar-column-4: calc(263.08 * var(--px));
  --month-calendar-column-5: calc(352.28 * var(--px));
  --month-calendar-column-6: calc(444.47 * var(--px));
  --month-calendar-column-7: calc(524.75 * var(--px));
  --month-calendar-weekday-1: calc(33.45 * var(--px));
  --month-calendar-weekday-2: calc(101.4 * var(--px));
  --month-calendar-weekday-3: calc(180.94 * var(--px));
  --month-calendar-weekday-4: calc(263.66 * var(--px));
  --month-calendar-weekday-5: calc(354.59 * var(--px));
  --month-calendar-weekday-6: calc(447.51 * var(--px));
  --month-calendar-weekday-7: calc(524.93 * var(--px));
  --month-calendar-weekday-top: calc(89.37 * var(--px));
  --month-calendar-cell: calc(46.09 * var(--px));
  --month-calendar-first-row: calc(149.06 * var(--px));
  --month-calendar-row-pitch: calc(59.41 * var(--px));
  --month-calendar-baseline: calc(31.05 * var(--px));
  --month-calendar-chosen-shift: 0;
  --month-calendar-radius: calc(27 * var(--px));
  --month-calendar-inner-radius: calc(5 * var(--px));
  --month-calendar-tint: 0.15;
  /* request-page: Figma Web #86 «ثبت مجلس مرحله 1» (1:14868; #87 for someone else, 1:95223) and #88 «ثبت مجلس مرحله 2» (1:91893; the first row opened on #92, 1:96659; the organizer chosen on #93, 1:94289): measured from the frame below the header; the rows of the second step one distance apart, a part of a row from its row. Application 1:21424 (step 1), 1:21603, 1:21785 (step 2); the opened row of a phone from the parts of the frames. design/_tools/pages/request.py */
  --request-page-one-height: calc(999 * var(--px));
  --request-page-field-radius: calc(20 * var(--px));
  --request-page-field-border: calc(2 * var(--px));
  --request-page-button-radius: calc(20 * var(--px));
  --request-page-button-border: calc(2 * var(--px));
  --request-page-confirm-angle: 247.34deg;
  --request-page-two-height: calc(1451 * var(--px));
  --request-page-row-gap: calc(14.97 * var(--px));
  --request-page-row-height: calc(77.61 * var(--px));
  --request-page-notes-height: calc(331.61 * var(--px));
  --request-page-row-radius: calc(20 * var(--px));
  --request-page-ring: calc(3 * var(--px));
  --request-page-ring-dot: calc(4.98 * var(--px));
  --request-page-two-open-extra: calc(103 * var(--px));
  --request-page-open-field-radius: calc(15 * var(--px));
  --request-page-two-open-footer: calc(94 * var(--px));
  --request-page-below: calc(94 * var(--px));
  --request-page-progress-radius: calc(2.5 * var(--px));
  --request-page-two-date-pitch: calc(29 * var(--px));
  --request-page-step-gap: calc(14 * var(--px));
  /* request-date: Figma Web #64 «تاریخ تک جلسه» (1:99539), #70 «تاریخ چند جلسه آخرین – 1» (1:112251; the tab «چند روزه», the month and the hint of a range), #74 and #72 (the hints of the first and the last day): the panel the popup layer places is the two tabs, the sheet and the buttons under it. Application 1:31616; the tab «چند روزه» of a phone on the other half of the sheet (no frame draws it). design/_tools/pages/request_dialogs.py */
  --request-date-radius: calc(30 * var(--px));
  --request-date-tab-radius: calc(20 * var(--px));
  --request-date-tab-angle: 257.08deg;
  --request-date-button-radius: calc(20 * var(--px));
  --request-date-button-border: calc(2 * var(--px));
  --request-date-confirm-angle: 247.34deg;
  --request-date-hint-pitch: calc(36 * var(--px));
  /* request-time: Figma Web #65 «تاریخ تک جلسه – 1» (1:100398): the panel is the sheet and the buttons under it; a time is two columns, each a box with its value and the values before and after it. Application 1:20141. design/_tools/pages/request_dialogs.py */
  --request-time-radius: calc(30 * var(--px));
  --request-time-box-radius: calc(20 * var(--px));
  --request-time-box-border: calc(2 * var(--px));
  /* request-organizer: Figma Web #13 «انتخاب برگزار کننده میزبان» (1:101122; #17 is the same): the panel the popup layer places is the sheet and the buttons under it; the window of the list from the export, three organizers high; an organizer from the window, what it holds from its row; «به سیستم صوتی نیاز دارید؟» and its answers. Application 1:19834: the sheet and the organizers in a window three rows high; the question on a sheet of its own and the buttons where 1:19935 has them. design/_tools/pages/organizer.py */
  --request-organizer-row: calc(135.25 * var(--px));
  --request-organizer-ring: calc(3 * var(--px));
  --request-organizer-dot-inset: calc(5.12 * var(--px));
  --request-organizer-radius: calc(30 * var(--px));
  --request-organizer-button-radius: calc(20 * var(--px));
  --request-organizer-button-border: calc(2 * var(--px));
  --request-organizer-confirm-angle: 247.34deg;
  --request-organizer-thumb-radius: calc(12 * var(--px));
  --request-organizer-thumb-angle: 188.314deg;
  --request-organizer-thumb-travel: calc(294.61 * var(--px));
  /* organizer-intro: Figma Web #19 «انتخاب برگزار کننده میزبان – 6» (1:100982; #18 is the same in the colours of the preacher): the panel is the sheet and «بازگشت»; the window of the list from the export; an organizer from the window, what it holds from its part. A phone has no frame: the sheet, the cross, the mark and the box of 1:20682, the title of 1:19834; an organizer from the parts of a row of 1:19834. design/_tools/pages/organizer.py */
  --organizer-intro-entry: calc(256 * var(--px));
  --organizer-intro-description-pitch: calc(25 * var(--px));
  --organizer-intro-radius: calc(30 * var(--px));
  --organizer-intro-button-radius: calc(20 * var(--px));
  --organizer-intro-button-border: calc(2 * var(--px));
  --organizer-intro-thumb-radius: calc(12 * var(--px));
  --organizer-intro-thumb-angle: 188.314deg;
  --organizer-intro-thumb-travel: calc(447.77 * var(--px));
  /* terms-sheet: Figma Web #15 «انتخاب برگزار کننده میزبان – 2» (1:100686; #16 the same with the notes of the preacher): the panel is the sheet and «بازگشت»; the window of the text from the export. Application 1:20682: the sheet with the box the text scrolls in. design/_tools/pages/organizer.py */
  --terms-sheet-pitch: calc(30 * var(--px));
  --terms-sheet-radius: calc(30 * var(--px));
  --terms-sheet-button-radius: calc(20 * var(--px));
  --terms-sheet-button-border: calc(2 * var(--px));
  --terms-sheet-thumb-radius: calc(12 * var(--px));
  --terms-sheet-thumb-angle: 188.314deg;
  --terms-sheet-thumb-travel: calc(447.77 * var(--px));
  /* preacher-details: Figma Web #82 «تکمیل اطلاعات مبلغ – 5» (1:17269; step 1 with the header; #77 to #81 and #83 the same in other states) and #7 «اطلاعات تکمیلی – 1» (1:21457; step 5 with the header), #219 (1:18292), #224 (1:19500), #202 (1:20832): the head, the fields and the buttons measured from the frame below the header; the cards and lists of steps 3 and 4 one under the other, what they hold from them. Application 1:5331, 1:5781 and 1:7856, 1:6660, 1:8124, 1:8454: measured from the frame below the header; a part of a card from its card. design/_tools/pages/preacher_details.py */
  --preacher-details-one-height: calc(999 * var(--px));
  --preacher-details-footer-gap: calc(155.05 * var(--px));
  --preacher-details-watermark-opacity: 0.62;
  --preacher-details-field-radius: calc(20 * var(--px));
  --preacher-details-field-border: calc(2 * var(--px));
  --preacher-details-button-radius: calc(20 * var(--px));
  --preacher-details-button-border: calc(2 * var(--px));
  --preacher-details-confirm-angle: 247.34deg;
  --preacher-details-below: calc(29 * var(--px));
  --preacher-details-five-height: calc(1002 * var(--px));
  --preacher-details-notes-pitch: calc(23 * var(--px));
  --preacher-details-progress-1: calc(73.51 * var(--px));
  --preacher-details-progress-2: calc(142.51 * var(--px));
  --preacher-details-progress-3: calc(240.51 * var(--px));
  --preacher-details-progress-4: calc(325.51 * var(--px));
  --preacher-details-progress-5: calc(386.51 * var(--px));
  --preacher-details-two-height: calc(999 * var(--px));
  --preacher-details-rate-radius: calc(8 * var(--px));
  --preacher-details-three-cards-top: calc(289.58 * var(--px));
  --preacher-details-card-start: calc(447.37 * var(--px));
  --preacher-details-gap-card-card: calc(14.97 * var(--px));
  --preacher-details-gap-card-list: calc(34.2 * var(--px));
  --preacher-details-gap-list-list: calc(49.42 * var(--px));
  --preacher-details-gap-list-card: calc(45.22 * var(--px));
  --preacher-details-card-radius: calc(20 * var(--px));
  --preacher-details-ring: calc(3 * var(--px));
  --preacher-details-dot-inset: calc(5.12 * var(--px));
  --preacher-details-three-buttons-gap: calc(112.07 * var(--px));
  --preacher-details-three-footer-gap: calc(155.05 * var(--px));
  --preacher-details-three-min: calc(999 * var(--px));
  --preacher-details-four-cards-top: calc(226 * var(--px));
  --preacher-details-four-gap: calc(14.97 * var(--px));
  --preacher-details-four-buttons-gap: calc(116.88 * var(--px));
  --preacher-details-four-min: calc(1002 * var(--px));
  --preacher-details-buttons-height: calc(86.95 * var(--px));
  --preacher-details-step-gap: calc(14 * var(--px));
  /* birthday-sheet: Figma Web #69 «تاریخ تولد – 1» (1:99887; #68 the same empty): the panel is the sheet and the buttons under it; the day, the month and the year in their outlined boxes. Application 1:9096. design/_tools/pages/preacher_details.py */
  --birthday-sheet-radius: calc(30 * var(--px));
  --birthday-sheet-box-radius: calc(15 * var(--px));
  --birthday-sheet-box-border: calc(2 * var(--px));
  --birthday-sheet-button-radius: calc(20 * var(--px));
  --birthday-sheet-button-border: calc(2 * var(--px));
  /* map: No design: the map of Iran (decision 30.4, Release 2, R3) in the boxes the design gives the picture of a map. The pin of a map that only shows a place: MapView. */
  --map-pin-size: calc(48 * var(--px));
  /* manage: No design (owner, 2026-10-13 and 2026-10-19: the management pages are built from the look of the site). The frame of the management pages and its parts, in the flow of the page: ManageScaffold. Release 2, R1 (docs/DECISIONS.md, section 28). Release 2, R2: the file fields (the box of Dropify), the thumbnails of the lists and the text of a piece of the media pages. */
  --manage-max-width: calc(1680 * var(--px));
  --manage-nav-width: calc(300 * var(--px));
  --manage-gap: calc(32 * var(--px));
  --manage-padding-top: calc(40 * var(--px));
  --manage-padding-inline: calc(48 * var(--px));
  --manage-padding-bottom: calc(80 * var(--px));
  --manage-nav-top: calc(24 * var(--px));
  --manage-nav-padding: calc(24 * var(--px));
  --manage-nav-title-gap: calc(16 * var(--px));
  --manage-nav-gap: calc(6 * var(--px));
  --manage-link-padding-block: calc(12 * var(--px));
  --manage-link-padding-inline: calc(16 * var(--px));
  --manage-content-gap: calc(24 * var(--px));
  --manage-heading-gap: calc(16 * var(--px));
  --manage-actions-gap: calc(12 * var(--px));
  --manage-card-padding: calc(28 * var(--px));
  --manage-card-gap: calc(16 * var(--px));
  --manage-filter-gap: calc(12 * var(--px));
  --manage-field-gap: calc(6 * var(--px));
  --manage-field-min: calc(220 * var(--px));
  --manage-group-mark: calc(16 * var(--px));
  --manage-address-map-width: calc(220 * var(--px));
  --manage-address-map-height: calc(140 * var(--px));
  --manage-field-grow: calc(320 * var(--px));
  --manage-input-height: calc(52 * var(--px));
  --manage-input-padding: calc(16 * var(--px));
  --manage-textarea-min: calc(96 * var(--px));
  --manage-textarea-padding: calc(12 * var(--px));
  --manage-button-height: calc(52 * var(--px));
  --manage-button-padding: calc(24 * var(--px));
  --manage-buttons-gap: calc(12 * var(--px));
  --manage-chip-gap: calc(6 * var(--px));
  --manage-chip-padding-block: calc(4 * var(--px));
  --manage-chip-padding-inline: calc(12 * var(--px));
  --manage-cell-padding: calc(12 * var(--px));
  --manage-cell-padding-block: calc(14 * var(--px));
  --manage-empty-padding: calc(32 * var(--px));
  --manage-pager-gap: calc(12 * var(--px));
  --manage-check-min: calc(300 * var(--px));
  --manage-check-row-gap: calc(10 * var(--px));
  --manage-check-column-gap: calc(24 * var(--px));
  --manage-check-gap: calc(10 * var(--px));
  --manage-check-box: calc(22 * var(--px));
  --manage-fact-min: calc(260 * var(--px));
  --manage-fact-row-gap: calc(14 * var(--px));
  --manage-fact-column-gap: calc(24 * var(--px));
  --manage-fact-gap: calc(4 * var(--px));
  --manage-secret-padding-block: calc(12 * var(--px));
  --manage-secret-padding-inline: calc(16 * var(--px));
  --manage-row-gap: calc(4 * var(--px));
  --manage-row-padding: calc(10 * var(--px));
  --manage-cell-label: calc(96 * var(--px));
  --manage-cell-label-gap: calc(8 * var(--px));
  --manage-file-player: calc(480 * var(--px));
  --manage-thumb: calc(64 * var(--px));
  --manage-text-min: calc(320 * var(--px));
  --manage-drop-height: calc(200 * var(--px));
  --manage-picture: calc(96 * var(--px));
  /* edit-pencil: No design (owner, 2026-10-19: a pencil beside what an account with the permission may edit, which leads to its editor, so the site needs fewer menus). Release 2, R2: EditPencil, on the cards, the rows, the people, the occasions and the pages of the pieces. */
  --edit-pencil-size: calc(40 * var(--px));
  --edit-pencil-icon: calc(22 * var(--px));
  --edit-pencil-gap: calc(12 * var(--px));
  --edit-pencil-inset: calc(12 * var(--px));
  /* site-editor: No design (owner, 2026-10-20: a pencil beside each part of the site opens its editor on the spot). Release 2, R2: SiteEditor, a panel over the page in the look of the management pages. */
  --site-editor-width: calc(880 * var(--px));
  --site-editor-top: calc(80 * var(--px));
  --site-editor-padding: calc(32 * var(--px));
  --site-editor-gap: calc(18 * var(--px));
  --site-editor-field-gap: calc(6 * var(--px));
  --site-editor-input-height: calc(48 * var(--px));
  --site-editor-input-padding: calc(14 * var(--px));
  --site-editor-textarea-min: calc(120 * var(--px));
  --site-editor-button-height: calc(48 * var(--px));
  --site-editor-button-padding: calc(22 * var(--px));
  --site-editor-row-gap: calc(12 * var(--px));
  /* notifications-page: No design (R4, DECISIONS 31): the list of a person's notifications at /host/notifications and /preacher/notifications, in the look of the cards of the profile; NotificationsPage. */
  --notifications-page-width: calc(880 * var(--px));
  --notifications-page-top: calc(40 * var(--px));
  --notifications-page-bottom: calc(80 * var(--px));
  --notifications-page-gap: calc(16 * var(--px));
  --notifications-page-head-gap: calc(12 * var(--px));
  --notifications-page-item-padding: calc(22 * var(--px));
  --notifications-page-item-radius: calc(20 * var(--px));
  --notifications-page-item-gap: calc(6 * var(--px));
  --notifications-page-dot: calc(10 * var(--px));
  --notifications-page-button-height: calc(44 * var(--px));
  --notifications-page-button-padding: calc(20 * var(--px));
  --notifications-page-button-radius: calc(12 * var(--px));
  /* push-prompt: No design (owner, 2026-10-25: ask the person for the notifications of the browser): PushPrompt, a strip in the flow of a page with its buttons, in the look of NoticeBar. */
  --push-prompt-width: calc(1200 * var(--px));
  --push-prompt-top: calc(24 * var(--px));
  --push-prompt-padding-block: calc(14 * var(--px));
  --push-prompt-padding-inline: calc(22 * var(--px));
  --push-prompt-gap: calc(12 * var(--px));
  --push-prompt-radius: calc(15 * var(--px));
  --push-prompt-border: calc(1 * var(--px));
  --push-prompt-button-height: calc(40 * var(--px));
  --push-prompt-button-padding: calc(18 * var(--px));
  --push-prompt-button-radius: calc(10 * var(--px));
  /* notice-bar: No design. Release 2, R3: NoticeBar, a line above a page in the flow of the page: what the staff asked of a request to become a preacher, or why «تایید نهایی» was refused. */
  --notice-bar-width: calc(1200 * var(--px));
  --notice-bar-top: calc(24 * var(--px));
  --notice-bar-padding-block: calc(14 * var(--px));
  --notice-bar-padding-inline: calc(22 * var(--px));
  --notice-bar-radius: calc(15 * var(--px));
  --notice-bar-border: calc(1 * var(--px));
  /* preacher-request-card: No design (owner, 2026-10-24: a card on the host's profile that shows where the request to become a preacher stands). Release 2, R3: PreacherRequestCard, in the flow under the profile, in the look of the profile cards. */
  --preacher-request-card-width: calc(1200 * var(--px));
  --preacher-request-card-top: calc(32 * var(--px));
  --preacher-request-card-padding: calc(28 * var(--px));
  --preacher-request-card-gap: calc(12 * var(--px));
  --preacher-request-card-radius: calc(30 * var(--px));
  --preacher-request-card-button-height: calc(52 * var(--px));
  --preacher-request-card-button-padding: calc(28 * var(--px));
  --preacher-request-card-button-radius: calc(15 * var(--px));
  /* choice-sheet: No design. Release 2, R3: ChoiceSheet, a choice over the page (the reason of a cancellation, an acceptance on a condition, whether a ceremony was held). */
  --choice-sheet-width: calc(560 * var(--px));
  --choice-sheet-top: calc(140 * var(--px));
  --choice-sheet-padding: calc(32 * var(--px));
  --choice-sheet-gap: calc(18 * var(--px));
  --choice-sheet-option-gap: calc(12 * var(--px));
  --choice-sheet-option-padding: calc(14 * var(--px));
  --choice-sheet-field-gap: calc(8 * var(--px));
  --choice-sheet-textarea-min: calc(110 * var(--px));
  --choice-sheet-button-height: calc(52 * var(--px));
  --choice-sheet-button-padding: calc(28 * var(--px));
  /* site-loader: No design (owner, 2026-10-26: a loading with the logo of روضه خونگی for the change of pages and the waits, in the colours of the site; the same day: no words, only the turning line round the disc): wwwroot/css/loader.css, used by Loading, PageLoader and the start of the site (index.html). */
  --site-loader-badge: calc(112 * var(--px));
  --site-loader-ring: calc(5 * var(--px));
  --site-loader-logo-width: calc(50 * var(--px));
  --site-loader-logo-height: calc(66 * var(--px));
  --site-loader-gap: calc(16 * var(--px));
  --site-loader-padding: calc(48 * var(--px));
  --site-loader-small-badge: calc(60 * var(--px));
  --site-loader-small-ring: calc(3 * var(--px));
  --site-loader-small-logo-width: calc(27 * var(--px));
  --site-loader-small-logo-height: calc(36 * var(--px));
  --site-loader-bar: calc(4 * var(--px));
  --site-loader-float-top: calc(220 * var(--px));
  /* date-field: No design (owner, 2026-10-26: the date boxes of the browser showed mm/dd/yyyy): PersianDateField, a day of the Persian calendar in the forms of the management, and TimeSelect beside it. */
  --date-field-min-width: calc(200 * var(--px));
  --date-field-gap: calc(10 * var(--px));
  --date-field-icon: calc(20 * var(--px));
  --date-field-panel-width: calc(330 * var(--px));
  --date-field-panel-offset: calc(6 * var(--px));
  --date-field-panel-padding: calc(16 * var(--px));
  --date-field-panel-radius: calc(18 * var(--px));
  --date-field-head-gap: calc(8 * var(--px));
  --date-field-turn: calc(34 * var(--px));
  --date-field-arrow: calc(12 * var(--px));
  --date-field-day: calc(40 * var(--px));
  --date-field-day-gap: calc(2 * var(--px));
  --date-field-day-radius: calc(12 * var(--px));
  --date-field-ring: calc(2 * var(--px));
  --date-field-foot-gap: calc(16 * var(--px));
  /* film-player: No design for its controls (owner, 2026-10-26: the player of the desktop like the one of the phone, 1:20449 in 1:20386, with a working «تمام صفحه»): FilmPlayer on the page of a film (#173, #180, #182), in the place of box-media-item-video. */
  --film-player-shade: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.82) 100%);
  --film-player-padding-inline: calc(36 * var(--px));
  --film-player-padding-bottom: calc(24 * var(--px));
  --film-player-gap: calc(12 * var(--px));
  --film-player-line: calc(4 * var(--px));
  --film-player-line-hit: calc(20 * var(--px));
  --film-player-knob: calc(16 * var(--px));
  --film-player-big-play: calc(96 * var(--px));
  --film-player-big-play-icon: calc(34 * var(--px));
  --film-player-button: calc(46 * var(--px));
  --film-player-icon: calc(24 * var(--px));
  --film-player-play: calc(58 * var(--px));
  --film-player-play-icon: calc(30 * var(--px));
  --film-player-seek-icon: calc(32 * var(--px));
  --film-player-buttons-gap: calc(30 * var(--px));
  --film-player-button-hover: rgba(255, 255, 255, 0.14);
  /* ticket-thread: No design (R5, DECISIONS 33): TicketThread, the conversation of a ticket with its files and the field to write in, on the page of a ticket of the profile and of the panel. */
  --ticket-thread-gap: calc(14 * var(--px));
  --ticket-thread-list-padding: calc(18 * var(--px));
  --ticket-thread-bubble-padding-block: calc(12 * var(--px));
  --ticket-thread-bubble-padding-inline: calc(18 * var(--px));
  --ticket-thread-bubble-radius: calc(18 * var(--px));
  --ticket-thread-bubble-max: 78%;
  --ticket-thread-meta-gap: calc(6 * var(--px));
  --ticket-thread-files-gap: calc(8 * var(--px));
  --ticket-thread-thumb: calc(132 * var(--px));
  --ticket-thread-file-height: calc(44 * var(--px));
  --ticket-thread-file-padding: calc(14 * var(--px));
  --ticket-thread-file-radius: calc(12 * var(--px));
  --ticket-thread-file-icon: calc(20 * var(--px));
  --ticket-thread-composer-gap: calc(10 * var(--px));
  --ticket-thread-composer-padding: calc(12 * var(--px));
  --ticket-thread-composer-radius: calc(16 * var(--px));
  --ticket-thread-field-min: calc(84 * var(--px));
  --ticket-thread-button-height: calc(46 * var(--px));
  --ticket-thread-button-padding: calc(24 * var(--px));
  --ticket-thread-button-radius: calc(12 * var(--px));
  --ticket-thread-attach-icon: calc(20 * var(--px));
  --ticket-thread-pending-height: calc(34 * var(--px));
  --ticket-thread-pending-padding: calc(12 * var(--px));
  --ticket-thread-empty-padding: calc(40 * var(--px));
  --ticket-thread-border: calc(1 * var(--px));
  /* ticket-page: No design (R5, DECISIONS 33): ProfileTicketPage, one ticket in the card of the tickets of the profile (#84, #216), and the pager of the list. */
  --ticket-page-padding: calc(34 * var(--px));
  --ticket-page-gap: calc(14 * var(--px));
  --ticket-page-head-gap: calc(10 * var(--px));
  --ticket-page-chip-height: calc(30 * var(--px));
  --ticket-page-chip-padding: calc(12 * var(--px));
  --ticket-page-chip-radius: calc(15 * var(--px));
  --ticket-page-pager-top: calc(884 * var(--px));
  --ticket-page-pager-height: calc(36 * var(--px));
  --ticket-page-pager-gap: calc(16 * var(--px));
  --ticket-page-pager-padding: calc(18 * var(--px));
  --ticket-page-pager-radius: calc(10 * var(--px));
  --ticket-page-empty-top: calc(290 * var(--px));
  --ticket-page-top: calc(100 * var(--px));
  --ticket-page-panel-thread-height: calc(600 * var(--px));
  /* donation-pay: No design (R5, DECISIONS 33): the line under the button of «اهداء نذورات» (#226-228; 1:19592) that says why a payment could not start. */
  --donation-pay-problem-start: calc(59.36 * var(--px));
  --donation-pay-problem-top: calc(703 * var(--px));
  --donation-pay-problem-width: calc(569.56 * var(--px));
  /* donation-result: No design (R5, DECISIONS 33): DonationResultPage, where the gateway sends the person back (/donation/{id}), in the look of the cards of the profile. */
  --donation-result-width: calc(640 * var(--px));
  --donation-result-top: calc(60 * var(--px));
  --donation-result-bottom: calc(80 * var(--px));
  --donation-result-padding: calc(36 * var(--px));
  --donation-result-gap: calc(16 * var(--px));
  --donation-result-radius: calc(20 * var(--px));
  --donation-result-mark: calc(76 * var(--px));
  --donation-result-mark-icon: calc(36 * var(--px));
  --donation-result-fact-gap: calc(10 * var(--px));
  --donation-result-button-height: calc(50 * var(--px));
  --donation-result-button-padding: calc(26 * var(--px));
  --donation-result-button-radius: calc(12 * var(--px));
  /* form-field: No design: one family for every field of the site and of the panel (owner, 2026-10-28: «input های text موقع نوشتن نارنجی میشن ... بقیه input ها هم یک شکل نیستند»). The radius and the outline of the fields of the design (#27, #85); the focus in the colour of the role, never the accent of the computer; one chevron for every select. wwwroot/css/fields.css. */
  --form-field-radius: calc(15 * var(--px));
  --form-field-border: calc(1 * var(--px));
  --form-field-focus-border: calc(1.5 * var(--px));
  --form-field-ring: calc(4 * var(--px));
  --form-field-ring-host: rgba(28, 179, 118, 0.2);
  --form-field-ring-preacher: rgba(28, 154, 179, 0.2);
  --form-field-ring-invalid: rgba(226, 27, 27, 0.18);
  --form-field-chevron: url("/assets/icons/select-chevron.svg");
  --form-field-chevron-size: calc(12 * var(--px));
  --form-field-chevron-inset: calc(14 * var(--px));
  --form-field-chevron-space: calc(36 * var(--px));
  --form-field-autofill: calc(1000 * var(--px));
  /* chart: No design: the charts of the panel, finer than Final.pdf and in the look of the site (owner, 2026-11-01; DECISIONS 42). Seven series, checked with the validator of the dataviz skill; every value is also written beside its mark */
  --chart-series-1-from: #46c993;
  --chart-series-1-to: #1a9e68;
  --chart-series-2-from: #6cabf0;
  --chart-series-2-to: #2a78d6;
  --chart-series-3-from: #f59a6c;
  --chart-series-3-to: #eb6834;
  --chart-series-4-from: #f8cb62;
  --chart-series-4-to: #eda100;
  --chart-series-5-from: #f4a9c5;
  --chart-series-5-to: #e87ba4;
  --chart-series-6-from: #9585ea;
  --chart-series-6-to: #6250d6;
  --chart-series-7-from: #f0837f;
  --chart-series-7-to: #e34948;
  --chart-track: #eef2f0;
  --chart-grid: #edf0ee;
  --chart-glow: rgba(28, 179, 118, 0.1);
  --chart-hero-light: rgba(255, 255, 255, 0.16);
  --chart-card-min: calc(400 * var(--px));
  --chart-gap: calc(20 * var(--px));
  --chart-head-gap: calc(14 * var(--px));
  --chart-icon-box: calc(46 * var(--px));
  --chart-icon: calc(24 * var(--px));
  --chart-ring: calc(168 * var(--px));
  --chart-ring-gap: calc(26 * var(--px));
  --chart-legend-gap: calc(12 * var(--px));
  --chart-legend-row: calc(34 * var(--px));
  --chart-swatch: calc(12 * var(--px));
  --chart-bar: calc(14 * var(--px));
  --chart-bar-row-gap: calc(16 * var(--px));
  --chart-plot-height: calc(300 * var(--px));
  --chart-plot-min-width: calc(680 * var(--px));
  --chart-column-gap: calc(5 * var(--px));
  --chart-column-bar: calc(24 * var(--px));
  --chart-dot: calc(11 * var(--px));
  --chart-tooltip: calc(190 * var(--px));
  --chart-label-height: calc(34 * var(--px));
  --chart-tick-width: calc(34 * var(--px));
  /* select-list: No design: the one list of the site, in the look of option-list (owner, 2026-10-30; DECISIONS 41) */
  --select-list-gap: calc(6 * var(--px));
  --select-list-max-height: calc(420 * var(--px));
  /* choice-ring: One radio for the whole site (owner, 2026-10-28: «بعضی ها بیضی شدن بعضیا مرکز دایره نیستن»; 2026-10-30: «رادیو باتن های سامانه ... همشون رو درست کن»). The desktop frames agree (#13, #24, #99, #212, the filters and the request: a circle of 30 with a ring of 3 and the dot 5.12 inside its edge); the phone frames drew 12.68 to 13.85 with rings of 1 or 2 and dots 2.66 to 3.41 inside (the request had no dot of its own and took the desktop's, a dot of 2.7). Every radio has the ring of #24 and of its phone frame 1:20060. ChoiceRing; DECISIONS 36.6. */
  --choice-ring-size: calc(30 * var(--px));
  --choice-ring-border: calc(3 * var(--px));
  --choice-ring-dot: calc(5.12 * var(--px));
  /* tick-mark: One box to tick for the whole site (owner, 2026-10-30: like elements have one look; DECISIONS 36.8). The frames drew the box of a form 32.6 (the request, the details, the filters) and the box of a place in an offer 36.42; the box of a whole ceremony 48.67 in the lists and 58.38 on its page; on a phone 20.4, 19.61 and 27.84. Ticked, the box is filled with the colours of the role and carries a white tick (#40 to #58), everywhere. The rounded square of the drawings is drawn by CSS (its corners are 32 % of its side). TickMark; TickBox places it in its button. */
  --tick-mark-size: calc(32.6 * var(--px));
  --tick-mark-large: calc(48.67 * var(--px));
  --tick-mark-border: calc(2 * var(--px));
  --tick-mark-radius: 32%;
  --tick-mark-mark: 58%;
  /* heading-dot: One dot before a heading (owner, 2026-10-30: like elements have one look; DECISIONS 36.9). The frames drew it 15.6 before the headings of the pages and 10.91 before those of the sheets; on a phone 7 × 5, 7 × 8, 7 × 7, 7.74 and 8. It is the dot of the pages, and 8 on a phone. StatusDot (Heading). */
  --heading-dot-size: calc(15.6 * var(--px));
  /* site-button: One button for the whole site (owner, 2026-10-30: like elements have one look; DECISIONS 36.10). The frames drew the buttons of the forms and the sheets 86.95 high on the desktop (52 of them) and from 46.97 to 47.44 on a phone, with corners of 8 to 30 and the label placed from its start; the buttons inside a card 51.71 and 32.91. The normal button is the one of the forms (#226: AppButton), the small one the one of the cards (#111); the label stands in the middle. Filled in the colours of the role (primary), outlined (secondary), red (danger), grey while it waits (inactive). wwwroot/css/buttons.css. */
  --site-button-height: calc(86.95 * var(--px));
  --site-button-small-height: calc(51.71 * var(--px));
  --site-button-radius: calc(20 * var(--px));
  --site-button-small-radius: calc(15 * var(--px));
  --site-button-border: calc(2 * var(--px));
  --site-button-padding: calc(28 * var(--px));
  --site-button-angle: 247.337deg;
  --site-button-small-padding: calc(10 * var(--px));
  /* choice-word: The word of a choice (owner, 2026-10-30: like elements have one look; DECISIONS 36.11). The frames placed every word in a box of its own, 6 to 28 from its box on a phone and up to 2 off its middle; the word now stands one gap after its box (tick-mark, choice-ring), in the middle of its height, in the type most of them had (17 medium; 10 regular on a phone). wwwroot/css/choices.css. */
  --choice-word-gap: calc(12 * var(--px));
  /* error-page: No design (owner, 2026-10-28: «صفحه های ارور http»; DECISIONS 36.13): the pages of errors, made of the tokens of the site in the flow of the page. ErrorPage; docker/nginx/errors/50x.html. */
  --error-page-width: calc(720 * var(--px));
  --error-page-gap: calc(20 * var(--px));
  --error-page-padding-top: calc(120 * var(--px));
  --error-page-padding-inline: calc(32 * var(--px));
  --error-page-padding-bottom: calc(160 * var(--px));
  --error-page-code: calc(160 * var(--px));
  --error-page-button: calc(208 * var(--px));
  /* rich-text: No design: the text of the editor of posts and pages (owner, 2026-10-28 and 2026-10-30; Final.pdf P57, P58; DECISIONS 37). wwwroot/css/rich-text.css. */
  --rich-text-block-gap: calc(16 * var(--px));
  --rich-text-indent: calc(32 * var(--px));
  --rich-text-cell: calc(10 * var(--px));
  --rich-text-editor-height: calc(320 * var(--px));
  /* stat-tile: No design: the pages of the sessions of the panel, finer than Final.pdf P3 to P19 in the look of the site (DECISIONS 43). The figures over a page. */
  --stat-tile-min: calc(210 * var(--px));
  --stat-tile-padding: calc(18 * var(--px));
  --stat-tile-gap: calc(14 * var(--px));
  --stat-tile-mark: calc(52 * var(--px));
  /* session: No design: the pages of the sessions of the panel, finer than Final.pdf P3 to P19 in the look of the site (DECISIONS 43). The card of a ceremony and the people of «ارسال به». */
  --session-card-min: calc(470 * var(--px));
  --session-gap: calc(14 * var(--px));
  --session-padding: calc(24 * var(--px));
  --session-line-gap: calc(10 * var(--px));
  --session-line-mark: calc(20 * var(--px));
  --session-person-gap: calc(6 * var(--px));
  --session-person-padding: calc(10 * var(--px));
  --session-avatar: calc(44 * var(--px));
  --session-column-min: calc(400 * var(--px));
  --session-column-height: calc(420 * var(--px));
  /* manage-popup: No design: the pages of the sessions of the panel, finer than Final.pdf P3 to P19 in the look of the site (DECISIONS 43). The white sheet of a popup of the panel. */
  --manage-popup-width: calc(820 * var(--px));
  --manage-popup-wide: calc(1120 * var(--px));
  --manage-popup-margin: calc(48 * var(--px));
  --manage-popup-padding: calc(28 * var(--px));
  --manage-popup-gap: calc(16 * var(--px));
  --manage-popup-close: calc(40 * var(--px));
  /* report: No design: the column filters of the grids of the reports, Final.pdf P64 in the look of the site (DECISIONS 49). */
  --report-filter-min: calc(110 * var(--px));
  --report-filter-height: calc(40 * var(--px));
}

.px-real {
  --px: 1px;
  --radius-lg: calc(15 * var(--px));
  --radius-xl: calc(20 * var(--px));
  --radius-md: calc(10 * var(--px));
  --radius-2xl: calc(35 * var(--px));
  --radius-sm: calc(9 * var(--px));
  --radius-xs: calc(5 * var(--px));
  --radius-3_073: calc(3.073 * var(--px));
  --radius-30: calc(30 * var(--px));
  --radius-22: calc(22 * var(--px));
  --radius-25: calc(25 * var(--px));
  --radius-22_026: calc(22.026 * var(--px));
  --radius-6_293: calc(6.293 * var(--px));
  --radius-16: calc(16 * var(--px));
  --radius-29_306: calc(29.306 * var(--px));
  --radius-31: calc(31 * var(--px));
  --radius-8: calc(8 * var(--px));
  --radius-16_514: calc(16.514 * var(--px));
  --radius-7: calc(7 * var(--px));
  --radius-23_045: calc(23.045 * var(--px));
  --shadow-lg-gray-89: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) rgba(227, 227, 227, 0.431);
  --shadow-md-gray-87: 0 calc(3 * var(--px)) calc(16 * var(--px)) rgba(221, 221, 221, 0.302);
  --shadow-sm: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(0, 0, 0, 0.161);
  --shadow-md-primary: calc(-4 * var(--px)) calc(5 * var(--px)) calc(15 * var(--px)) rgba(28, 179, 118, 0.412);
  --shadow-sm-2: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(0, 0, 0, 0.078);
  --shadow-md-green-3: 0 calc(3 * var(--px)) calc(16 * var(--px)) rgba(27, 182, 22, 0.502);
  --shadow-lg-green-4: 0 calc(13 * var(--px)) calc(26 * var(--px)) rgba(37, 179, 101, 0.6);
  --shadow-lg-gray-88: calc(-4 * var(--px)) calc(5 * var(--px)) calc(25 * var(--px)) #e0e0e0;
  --shadow-lg-teal-2: 0 calc(13 * var(--px)) calc(26 * var(--px)) rgba(37, 179, 170, 0.6);
  --shadow-md-gray-60: 0 calc(10 * var(--px)) calc(15 * var(--px)) rgba(152, 152, 152, 0.502);
  --shadow-lg-gray-81: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) #cfcfcf;
  --shadow-lg-gray-45: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) rgba(115, 115, 115, 0.451);
  --shadow-md: calc(3 * var(--px)) calc(3 * var(--px)) calc(10 * var(--px)) rgba(0, 0, 0, 0.102);
  --shadow-md-green-6: 0 calc(10 * var(--px)) calc(15 * var(--px)) rgba(8, 99, 11, 0.541);
  --shadow-lg-gray-27: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) rgba(70, 70, 70, 0.431);
  --shadow-lg-teal-3: 0 calc(13 * var(--px)) calc(26 * var(--px)) rgba(58, 179, 171, 0.357);
  --shadow-sm-3: 0 calc(6 * var(--px)) calc(6 * var(--px)) rgba(0, 0, 0, 0.102);
  --shadow-sm-yellow-2: 0 calc(3 * var(--px)) calc(6 * var(--px)) #ffde00;
  --shadow-lg-teal-3-2: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) rgba(58, 179, 171, 0.361);
  --shadow-md-2: 0 calc(10 * var(--px)) calc(16 * var(--px)) rgba(0, 0, 0, 0.161);
  --shadow-sm-4: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(0, 0, 0, 0.071);
  --shadow-md-3: 0 0 calc(16 * var(--px)) #000000;
  --shadow-lg-gray-73: calc(-4 * var(--px)) calc(10 * var(--px)) calc(25 * var(--px)) rgba(185, 185, 185, 0.529);
  --shadow-md-gray-60-2: calc(-10 * var(--px)) calc(10 * var(--px)) calc(15 * var(--px)) rgba(152, 152, 152, 0.502);
  --shadow-md-primary-2: 0 calc(3 * var(--px)) calc(16 * var(--px)) rgba(28, 179, 118, 0.431);
  --shadow-lg-gray-45-2: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) rgba(115, 115, 115, 0.251);
  --shadow-md-primary-3: 0 calc(3 * var(--px)) calc(12 * var(--px)) rgba(28, 179, 118, 0.529);
  --shadow-sm-primary: 0 calc(3 * var(--px)) calc(6 * var(--px)) #1cb376;
  --shadow-sm-primary-2: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(28, 179, 118, 0.49);
  --shadow-sm-danger: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(220, 43, 72, 0.522);
  --shadow-sm-orange: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(255, 153, 0, 0.49);
  --shadow-sm-5: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(0, 0, 0, 0.051);
  --shadow-lg: 0 calc(8 * var(--px)) calc(26 * var(--px)) rgba(0, 0, 0, 0.11);
  --shadow-sm-red: 0 calc(3 * var(--px)) calc(6 * var(--px)) #e21b1b;
  --shadow-lg-green-7: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) rgba(58, 179, 64, 0.361);
  --shadow-lg-green-8: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) rgba(58, 179, 143, 0.361);
  --shadow-md-gray-88: calc(-4 * var(--px)) calc(6 * var(--px)) calc(15 * var(--px)) rgba(224, 224, 224, 0.6);
  --shadow-sm-6: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(0, 0, 0, 0.31);
  --shadow-md-primary-4: calc(6 * var(--px)) 0 calc(9 * var(--px)) rgba(28, 179, 118, 0.278);
  --shadow-sm-green-5: 0 calc(3 * var(--px)) calc(6 * var(--px)) #63b31c;
  --shadow-sm-yellow: 0 calc(3 * var(--px)) calc(6 * var(--px)) #b3ae1c;
  --shadow-sm-primary-3: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(28, 179, 118, 0.502);
  --shadow-sm-yellow-2-2: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(255, 222, 0, 0.549);
  --shadow-sm-orange-2: 0 calc(3 * var(--px)) calc(6 * var(--px)) rgba(255, 153, 0, 0.549);
  --shadow-md-4: calc(4 * var(--px)) calc(3 * var(--px)) calc(16 * var(--px)) rgba(0, 0, 0, 0.11);
  --shadow-lg-gray-27-2: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) rgba(70, 70, 70, 0.188);
  --shadow-md-teal-2: 0 calc(3 * var(--px)) calc(16 * var(--px)) rgba(37, 179, 170, 0.6);
  --shadow-md-5: 0 calc(10 * var(--px)) calc(15 * var(--px)) rgba(0, 0, 0, 0.078);
  --border-1: calc(1 * var(--px));
  --border-2: calc(2 * var(--px));
  --border-5: calc(5 * var(--px));
  --border-3: calc(3 * var(--px));
  --font-size-6: calc(6 * var(--px));
  --font-size-7: calc(7 * var(--px));
  --font-size-8: calc(8 * var(--px));
  --font-size-9: calc(9 * var(--px));
  --font-size-10: calc(10 * var(--px));
  --font-size-11: calc(11 * var(--px));
  --font-size-12: calc(12 * var(--px));
  --font-size-13: calc(13 * var(--px));
  --font-size-14: calc(14 * var(--px));
  --font-size-15: calc(15 * var(--px));
  --font-size-16: calc(16 * var(--px));
  --font-size-17: calc(17 * var(--px));
  --font-size-18: calc(18 * var(--px));
  --font-size-19: calc(19 * var(--px));
  --font-size-20: calc(20 * var(--px));
  --font-size-21: calc(21 * var(--px));
  --font-size-22: calc(22 * var(--px));
  --font-size-23: calc(23 * var(--px));
  --font-size-24: calc(24 * var(--px));
  --font-size-25: calc(25 * var(--px));
  --font-size-26: calc(26 * var(--px));
  --font-size-28: calc(28 * var(--px));
  --font-size-30: calc(30 * var(--px));
  --font-size-31: calc(31 * var(--px));
  --font-size-33: calc(33 * var(--px));
  --font-size-35: calc(35 * var(--px));
  --font-size-40: calc(40 * var(--px));
  --font-size-45: calc(45 * var(--px));
  --text-20-medium: 500 var(--font-size-20) / var(--line-height) var(--font-family);
  --text-17-medium: 500 var(--font-size-17) / var(--line-height) var(--font-family);
  --text-19-medium: 500 var(--font-size-19) / var(--line-height) var(--font-family);
  --text-16-medium: 500 var(--font-size-16) / var(--line-height) var(--font-family);
  --text-14-regular: 400 var(--font-size-14) / var(--line-height) var(--font-family);
  --text-20-regular: 400 var(--font-size-20) / var(--line-height) var(--font-family);
  --text-25-medium: 500 var(--font-size-25) / var(--line-height) var(--font-family);
  --text-17-regular: 400 var(--font-size-17) / var(--line-height) var(--font-family);
  --text-18-medium: 500 var(--font-size-18) / var(--line-height) var(--font-family);
  --text-20-bold: 700 var(--font-size-20) / var(--line-height) var(--font-family);
  --text-15-medium: 500 var(--font-size-15) / var(--line-height) var(--font-family);
  --text-20-demibold: 600 var(--font-size-20) / var(--line-height) var(--font-family);
  --text-30-medium: 500 var(--font-size-30) / var(--line-height) var(--font-family);
  --text-17-bold: 700 var(--font-size-17) / var(--line-height) var(--font-family);
  --text-30-bold: 700 var(--font-size-30) / var(--line-height) var(--font-family);
  --text-18-regular: 400 var(--font-size-18) / var(--line-height) var(--font-family);
  --text-21-medium: 500 var(--font-size-21) / var(--line-height) var(--font-family);
  --text-22-medium: 500 var(--font-size-22) / var(--line-height) var(--font-family);
  --text-25-bold: 700 var(--font-size-25) / var(--line-height) var(--font-family);
  --text-18-bold: 700 var(--font-size-18) / var(--line-height) var(--font-family);
  --text-19-bold: 700 var(--font-size-19) / var(--line-height) var(--font-family);
  --text-35-medium: 500 var(--font-size-35) / var(--line-height) var(--font-family);
  --text-19-regular: 400 var(--font-size-19) / var(--line-height) var(--font-family);
  --text-14-medium: 500 var(--font-size-14) / var(--line-height) var(--font-family);
  --text-24-bold: 700 var(--font-size-24) / var(--line-height) var(--font-family);
  --text-22-bold: 700 var(--font-size-22) / var(--line-height) var(--font-family);
  --text-25-demibold: 600 var(--font-size-25) / var(--line-height) var(--font-family);
  --text-24-medium: 500 var(--font-size-24) / var(--line-height) var(--font-family);
  --text-25-regular: 400 var(--font-size-25) / var(--line-height) var(--font-family);
  --text-26-regular: 400 var(--font-size-26) / var(--line-height) var(--font-family);
  --text-13-medium: 500 var(--font-size-13) / var(--line-height) var(--font-family);
  --text-30-demibold: 600 var(--font-size-30) / var(--line-height) var(--font-family);
  --text-40-medium: 500 var(--font-size-40) / var(--line-height) var(--font-family);
  --text-23-bold: 700 var(--font-size-23) / var(--line-height) var(--font-family);
  --text-35-regular: 400 var(--font-size-35) / var(--line-height) var(--font-family);
  --text-35-demibold: 600 var(--font-size-35) / var(--line-height) var(--font-family);
  --text-31-medium: 500 var(--font-size-31) / var(--line-height) var(--font-family);
  --text-28-bold: 700 var(--font-size-28) / var(--line-height) var(--font-family);
  --text-15-light: 300 var(--font-size-15) / var(--line-height) var(--font-family);
  --text-21-regular: 400 var(--font-size-21) / var(--line-height) var(--font-family);
  --text-23-medium: 500 var(--font-size-23) / var(--line-height) var(--font-family);
  --text-33-bold: 700 var(--font-size-33) / var(--line-height) var(--font-family);
  --text-45-bold: 700 var(--font-size-45) / var(--line-height) var(--font-family);
  --text-40-bold: 700 var(--font-size-40) / var(--line-height) var(--font-family);
  --text-15-bold: 700 var(--font-size-15) / var(--line-height) var(--font-family);
  --text-9-bold: 700 var(--font-size-9) / var(--line-height) var(--font-family);
  --text-11-medium: 500 var(--font-size-11) / var(--line-height) var(--font-family);
  --text-12-regular: 400 var(--font-size-12) / var(--line-height) var(--font-family);
  --text-16-bold: 700 var(--font-size-16) / var(--line-height) var(--font-family);
  --text-21-bold: 700 var(--font-size-21) / var(--line-height) var(--font-family);
  --text-13-regular: 400 var(--font-size-13) / var(--line-height) var(--font-family);
  --text-7-medium: 500 var(--font-size-7) / var(--line-height) var(--font-family);
  --text-8-regular: 400 var(--font-size-8) / var(--line-height) var(--font-family);
  --text-9-regular: 400 var(--font-size-9) / var(--line-height) var(--font-family);
  --text-10-regular: 400 var(--font-size-10) / var(--line-height) var(--font-family);
  --text-10-bold: 700 var(--font-size-10) / var(--line-height) var(--font-family);
  --text-11-regular: 400 var(--font-size-11) / var(--line-height) var(--font-family);
  --text-12-medium: 500 var(--font-size-12) / var(--line-height) var(--font-family);
  --text-12-bold: 700 var(--font-size-12) / var(--line-height) var(--font-family);
  --text-13-bold: 700 var(--font-size-13) / var(--line-height) var(--font-family);
  --text-14-bold: 700 var(--font-size-14) / var(--line-height) var(--font-family);
  --text-15-regular: 400 var(--font-size-15) / var(--line-height) var(--font-family);
  --text-9-medium: 500 var(--font-size-9) / var(--line-height) var(--font-family);
  --text-10-medium: 500 var(--font-size-10) / var(--line-height) var(--font-family);
  --text-6-bold: 700 var(--font-size-6) / var(--line-height) var(--font-family);
  --text-11-bold: 700 var(--font-size-11) / var(--line-height) var(--font-family);
  --text-8-bold: 700 var(--font-size-8) / var(--line-height) var(--font-family);
  --text-8-medium: 500 var(--font-size-8) / var(--line-height) var(--font-family);
  --text-8-light: 300 var(--font-size-8) / var(--line-height) var(--font-family);
  /* film-player: No design for its controls (owner, 2026-10-26: the player of the desktop like the one of the phone, 1:20449 in 1:20386, with a working «تمام صفحه»): FilmPlayer on the page of a film (#173, #180, #182), in the place of box-media-item-video. */
  --film-player-shade: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.82) 100%);
  --film-player-padding-inline: calc(36 * var(--px));
  --film-player-padding-bottom: calc(24 * var(--px));
  --film-player-gap: calc(12 * var(--px));
  --film-player-line: calc(4 * var(--px));
  --film-player-line-hit: calc(20 * var(--px));
  --film-player-knob: calc(16 * var(--px));
  --film-player-big-play: calc(96 * var(--px));
  --film-player-big-play-icon: calc(34 * var(--px));
  --film-player-button: calc(46 * var(--px));
  --film-player-icon: calc(24 * var(--px));
  --film-player-play: calc(58 * var(--px));
  --film-player-play-icon: calc(30 * var(--px));
  --film-player-seek-icon: calc(32 * var(--px));
  --film-player-buttons-gap: calc(30 * var(--px));
  --film-player-button-hover: rgba(255, 255, 255, 0.14);
}

#app [data-theme="preacher"] {
  --theme-from: var(--color-green);
  --theme-to: var(--color-teal);
  --theme-shadow-lg: var(--shadow-lg-teal-2);
  --theme-field-ring: var(--form-field-ring-preacher);
  --gradient-theme-vertical: linear-gradient(180deg, var(--theme-from) 0%, var(--theme-to) 100%);
}

@media (max-width: 767.98px) {
  #app:has(.shell.mobile) {
    /* One design pixel of the mobile design (360px wide): 1px from 360px up, smaller on narrower screens. */
    --px: calc(min(100cqw, 360px) / 360);
    --page-background: var(--color-gray-95);

    /* page: 221 artboards; Figma page 'site - 10/05/2026' and '360 px web app - 10/05/2026' */
    --page-design-width: calc(360 * var(--px));
    --page-touch-target-min: 44px;
    /* site-header: Figma Web 1:974 (guest), 1:1498 (host), 1:3027 (preacher), 1:15109 (no active item); Application 1:5214 inside 1:5099 (mobile); active «درباره ما» and «ارتباط با ما» from #165, #2 (guest), #167, #4 (host), #166, #3 (preacher); the line without an active item of the preacher's header from #230, #199, #22 (Web 1:3560, 1:4511, 1:5472); active «محتوا» from #208, #210, #209 (Web 1:128756, 1:131002, 1:129466) */
    --site-header-height: calc(61.03 * var(--px));
    --site-header-angle: 260.404deg;
    --site-header-logo-start: calc(36.81 * var(--px));
    --site-header-logo-top: calc(12.37 * var(--px));
    --site-header-logo-width: calc(32.66 * var(--px));
    --site-header-logo-height: calc(40.994 * var(--px));
    --site-header-search-icon-start: calc(300.26 * var(--px));
    --site-header-search-icon-top: calc(24.6 * var(--px));
    --site-header-search-icon-width: calc(22.72 * var(--px));
    --site-header-search-icon-height: calc(21.714 * var(--px));
    --site-header-title-center: calc(179.94 * var(--px));
    --site-header-title-top: calc(24.32 * var(--px));
    --site-header-menu-icon-start: calc(299 * var(--px));
    --site-header-menu-icon-top: calc(24 * var(--px));
    --site-header-menu-icon-width: calc(25 * var(--px));
    --site-header-menu-icon-height: calc(20 * var(--px));
    --site-header-title-small-center: calc(185.7 * var(--px));
    --site-header-title-small-top: calc(24.07 * var(--px));
    /* site-footer: Figma Web 1:660 (light, on #162) and 1:15106 (on the gradient card, #86); baselines from the SVG export of #162 and #86. Vertical positions are measured from the top of the title line. The three rules are placed as Figma draws them: 5px thick with round ends, from the line downwards (the export has them 2.5px higher and 2.5px longer at each end; see docs/design-mismatches.md). */
    --site-footer-social-size: calc(24.75 * var(--px));
    /* install-bar: Figma Web 1:15011 on #86; dots of the tile from the SVG export */
    --install-bar-width: calc(296.14 * var(--px));
    --install-bar-height: calc(47.05 * var(--px));
    --install-bar-radius: calc(15 * var(--px));
    --install-bar-tile-start: calc(11.22 * var(--px));
    --install-bar-tile-top: calc(10.57 * var(--px));
    --install-bar-tile-size: calc(25.9 * var(--px));
    --install-bar-tile-radius: calc(8.63 * var(--px));
    --install-bar-dot-size: calc(3.45 * var(--px));
    --install-bar-dot-top: calc(11.22 * var(--px));
    --install-bar-dot-1-start: calc(6.04 * var(--px));
    --install-bar-dot-2-start: calc(11.22 * var(--px));
    --install-bar-dot-3-start: calc(16.4 * var(--px));
    --install-bar-label-start: calc(48.34 * var(--px));
    --install-bar-label-top: calc(13.77 * var(--px));
    /* tab-bar: Figma Application 1:21569 (bottom bar on Samsung Galaxy S10 - 20); margins and shadow of the bar from the exported shape (mobile/tab-bar-shape.svg, mobile/tab-bar-action.svg). Mobile only. Vertical positions are measured from the top of the round button. */
    --tab-bar-height: calc(118.86 * var(--px));
    --tab-bar-shape-start: calc(-15.01 * var(--px));
    --tab-bar-shape-top: calc(14.55 * var(--px));
    --tab-bar-shape-width: calc(390.05 * var(--px));
    --tab-bar-shape-height: calc(109.31 * var(--px));
    --tab-bar-shape-margin: calc(15 * var(--px));
    --tab-bar-shape-edge: calc(25 * var(--px));
    --tab-bar-band-shadow-rise: calc(10 * var(--px));
    --tab-bar-band-shadow-blur: calc(15 * var(--px));
    --tab-bar-band-shadow-color: rgba(0, 0, 0, 0.078);
    --tab-bar-tab-top: calc(57.23 * var(--px));
    --tab-bar-label-top: calc(89.25 * var(--px));
    --tab-bar-profile-center: calc(330.31 * var(--px));
    --tab-bar-profile-icon-start: calc(315.135 * var(--px));
    --tab-bar-profile-icon-top: calc(59.16 * var(--px));
    --tab-bar-profile-icon-width: calc(21.255 * var(--px));
    --tab-bar-profile-icon-height: calc(23.187 * var(--px));
    --tab-bar-follow-center: calc(271.14 * var(--px));
    --tab-bar-follow-icon-start: calc(255.823 * var(--px));
    --tab-bar-follow-icon-top: calc(57.23 * var(--px));
    --tab-bar-follow-icon-width: calc(23.187 * var(--px));
    --tab-bar-follow-icon-height: calc(26.086 * var(--px));
    --tab-bar-content-center: calc(96.15 * var(--px));
    --tab-bar-content-icon-start: calc(81.003 * var(--px));
    --tab-bar-content-icon-top: calc(59.16 * var(--px));
    --tab-bar-content-icon-width: calc(23.187 * var(--px));
    --tab-bar-content-icon-height: calc(23.187 * var(--px));
    --tab-bar-home-center: calc(38.65 * var(--px));
    --tab-bar-home-icon-start: calc(24.113 * var(--px));
    --tab-bar-home-icon-top: calc(59.16 * var(--px));
    --tab-bar-home-icon-width: calc(23.187 * var(--px));
    --tab-bar-home-icon-height: calc(23.187 * var(--px));
    --tab-bar-action-start: calc(140.99 * var(--px));
    --tab-bar-action-size: calc(78.007 * var(--px));
    --tab-bar-action-shadow-top: calc(12 * var(--px));
    --tab-bar-action-shadow-side: calc(26 * var(--px));
    --tab-bar-action-shadow-bottom: calc(40 * var(--px));
    --tab-bar-plus-length: calc(32.699 * var(--px));
    --tab-bar-plus-thickness: calc(6.936 * var(--px));
    --tab-bar-plus-radius: calc(10 * var(--px));
    --tab-bar-plus-start: calc(22.691 * var(--px));
    --tab-bar-plus-top: calc(22.65 * var(--px));
    /* text-field: Figma Web #229 (fields 1:3133, 1:3146), #197 (1:3989); corner radius from the SVG export. Application 1:5099, 1:8880. */
    --text-field-width: calc(254.64 * var(--px));
    --text-field-height: calc(47.05 * var(--px));
    --text-field-text-start: calc(16.49 * var(--px));
    --text-field-text-top: calc(12.45 * var(--px));
    --text-field-surname-icon-start: calc(217.81 * var(--px));
    --text-field-surname-icon-top: calc(13.74 * var(--px));
    --text-field-surname-icon-width: calc(20.34 * var(--px));
    --text-field-surname-icon-height: calc(18.71 * var(--px));
    --text-field-mobile-icon-start: calc(218.63 * var(--px));
    --text-field-mobile-icon-top: calc(13.74 * var(--px));
    --text-field-mobile-icon-width: calc(18.71 * var(--px));
    --text-field-mobile-icon-height: calc(18.71 * var(--px));
    --text-field-code-icon-start: calc(218.12 * var(--px));
    --text-field-code-icon-top: calc(13.23 * var(--px));
    --text-field-code-icon-width: calc(19.74 * var(--px));
    --text-field-code-icon-height: calc(19.74 * var(--px));
    /* app-button: Figma Web #229 (1:3160 primary, 1:3153 secondary), #197; Application 1:5099 (1:5141, 1:5134). */
    --app-button-height: calc(47.05 * var(--px));
    --app-button-primary-width: calc(107.57 * var(--px));
    --app-button-secondary-width: calc(107.57 * var(--px));
    --app-button-radius: calc(15 * var(--px));
    --app-button-label-top: calc(15.02 * var(--px));
    --app-button-angle: 246.37deg;
    /* sign-in: Figma Web #229 (1:3088), #230 (1:3560), #231 (1:3357), #197 (1:3794), #198 (1:4247), #199 (1:4511); Application 1:4964 (role choice), 1:5099 and 1:5215 (step 1), 1:8880 and 1:8988 (step 2). Desktop: the page starts under the header; what belongs to a card is measured from the top and the inline start of the card. Mobile: measured from the top of the frame under its header. One card is shown at a time (owner's decision of 2026-10-07): the two cards side by side of #229 are not built; `other-system-gap` places the line under the card that leads to the other system, which the design does not have. The large logo has the opacity of the export, 0.62 (docs/design-mismatches.md, case 11). */
    --sign-in-page-height: calc(698.97 * var(--px));
    --sign-in-glow-start: calc(119 * var(--px));
    --sign-in-glow-top: calc(74.97 * var(--px));
    --sign-in-glow-width: calc(210 * var(--px));
    --sign-in-glow-height: calc(211 * var(--px));
    --sign-in-logo-start: calc(144 * var(--px));
    --sign-in-logo-top: calc(109.97 * var(--px));
    --sign-in-logo-width: calc(71 * var(--px));
    --sign-in-logo-height: calc(93 * var(--px));
    --sign-in-phone-title-center: calc(180 * var(--px));
    --sign-in-phone-title-top: calc(213.07 * var(--px));
    --sign-in-text-start: calc(64 * var(--px));
    --sign-in-step-top: calc(268.97 * var(--px));
    --sign-in-rule-start: calc(65.56 * var(--px));
    --sign-in-rule-top: calc(296.56 * var(--px));
    --sign-in-rule-width: calc(140.49 * var(--px));
    --sign-in-hint-top: calc(307.97 * var(--px));
    --sign-in-field-start: calc(52.51 * var(--px));
    --sign-in-field-1-top: calc(341.6 * var(--px));
    --sign-in-field-2-top: calc(400.61 * var(--px));
    --sign-in-buttons-top-1: calc(476.74 * var(--px));
    --sign-in-buttons-top-2: calc(476.74 * var(--px));
    --sign-in-primary-start: calc(65.38 * var(--px));
    --sign-in-secondary-start: calc(186.72 * var(--px));
    --sign-in-primary-label-center: calc(54.29 * var(--px));
    --sign-in-secondary-label-center: calc(53.29 * var(--px));
    --sign-in-site-center: calc(188 * var(--px));
    --sign-in-site-top: calc(592.97 * var(--px));
    --sign-in-site-rule-start: calc(108.87 * var(--px));
    --sign-in-site-rule-top: calc(584.94 * var(--px));
    --sign-in-site-rule-width: calc(140.49 * var(--px));
    --sign-in-waves-top: calc(504.97 * var(--px));
    --sign-in-waves-width: calc(360 * var(--px));
    --sign-in-waves-height: calc(194 * var(--px));
    --sign-in-choice-height: calc(760 * var(--px));
    --sign-in-choice-angle: 205.353deg;
    --sign-in-choice-title-start: calc(26 * var(--px));
    --sign-in-choice-title-top: calc(214.65 * var(--px));
    --sign-in-choice-lead-start: calc(26.46 * var(--px));
    --sign-in-choice-lead-top: calc(258.73 * var(--px));
    --sign-in-choice-button-start: calc(26.15 * var(--px));
    --sign-in-choice-button-width: calc(307.71 * var(--px));
    --sign-in-choice-button-height: calc(46.94 * var(--px));
    --sign-in-choice-host-top: calc(322.2 * var(--px));
    --sign-in-choice-preacher-top: calc(381.08 * var(--px));
    --sign-in-choice-host-label-start: calc(25.52 * var(--px));
    --sign-in-choice-preacher-label-start: calc(23.47 * var(--px));
    --sign-in-choice-label-top: calc(10.66 * var(--px));
    --sign-in-choice-icon-start: calc(271.58 * var(--px));
    --sign-in-choice-icon-top: calc(13.73 * var(--px));
    --sign-in-choice-icon-width: calc(19.2 * var(--px));
    --sign-in-choice-icon-height: calc(19.1 * var(--px));
    --sign-in-choice-note-center: calc(180 * var(--px));
    --sign-in-choice-note-top: calc(464.81 * var(--px));
    --sign-in-choice-note-line: calc(22 * var(--px));
    --sign-in-choice-button-shadow: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) rgba(15, 180, 113, 0.43);
    /* about: Figma Web 1:130086 (#165), 1:130321 (#167), 1:130562 (#166); line breaks, baselines and the crop of the two photos from the SVG export. Tops are measured from the lower edge of the header. The two rules are placed as Figma draws them (2px, from the line downwards, as the rules of the footer). Only #165 has the band in gray-95 behind the content. Release 2, R2: the texts are written in place; their widths (from the start of the text to the photo, and the whole frame) and the heights they have before the next title or photo. */
    --about-photo-1-width: calc(296.14 * var(--px));
    --about-photo-1-height: calc(203.11 * var(--px));
    --about-photo-1-image-width: calc(367.39 * var(--px));
    --about-photo-1-image-height: calc(244.93 * var(--px));
    --about-photo-1-image-start: calc(-62.25 * var(--px));
    --about-photo-1-image-top: calc(-6.96 * var(--px));
    --about-photo-2-width: calc(296.14 * var(--px));
    --about-photo-2-height: calc(75.49 * var(--px));
    --about-photo-2-image-width: calc(357.11 * var(--px));
    --about-photo-2-image-height: calc(238.07 * var(--px));
    --about-photo-2-image-start: calc(-56.37 * var(--px));
    --about-photo-2-image-top: calc(-67.73 * var(--px));
    /* featured: Figma Web 1:348, 1:178, 1:513 on #162 (the same block on #163, #164, #208-210); windows of the scroll groups, drawings and photos from the SVG export of #162; Application 1:68 (rows 1:138, 1:322, 1:501). design/_tools/pages/featured.py */
    --featured-height: calc(616 * var(--px));
    --featured-track-width: calc(1225.85 * var(--px));
    --featured-accent-1: var(--color-primary);
    --featured-accent-2: var(--color-red-2);
    --featured-accent-3: var(--color-yellow-3);
    --featured-more-circle-1: #168a5b;
    --featured-extra-height: calc(206 * var(--px));
    --featured-tab-2-shadow: calc(6 * var(--px)) 0 calc(9 * var(--px)) rgba(180, 58, 58, 0.4);
    --featured-tab-3-shadow: calc(6 * var(--px)) 0 calc(9 * var(--px)) rgba(180, 164, 58, 0.17);
    /* media-card: the content card: Figma Web 1:300 on #162 (photo, shade, title, name, kind of content); Application 1:290 in 1:68 */
    --media-card-tab-inner-radius: calc(1 * var(--px));
    --media-card-card-shadow: 0 calc(10 * var(--px)) calc(15 * var(--px)) #b9b9b9;
    /* content: Figma Web 1:128756 (#208), 1:131002 (#210), 1:129466 (#209): where the rows of selected content start, the room above the footer and below the install bar; Application 1:2805 and 1:3546: the room for the invitation between the rows and «آمار سامانه». design/_tools/pages/content.py */
    --content-banner-row: calc(168.38 * var(--px));
    --content-preacher-gap: calc(0.58 * var(--px));
    /* home-hero: Figma Web 1:689 (slider) and 1:727 (invitation) on #162, the preacher's button 1:2103 on #163; Application 1:98 and the place of 1:137 in 1:68. design/_tools/pages/home.py */
    --home-hero-height: calc(340.97 * var(--px));
    --home-hero-height-plain: calc(194.97 * var(--px));
    --home-hero-text-rise: calc(8 * var(--px));
    --home-hero-banner-button-shadow: 0 calc(3 * var(--px)) calc(26 * var(--px)) rgba(0, 0, 0, 0.459);
    /* donation-bar: Figma Web 1:532 on #162; Application 1:707 in 1:68. design/_tools/pages/home.py */
    --donation-bar-height: calc(90 * var(--px));
    --donation-bar-angle: 261.544deg;
    --donation-bar-tab-radius: calc(6 * var(--px));
    --donation-bar-tab-fill: rgba(255, 255, 255, 0.27);
    /* news-list: Figma Web 1:955 on #162 (lines and baselines of the texts from the SVG export); Application 1:841 in 1:68. design/_tools/pages/home.py Release 2, R2: the news are written texts, not the lines of the design: the width of a summary (from its start to the margin the photo keeps on the other side) and of a title. */
    --news-list-height: calc(519 * var(--px));
    --news-list-title-pitch: calc(23 * var(--px));
    --news-list-shade: linear-gradient(1.767deg, rgba(0, 0, 0, 0.502) 9.12%, rgba(0, 0, 0, 0.6196) 87.27%);
    --news-list-card-shadow: 0 calc(3 * var(--px)) calc(10 * var(--px)) rgba(0, 0, 0, 0.078);
    /* stats-band: Figma Web 1:808 on #162; Application 1:918 in 1:68. design/_tools/pages/home.py. The mobile band ends 32 below its numbers (owner, 2026-10-26: the frame drew 287, empty under the numbers). */
    --stats-band-height: calc(183 * var(--px));
    /* request-banner: Application 1:137 in 1:68 (the same banner is 1:2844 in 1:2805). design/_tools/pages/home.py */
    --request-banner-width: calc(333.7 * var(--px));
    --request-banner-height: calc(125.2 * var(--px));
    --request-banner-tint: linear-gradient(249.435deg, #f30000 0%, #4fe723 100%);
    --request-banner-angle: 103.362deg;
    --request-banner-from: 2.89%;
    --request-banner-to: 109.02%;
    --request-banner-radius: calc(60 * var(--px));
    --request-banner-radius-small: calc(10 * var(--px));
    --request-banner-plus-start: calc(171.65 * var(--px));
    --request-banner-plus-top: calc(13.04 * var(--px));
    --request-banner-plus-length: calc(20.25 * var(--px));
    --request-banner-plus-thickness: calc(4.29 * var(--px));
    --request-banner-plus-radius: calc(56 * var(--px));
    --request-banner-button-shadow: 0 calc(3 * var(--px)) calc(26 * var(--px)) rgba(0, 0, 0, 0.459);
    /* tab-bar-browse: Application 1:965 in 1:68 (the same bar on 1:2805): what differs from the bar of 1:21569. design/_tools/pages/home.py */
    --tab-bar-browse-label-top: calc(90.24 * var(--px));
    --tab-bar-browse-home-center: calc(35.72 * var(--px));
    --tab-bar-browse-content-center: calc(92.61 * var(--px));
    --tab-bar-browse-follow-center: calc(267.88 * var(--px));
    --tab-bar-browse-profile-center: calc(326.1 * var(--px));
    --tab-bar-browse-action-bleed: calc(40 * var(--px));
    /* kind-bar: Application 1:3498 in 1:2805 (the same bar on 1:3546). design/_tools/pages/content.py */
    --kind-bar-height: calc(61 * var(--px));
    --kind-bar-angle: 260.383deg;
    --kind-bar-from: #f1f1f1;
    --kind-bar-chip-radius: calc(30 * var(--px));
    /* content-tabs: Figma Web 1:113652 on #170 (the same bar on #186 and #5, with another tab open; on #171-185 as on these three); Application 1:2766 in 1:2499, 1:1887, 1:2193. design/_tools/pages/media.py */
    --content-tabs-height: calc(59.11 * var(--px));
    --content-tabs-band-top: calc(-59.1 * var(--px));
    --content-tabs-band-height: calc(118.22 * var(--px));
    --content-tabs-angle: 251.828deg;
    --content-tabs-from: #f1f1f1;
    --content-tabs-line-radius: calc(14 * var(--px));
    --content-tabs-many-start: calc(12 * var(--px));
    --content-tabs-many-end: calc(12 * var(--px));
    --content-tabs-many-gap: calc(20 * var(--px));
    /* kind-bar-tall: Application 1:2804 in 1:2499 (the same bar on 1:1887, 1:2193): the bar of the kinds of content as the lists draw it, higher than on the content frames (kind-bar). design/_tools/pages/media.py */
    --kind-bar-tall-height: calc(75.21 * var(--px));
    --kind-bar-tall-angle: 258.204deg;
    --kind-bar-tall-from: #f1f1f1;
    /* media-list: Figma Web 1:113180 and 1:113431 on #170 («محبوب ترین ها», «جدید ترین ها»), the same on #186 and #5 with other cards; windows of the scroll groups, photos and drawings from the SVG exports; Application 1:2744 in 1:2499 (the same grid in 1:1887, 1:2193). design/_tools/pages/media.py */
    --media-list-accent-maddahi: var(--color-primary);
    --media-list-accent-lectures: var(--color-red-2);
    --media-list-accent-poems: var(--color-yellow-3);
    --media-list-grid-height: calc(1145.47 * var(--px));
    --media-list-track-width: calc(360 * var(--px));
    --media-list-tab-maddahi-shadow: calc(6 * var(--px)) 0 calc(9 * var(--px)) rgba(28, 179, 118, 0.28);
    --media-list-tab-lectures-shadow: calc(6 * var(--px)) 0 calc(9 * var(--px)) rgba(180, 58, 58, 0.4);
    --media-list-tab-poems-shadow: calc(6 * var(--px)) 0 calc(9 * var(--px)) rgba(180, 58, 58, 0.4);
    /* people-row: Figma Web 1:112925 on #170 («مداحان»), 1:119545 #186 («سخنرانان»), 1:123027 #5 («شاعران»); the same row on the pages of one piece of content. design/_tools/pages/media.py */
    --people-row-height: calc(104.24 * var(--px));
    --people-row-track-width: calc(600.42 * var(--px));
    /* occasions: Figma Web 1:112887 and 1:112926 on #170; the same block on every page of the three lists. design/_tools/pages/media.py. Since Release 2 the occasions come from the API: a chip is as wide as its label needs (the padding of the chips of the design), in one row from the place of the first chip that scrolls sideways. */
    --occasions-chip-height: calc(30.17 * var(--px));
    --occasions-chip-padding: calc(13.62 * var(--px));
    --occasions-chip-gap: calc(10.65 * var(--px));
    --occasions-chip-radius: calc(6.49 * var(--px));
    /* player-card: Application 1:19591 in 1:19534 (sound) and 1:20449 in 1:20386 (film). design/_tools/pages/media.py. Since Release 2 the played part and the knob follow the time inside the line (the boxes of the line). */
    --player-card-shade: linear-gradient(180deg, rgba(0, 0, 0, 0) 53.77%, #000000 100%);
    --player-card-line: calc(3 * var(--px));
    --player-card-track-opacity: 0.35;
    --player-card-audio-knob: calc(13.14 * var(--px));
    --player-card-video-knob: calc(12.71 * var(--px));
    --player-card-seek-icon: calc(30 * var(--px));
    --player-card-card-shadow: calc(-4 * var(--px)) calc(15 * var(--px)) calc(25 * var(--px)) rgba(0, 0, 0, 0.35);
    /* text-card: Application 1:4902: picture 1:4909, sheet 1:4918, title 1:4940, text 1:4963. design/_tools/pages/media.py */
    --text-card-pitch: calc(22 * var(--px));
    --text-card-rule: calc(5 * var(--px));
    --text-card-title-to-rule: calc(36.87 * var(--px));
    --text-card-rule-to-body: calc(19.3 * var(--px));
    --text-card-veil: linear-gradient(1.613deg, rgba(0, 0, 0, 0.5) 8.62%, rgba(0, 0, 0, 0.62) 87.72%);
    --text-card-title-pitch: calc(23 * var(--px));
    --text-card-veil-shadow: 0 calc(3 * var(--px)) calc(10 * var(--px)) rgba(0, 0, 0, 0.08);
    /* overlay: Application 1:19536 in 1:19534 (the same layer behind the popups 1:20386 and 1:4902): what lies over the page while a popup is open. design/_tools/pages/media.py The layer in the colours of the role under the page of the filters on a phone: Application 1:32084 (design/_tools/pages/filters.py). */
    --overlay-backdrop: rgba(49, 49, 49, 0.7);
    --overlay-themed-angle: 205.35deg;
    /* phone-layout: Rules 1 to 3 of design/_tools/pages/phone.py: the side margin and the distance between blocks of the mobile lists (Application 1:2499), the rule and the lines of the text popup (Application 1:4902). Not in the mobile design: laid out for the phone on the owner's request of 2026-10-07 by the rules of design/_tools/pages/phone.py. */
    --phone-layout-margin: calc(31.93 * var(--px));
    --phone-layout-gap: calc(15.16 * var(--px));
    --phone-layout-rule-width: calc(66.25 * var(--px));
    --phone-layout-rule: calc(5 * var(--px));
    --phone-layout-line: calc(22 * var(--px));
    --phone-layout-label-scale: 0.6486;
    /* search-panel: Figma Web 1:101480 on #161 «جستجو»; drawings and their painted boxes from the export. The field is the text field of the sign-in cards with the drawing at its start. design/_tools/pages/popups.py */
    --search-panel-field-width: calc(267.31 * var(--px));
    --search-panel-icon-start: calc(14.15 * var(--px));
    --search-panel-icon-top: calc(13.75 * var(--px));
    --search-panel-icon-width: calc(19.72 * var(--px));
    --search-panel-icon-height: calc(19.54 * var(--px));
    --search-panel-text-start: calc(48.02 * var(--px));
    --search-panel-close-width: calc(13.67 * var(--px));
    --search-panel-close-height: calc(13.55 * var(--px));
    --search-panel-heading-icon-width: calc(15.57 * var(--px));
    --search-panel-heading-icon-height: calc(12.99 * var(--px));
    --search-panel-heading-gap: calc(7.14 * var(--px));
    --search-panel-radius: calc(15 * var(--px));
    --search-panel-chip-height: calc(30.17 * var(--px));
    --search-panel-chip-padding: calc(13.62 * var(--px));
    --search-panel-chip-gap: calc(10.65 * var(--px));
    --search-panel-chip-radius: calc(6.49 * var(--px));
    /* donation-dialog: Figma Web 1:98635 on #226 «نذورات» (nothing chosen) and the same on #227 and #228 (an amount chosen); Application 1:19729 in 1:19592 and 1:20514. The cross and its painted box from the export. design/_tools/pages/popups.py */
    --donation-dialog-sign-start: calc(14.37 * var(--px));
    --donation-dialog-sign-top: calc(14.03 * var(--px));
    --donation-dialog-sign-length: calc(18.95 * var(--px));
    --donation-dialog-sign-thickness: calc(3 * var(--px));
    --donation-dialog-sign-radius: calc(1.5 * var(--px));
    --donation-dialog-button-angle: 259.435deg;
    --donation-dialog-label-top: calc(16.5 * var(--px));
    --donation-dialog-label-top-chosen: calc(17.43 * var(--px));
    --donation-dialog-label-center: calc(141.41 * var(--px));
    /* profile-stats: Figma Web 1:5218 on #25 and 1:6032 on #22 (the card «آمار مجالس شما»); #26 and #32 have the same card with the title of the others. The ring is the group of the export as one drawing (design/_tools/export_group.py). design/_tools/pages/profile.py */
    --profile-stats-track-top: calc(160.27 * var(--px));
    --profile-stats-slide-start: calc(26.15 * var(--px));
    --profile-stats-slide-width: calc(307.71 * var(--px));
    --profile-stats-slide-height: calc(181.91 * var(--px));
    --profile-stats-slide-gap: calc(27.15 * var(--px));
    --profile-stats-shadow-room: calc(40 * var(--px));
    --profile-stats-arrow-radius: calc(12 * var(--px));
    /* profile-header: Application: the group «header» of 1:9258 (host) and 1:9775 (preacher); every profile frame has the same band. The name is the first line of a text of two lines (12px bold over 10px medium, lines 13 apart). design/_tools/pages/profile.py */
    --profile-header-height: calc(128.19 * var(--px));
    --profile-header-radius: calc(20 * var(--px));
    --profile-header-angle: 250.417deg;
    /* profile-faq: Figma Web #31 «پروفایل میزبان – 6» (the six questions, 1:107487 and the five below it), #33 (the first one open, an answer of one line) and #34 (the second one open, four lines); the arrows and the lines of the answers from the export. An open question is as high as its answer needs: from the top of the answer, its lines, and the room below them. design/_tools/pages/profile.py */
    --profile-faq-height: calc(47.05 * var(--px));
    --profile-faq-gap: calc(10.35 * var(--px));
    --profile-faq-below: calc(24.6 * var(--px));
    --profile-faq-answer-start: calc(15.16 * var(--px));
    --profile-faq-answer-width: calc(276.27 * var(--px));
    --profile-faq-line-pitch: calc(22 * var(--px));
    --profile-faq-radius: calc(15 * var(--px));
    --profile-faq-ending-height: calc(252.1 * var(--px));
    /* outlined-field: Figma Web: the fields of #27 (1:103880 and the five beside it); Application: the fields of 1:17610. A box with an outline that throws the shadow; where its text starts and where its drawing stands is said by the form it stands in. design/_tools/pages/profile.py */
    --outlined-field-radius: calc(15 * var(--px));
    --outlined-field-border: calc(1 * var(--px));
    --outlined-field-height: calc(47 * var(--px));
    --outlined-field-small-height: calc(43 * var(--px));
    /* profile-form: Figma Web 1:103941 on #27 «پروفایل میزبان – 2»: the six fields, their drawings from the export; Application 1:17610: heading, fields, the two buttons and the name of the site. A text may run up to the drawing of its field. design/_tools/pages/profile.py Release 2 (R1): the desktop artboard has no «ثبت اطلاعات»; it stands under the first column of fields (send), and the line of the answer under it (message). */
    --profile-form-height: calc(760 * var(--px));
    --profile-form-send-label-start: calc(53.79 * var(--px));
    --profile-form-send-label-shift: 50%;
    --profile-form-send-label-top: calc(15.03 * var(--px));
    --profile-form-back-label-start: calc(53.79 * var(--px));
    --profile-form-back-label-shift: 50%;
    --profile-form-back-label-top: calc(15.03 * var(--px));
    /* profile-addresses: Figma Web 1:105355 on #28 «پروفایل میزبان – 3» (heading, the pencil, three addresses, «ثبت آدرس جدید») and 1:106364 on #30 (the same list with a mark before every address and two buttons); the photos with their pictures and the drawings from the export. Application 1:17804 and 1:17980. With the marks every row stands `shift` further from the start. design/_tools/pages/profile.py */
    --profile-addresses-height: calc(760 * var(--px));
    --profile-addresses-height-removing: calc(760 * var(--px));
    --profile-addresses-shift: calc(42.96 * var(--px));
    --profile-addresses-text-width-removing: calc(207 * var(--px));
    --profile-addresses-send-label-start: calc(30.02 * var(--px));
    --profile-addresses-send-label-shift: 0%;
    --profile-addresses-send-label-top: calc(14.64 * var(--px));
    --profile-addresses-back-label-start: calc(39.49 * var(--px));
    --profile-addresses-back-label-shift: 0%;
    --profile-addresses-back-label-top: calc(14.64 * var(--px));
    --profile-addresses-preacher-confirm-label-start: calc(30.02 * var(--px));
    --profile-addresses-preacher-confirm-label-shift: 0%;
    --profile-addresses-preacher-confirm-label-top: calc(14.64 * var(--px));
    --profile-addresses-preacher-back-label-start: calc(39.49 * var(--px));
    --profile-addresses-preacher-back-label-shift: 0%;
    --profile-addresses-preacher-back-label-top: calc(14.64 * var(--px));
    --profile-addresses-preacher-height: calc(1049.6 * var(--px));
    /* profile-address-form: Figma Web 1:112133 on #29 «پروفایل میزبان – 4» (heading, the map with its pin, five fields, two buttons); the picture of the map, the pin and the drawings of the fields from the export. Application 1:19156. design/_tools/pages/profile.py */
    --profile-address-form-height: calc(783 * var(--px));
    --profile-address-form-map-radius: calc(15 * var(--px));
    --profile-address-form-send-label-start: calc(26.55 * var(--px));
    --profile-address-form-send-label-shift: 0%;
    --profile-address-form-send-label-top: calc(16.55 * var(--px));
    --profile-address-form-back-label-start: calc(36.07 * var(--px));
    --profile-address-form-back-label-shift: 0%;
    --profile-address-form-back-label-top: calc(16.55 * var(--px));
    /* profile-availability: Figma Web 1:8138 on #24 «پروفایل مبلغ آماده به کاری» with the two buttons under it (1:8045, 1:8052); Application 1:20060, where the same choice is a popup: a white sheet with a row for every choice and the buttons under it. Everything is measured from the box around the card and the buttons. The dot of a chosen option on a phone is the one of #24 at the scale of the two rings (the frame draws nothing chosen). design/_tools/pages/profile.py */
    --profile-availability-confirm-label-start: calc(52.98 * var(--px));
    --profile-availability-confirm-label-shift: 50%;
    --profile-availability-confirm-label-top: calc(14.99 * var(--px));
    --profile-availability-back-label-start: calc(39.95 * var(--px));
    --profile-availability-back-label-shift: 0%;
    --profile-availability-back-label-top: calc(14.99 * var(--px));
    --profile-availability-ring: calc(2 * var(--px));
    --profile-availability-dot-inset: calc(3.41 * var(--px));
    --profile-availability-row-radius: calc(15 * var(--px));
    --profile-availability-sheet-radius: calc(15 * var(--px));
    /* profile-sheet: Figma Web #23 «پروفایل مبلغ اطلاعات حساب» (the five cards 1:7061, 1:7101, 1:7305, 1:6441, 1:6328 and the two buttons); Application 1:18543. Every layer that shows is one placed item (d1, d2, … on the desktop, m1, m2, … on a phone), in the order of the file; drawings and the picture of the map from the export. design/_tools/pages/profile.py */
    --profile-sheet-back-label-start: calc(53.69 * var(--px));
    --profile-sheet-back-label-shift: 50%;
    --profile-sheet-back-label-top: calc(14.98 * var(--px));
    --profile-sheet-edit-label-start: calc(53.69 * var(--px));
    --profile-sheet-edit-label-shift: 50%;
    --profile-sheet-edit-label-top: calc(14.98 * var(--px));
    --profile-sheet-height: calc(1537.19 * var(--px));
    --profile-sheet-ring: calc(2 * var(--px));
    --profile-sheet-ending-gap: calc(39.22 * var(--px));
    --profile-sheet-ending-height: calc(275.59 * var(--px));
    --profile-sheet-card-border: calc(1 * var(--px));
    --profile-sheet-card-radius: calc(15 * var(--px));
    --profile-sheet-photo-radius: calc(30 * var(--px));
    --profile-sheet-pitch-17: calc(17 * var(--px));
    --profile-sheet-pitch-20: calc(20 * var(--px));
    /* tickets: Figma Web 1:110227 on #84 «تیکت» (the same card on #216 «مدیریت آدرس ها – 5»): heading, button, the names of the columns, eight rows, measured from the frame of the page (the card is wider on #216); what a row holds is measured from the row. Application 1:20713 (and 1:20968): a ticket is a card; what a card holds is measured from the card, and the name of the site from the lower edge of the last card. design/_tools/pages/tickets.py */
    --tickets-top-height: calc(192 * var(--px));
    --tickets-card-start: calc(26 * var(--px));
    --tickets-card-width: calc(308 * var(--px));
    --tickets-card-height: calc(94 * var(--px));
    --tickets-card-gap: calc(7 * var(--px));
    --tickets-ending-height: calc(203 * var(--px));
    --tickets-card-radius: calc(15 * var(--px));
    --tickets-details-radius: calc(5 * var(--px));
    --tickets-new-radius: calc(5 * var(--px));
    --tickets-new-label-start: calc(48 * var(--px));
    --tickets-new-label-shift: 50%;
    --tickets-new-label-top: calc(7 * var(--px));
    --tickets-new-angle: 254.84deg;
    --tickets-new-from: 2.14%;
    --tickets-new-to: 98.14%;
    /* ticket-form: Figma Web 1:110961 on #85 «تیکت – 1» (the same card on #217 «مدیریت آدرس ها – 6»): heading, five labels with their stars, four fields, the field of the text, two buttons. Application 1:18174 (and 1:18362), measured from the top of the frame. A text starts as far from the other edge of its field as from the first. design/_tools/pages/tickets.py */
    --ticket-form-send-label-start: calc(39.22 * var(--px));
    --ticket-form-send-label-shift: 0%;
    --ticket-form-send-label-top: calc(15.55 * var(--px));
    --ticket-form-cancel-label-start: calc(44.41 * var(--px));
    --ticket-form-cancel-label-shift: 0%;
    --ticket-form-cancel-label-top: calc(15.55 * var(--px));
    --ticket-form-field-radius: calc(15 * var(--px));
    --ticket-form-send-angle: 246.374deg;
    --ticket-form-send-from: -0%;
    --ticket-form-send-to: 100%;
    --ticket-form-height: calc(994 * var(--px));
    /* option-list: Figma Web 1:132640 on #203 «گروه برگزارکننده» (#204 is the same): the list that a field with a choice opens, drawn alone. It hangs under its field, as wide as the field (521 on #85). A row is as high as the lines are apart and ends at its line; the panel keeps the room of the design above the first row and below the last one; the text is measured from its row. design/_tools/pages/tickets.py */
    --option-list-width: calc(305 * var(--px));
    --option-list-radius: calc(15 * var(--px));
    --option-list-row: calc(47.05 * var(--px));
    --option-list-pad-top: calc(6.24 * var(--px));
    --option-list-pad-bottom: calc(4.68 * var(--px));
    --option-list-text-start: calc(13 * var(--px));
    --option-list-text-top: calc(13.77 * var(--px));
    --option-list-line-start: calc(13.76 * var(--px));
    --option-list-line-width: calc(275.34 * var(--px));
    /* profile-organizer: Figma Web #212 «مدیریت آدرس ها – 1» (title, the list of the organizers 1:9896 in its window with the bar beside it, «با این مجموعه آشنایی دارید؟», two buttons); the window of the list, the cross and the picture from the export. Application 1:19935, where the same choice is a popup. Everything is measured from the box around all of it; a row of the desktop list from its window; what a row holds from the row. design/_tools/pages/preacher.py */
    --profile-organizer-confirm-label-start: calc(52.98 * var(--px));
    --profile-organizer-confirm-label-shift: 50%;
    --profile-organizer-confirm-label-top: calc(14.99 * var(--px));
    --profile-organizer-back-label-start: calc(39.95 * var(--px));
    --profile-organizer-back-label-shift: 0%;
    --profile-organizer-back-label-top: calc(14.99 * var(--px));
    --profile-organizer-ring: calc(2 * var(--px));
    --profile-organizer-dot-inset: calc(2.69 * var(--px));
    --profile-organizer-know-radius: calc(15 * var(--px));
    --profile-organizer-row: calc(63.2 * var(--px));
    --profile-organizer-row-radius: calc(15 * var(--px));
    --profile-organizer-sheet-radius: calc(15 * var(--px));
    /* follow-up: Figma Web #62 «پیگیری میزبان - مجالس جاری» and #60 «- سابقه مجالس»: the column beside the list (1:22236, 1:22271, 1:22303: the two tabs, the numbers under the open one, the large logo, «تماس با پشتیبانی»), measured from the frame below the header, and the distances of the list. design/_tools/pages/followup.py */
    --follow-up-gap: calc(15.16 * var(--px));
    --follow-up-stack-gap: calc(15.16 * var(--px));
    --follow-up-session-gap: calc(7.58 * var(--px));
    /* ceremony-card: Figma Web: the cards of #62, #63, #60, #61 and #59 (1:22409 and the groups like it). One set of boxes per kind of card (current, current-multi, history, history-multi, session), each measured from its card; a box is the one most cards of the kind have. design/_tools/pages/followup.py */
    --ceremony-card-radius: calc(15 * var(--px));
    /* offer-list: Figma Web #40 «پیگیری مبلغ - پیشنهادی» (1:23450), #54 «- جاری» and #56 «- سابقه»: the column beside the list (three tabs, the numbers under the open one, «فیلترها», the large logo, «تماس با پشتیبانی»), the panel «پذیرش مجالس» (1:24528) and the distances of the list, measured from the frame below the header; Application 1:10364, 1:15391, 1:16388: the strip of the tabs, the panel above the bottom bar and the end of the page. design/_tools/pages/offers.py */
    --offer-list-strip-height: calc(56.97 * var(--px));
    --offer-list-panel-width: calc(232 * var(--px));
    --offer-list-panel-height: calc(64 * var(--px));
    --offer-list-panel-start: calc(64 * var(--px));
    --offer-list-panel-bottom: calc(89 * var(--px));
    --offer-list-gap: calc(10.75 * var(--px));
    --offer-list-stack-gap: calc(40.86 * var(--px));
    --offer-list-first-session-gap: calc(19 * var(--px));
    --offer-list-session-gap: calc(7 * var(--px));
    --offer-list-after-sessions-gap: calc(34.96 * var(--px));
    --offer-list-session-start: calc(2.8 * var(--px));
    --offer-list-ending-gap: calc(83.55 * var(--px));
    --offer-list-ending-height: calc(261.45 * var(--px));
    --offer-list-panel-radius: calc(15 * var(--px));
    --offer-list-panel-button-radius: calc(15 * var(--px));
    --offer-list-panel-button-border: calc(1 * var(--px));
    --offer-list-panel-angle: 250.39deg;
    --offer-list-tab-line-radius: calc(20 * var(--px));
    --offer-list-strip-angle: 251.85deg;
    /* offer-card: Figma Web: the cards of #40 to #58 (1:24399 and the groups like it) with the boxes to tick beside them. One set of boxes per kind of card (proposed, current and history, each for one session and for several, and a session of an open ceremony), measured from the card; a box is the one most cards of the kind have. Application: the cards of 1:10364, 1:11513, 1:12662, 1:13812, 1:15391 and 1:16388. design/_tools/pages/offers.py */
    --offer-card-radius: calc(15 * var(--px));
    --offer-card-button-radius: calc(15 * var(--px));
    --offer-card-button-border: calc(1 * var(--px));
    --offer-card-comment-radius: calc(10 * var(--px));
    --offer-card-comment-angle: 249.7deg;
    --offer-card-stack-radius: calc(30 * var(--px));
    --offer-card-more-row: calc(28.23 * var(--px));
    --offer-card-more-below: calc(18.69 * var(--px));
    --offer-card-more-text-top: calc(2.69 * var(--px));
    --offer-card-more-start: calc(45.38 * var(--px));
    --offer-card-more-end: calc(16.19 * var(--px));
    --offer-card-tag-height: calc(22.05 * var(--px));
    --offer-card-tag-gap: calc(4.54 * var(--px));
    --offer-card-tag-pad: calc(10.38 * var(--px));
    --offer-card-tag-radius: calc(6.49 * var(--px));
    /* tick-box: Figma Web: the boxes to tick beside the cards of #40 to #58 (1:24296 large, 1:24305 small): how far the outline of an empty box reaches beyond the box (half its stroke). Application 1:10913, 1:10921, 1:13212, 1:12063, 1:11243: the same, and where a mark stands in its box. design/_tools/pages/offers.py */
    --tick-box-outline-large: calc(1.5 * var(--px));
    --tick-box-outline-small: calc(1 * var(--px));
    /* ceremony-details: Figma Web #111 to #141 «جزئیات مجالس پذیرش شده» (the preacher; 1:61628 and the frames like it) and #142 to #160 «جزئیات مجالس جاری» (the host; 1:78863): the strip under the header, the two columns and the buttons, measured from the frame below the header; a box is the one most artboards of the role have. Application 1:22386, 1:24679, 1:27270 and the eighteen frames like them: the strip, the four cards (a part is measured from its card or its row), the buttons and the end of the page. design/_tools/pages/details.py */
    --ceremony-details-strip-height: calc(51.37 * var(--px));
    --ceremony-details-past-strip-height: calc(51.92 * var(--px));
    --ceremony-details-first: calc(66.34 * var(--px));
    --ceremony-details-first-plain: calc(22.34 * var(--px));
    --ceremony-details-first-offer: calc(214.34 * var(--px));
    --ceremony-details-card-start: calc(27.74 * var(--px));
    --ceremony-details-card-width: calc(304.52 * var(--px));
    --ceremony-details-card-gap: calc(8.68 * var(--px));
    --ceremony-details-when-height: calc(209.59 * var(--px));
    --ceremony-details-people-2-height: calc(168.79 * var(--px));
    --ceremony-details-people-1-height: calc(114.79 * var(--px));
    --ceremony-details-host-height: calc(111.73 * var(--px));
    --ceremony-details-actions-height: calc(81.88 * var(--px));
    --ceremony-details-more-head: calc(35.48 * var(--px));
    --ceremony-details-more-row: calc(43.35 * var(--px));
    --ceremony-details-more-notes: calc(70.49 * var(--px));
    --ceremony-details-ending-height: calc(225.93 * var(--px));
    --ceremony-details-ending-gap: 0;
    --ceremony-details-strip-tint-held: 0.3;
    --ceremony-details-strip-tint-cancelled: 0.1;
    --ceremony-details-radius: calc(15 * var(--px));
    --ceremony-details-border: calc(1 * var(--px));
    --ceremony-details-map-radius: calc(15 * var(--px));
    --ceremony-details-pill-angle: 260.12deg;
    --ceremony-details-accept-angle: 254.33deg;
    --ceremony-details-comment-angle: 180deg;
    --ceremony-details-strip-radius: calc(30 * var(--px));
    --ceremony-details-address-pitch: calc(17 * var(--px));
    /* confirm-dialog: Figma Web #36 «پیغام عدم نمایش» (1:92356), #37 (1:97256), #38 (1:91358) and #39 (1:91397): a sheet with a question and two buttons under it, one set of boxes per question; the panel is measured from the artboard, the rest from the panel. Application 1:19442, 1:19488, 1:20347: the sheet holds its buttons. design/_tools/pages/dialogs.py */
    --confirm-dialog-radius: calc(15 * var(--px));
    --confirm-dialog-button-radius: calc(15 * var(--px));
    --confirm-dialog-button-border: calc(1 * var(--px));
    --confirm-dialog-text-pitch: calc(16 * var(--px));
    /* opinion-page: Figma Web #101 to #110 «ثبت نظر سامانه میزبان» (1:60702 and the frames like it) and #99, #100 «ثبت نظر سامانه مبلغ» (1:59731): the boxes of the two pages, measured from the frame below the header; a part of another part from that part. Application 1:22083 and the eight frames like it (the host) and 1:7488 (the preacher): a column of blocks, each part measured from its block. design/_tools/pages/opinion.py */
    --opinion-page-radius: calc(15 * var(--px));
    --opinion-page-border: calc(1 * var(--px));
    --opinion-page-panel-radius: calc(15 * var(--px));
    --opinion-page-panel-border: calc(1 * var(--px));
    --opinion-page-mark-radius: calc(22 * var(--px));
    --opinion-page-button-radius: calc(15 * var(--px));
    --opinion-page-option-pitch: calc(45.97 * var(--px));
    --opinion-page-row-pitch: calc(48.33 * var(--px));
    --opinion-page-row-radius: calc(15 * var(--px));
    --opinion-page-radio-border: calc(2 * var(--px));
    --opinion-page-radio-dot-inset: calc(2.67 * var(--px));
    --opinion-page-option-angle: 262.46deg;
    --opinion-page-next-angle: 252.29deg;
    --opinion-page-strip-height: calc(51.83 * var(--px));
    --opinion-page-ending-gap: 0;
    --opinion-page-strip-tint: 0.1;
    --opinion-page-host-when-gap: calc(13.77 * var(--px));
    --opinion-page-host-person-gap: calc(13.77 * var(--px));
    --opinion-page-host-choice-gap: calc(15.47 * var(--px));
    --opinion-page-host-note-gap: calc(13.06 * var(--px));
    --opinion-page-host-actions-gap: 0;
    --opinion-page-host-ending-gap: 0;
    --opinion-page-host-actions-height: calc(94.52 * var(--px));
    --opinion-page-host-ending-height: calc(213.29 * var(--px));
    --opinion-page-preacher-when-gap: calc(13.78 * var(--px));
    --opinion-page-preacher-person-gap: calc(13.78 * var(--px));
    --opinion-page-preacher-rows-gap: calc(13.77 * var(--px));
    --opinion-page-preacher-note-gap: calc(13.76 * var(--px));
    --opinion-page-preacher-actions-gap: 0;
    --opinion-page-preacher-ending-gap: calc(0.01 * var(--px));
    --opinion-page-preacher-actions-height: calc(108.56 * var(--px));
    --opinion-page-preacher-ending-height: calc(248.62 * var(--px));
    --opinion-page-host-there-row: calc(30.77 * var(--px));
    --opinion-page-host-there-top: calc(79.04 * var(--px));
    --opinion-page-host-there-start: calc(53.88 * var(--px));
    /* star-rating: Figma Web 1:72459 (1:72518): five stars, of which a coloured part shows from the left as far as a rectangle reaches; the rectangle is larger than the row, carries the two colours and slides along the row (`cut-…`: its size and how far it starts above the stars). Application 1:22083 (1:22173). design/_tools/pages/opinion.py */
    --star-rating-star: calc(18.6 * var(--px));
    --star-rating-pitch: calc(23.92 * var(--px));
    --star-rating-sample: calc(114.27 * var(--px));
    --star-rating-angle: 253.32deg;
    --star-rating-cut-width: calc(124.14 * var(--px));
    --star-rating-cut-height: calc(37.2 * var(--px));
    --star-rating-cut-above: calc(11.59 * var(--px));
    /* admin-chat: Figma Web #35 «پیام به ادمین» (1:98550): the sheet is the panel the popup layer places, the rest is measured from it; a message from its bubble. Application 1:21216 (host) and 1:21320 (preacher), the same sheet in the colours of the role: the panel is the sheet with «بازگشت» under it. design/_tools/pages/chat.py */
    --admin-chat-radius: calc(15 * var(--px));
    --admin-chat-talk-radius: calc(12 * var(--px));
    --admin-chat-field-radius: calc(15 * var(--px));
    --admin-chat-send-radius: calc(15 * var(--px));
    --admin-chat-back-radius: calc(15 * var(--px));
    --admin-chat-bubble-radius: calc(15 * var(--px));
    --admin-chat-first: calc(54.3 * var(--px));
    --admin-chat-gap: calc(8 * var(--px));
    --admin-chat-line: calc(18 * var(--px));
    --admin-chat-bubble-width: calc(155 * var(--px));
    --admin-chat-admin-text-start: calc(15 * var(--px));
    --admin-chat-admin-text-top: calc(9 * var(--px));
    --admin-chat-admin-time-gap: calc(26 * var(--px));
    --admin-chat-admin-bottom: calc(11 * var(--px));
    --admin-chat-admin-photo-edge: calc(10.62 * var(--px));
    --admin-chat-admin-photo-gap: calc(6 * var(--px));
    --admin-chat-admin-photo-width: calc(38 * var(--px));
    --admin-chat-admin-photo-height: calc(39 * var(--px));
    --admin-chat-user-text-start: calc(15 * var(--px));
    --admin-chat-user-text-top: calc(9 * var(--px));
    --admin-chat-user-time-gap: calc(25 * var(--px));
    --admin-chat-user-bottom: calc(11 * var(--px));
    --admin-chat-user-photo-edge: calc(12.25 * var(--px));
    --admin-chat-user-photo-gap: calc(8 * var(--px));
    --admin-chat-user-photo-width: calc(39 * var(--px));
    --admin-chat-user-photo-height: calc(40 * var(--px));
    --admin-chat-user-time-end: calc(36 * var(--px));
    --admin-chat-admin-time-start: calc(12 * var(--px));
    --admin-chat-time-height: calc(8 * var(--px));
    --admin-chat-send-angle: 225deg;
    --admin-chat-ticks-end: calc(12.71 * var(--px));
    --admin-chat-ticks-bottom: calc(9.85 * var(--px));
    --admin-chat-ticks-width: calc(15.51 * var(--px));
    --admin-chat-ticks-height: calc(7.79 * var(--px));
    /* month-calendar: Figma Web #195 (1:98262): the month on the sheet of the date; Application 1:34254: the month in the card of the date. Measured from the box of the calendar (Group 398): a column is where most days stand, the rows one distance apart from the baselines of the days. The range of a phone is the one of the desktop at the size of the day of the phone (no frame draws one). design/_tools/pages/filters.py */
    --month-calendar-column-1: calc(7.94 * var(--px));
    --month-calendar-column-2: calc(40.14 * var(--px));
    --month-calendar-column-3: calc(74.67 * var(--px));
    --month-calendar-column-4: calc(112.86 * var(--px));
    --month-calendar-column-5: calc(152.71 * var(--px));
    --month-calendar-column-6: calc(193.88 * var(--px));
    --month-calendar-column-7: calc(229.74 * var(--px));
    --month-calendar-weekday-1: calc(10.42 * var(--px));
    --month-calendar-weekday-2: calc(40.79 * var(--px));
    --month-calendar-weekday-3: calc(76.31 * var(--px));
    --month-calendar-weekday-4: calc(113.83 * var(--px));
    --month-calendar-weekday-5: calc(154.33 * var(--px));
    --month-calendar-weekday-6: calc(195.5 * var(--px));
    --month-calendar-weekday-7: calc(230.05 * var(--px));
    --month-calendar-weekday-top: calc(34.23 * var(--px));
    --month-calendar-cell: calc(20.59 * var(--px));
    --month-calendar-first-row: calc(62.03 * var(--px));
    --month-calendar-row-pitch: calc(26.67 * var(--px));
    --month-calendar-baseline: calc(11.79 * var(--px));
    --month-calendar-chosen-shift: calc(1 * var(--px));
    --month-calendar-radius: calc(27 * var(--px));
    --month-calendar-inner-radius: calc(2.23 * var(--px));
    --month-calendar-tint: 0.15;
    /* filter-page: Application 1:32084 (the list as a page: its head, the rows from the first one, the panel under them), the cards of 1:34254 (the date), 1:33767 (the hour), 1:32657 (what is asked for) and 1:33190 (the guests), each measured from its card. design/_tools/pages/filters.py */
    --filter-page-top: calc(161 * var(--px));
    --filter-page-gap: calc(7 * var(--px));
    --filter-page-row-height: calc(57 * var(--px));
    --filter-page-radius: calc(15 * var(--px));
    --filter-page-open-top: calc(101 * var(--px));
    --filter-page-faded: 0.3;
    --filter-page-bar-radius: calc(15 * var(--px));
    --filter-page-button-radius: calc(15 * var(--px));
    --filter-page-bar-border: calc(1 * var(--px));
    --filter-page-show-angle: 250.86deg;
    --filter-page-confirm-angle: 246.37deg;
    --filter-page-box-radius: calc(15 * var(--px));
    --filter-page-box-border: calc(1 * var(--px));
    --filter-page-hint-pitch: calc(19 * var(--px));
    --filter-page-ring: calc(2 * var(--px));
    --filter-page-ring-dot: calc(2.66 * var(--px));
    --filter-page-date-after: calc(15.59 * var(--px));
    --filter-page-time-after: calc(14 * var(--px));
    --filter-page-kind-after: calc(7 * var(--px));
    --filter-page-guests-after: calc(7 * var(--px));
    /* request-page: Figma Web #86 «ثبت مجلس مرحله 1» (1:14868; #87 for someone else, 1:95223) and #88 «ثبت مجلس مرحله 2» (1:91893; the first row opened on #92, 1:96659; the organizer chosen on #93, 1:94289): measured from the frame below the header; the rows of the second step one distance apart, a part of a row from its row. Application 1:21424 (step 1), 1:21603, 1:21785 (step 2); the opened row of a phone from the parts of the frames. design/_tools/pages/request.py */
    --request-page-field-radius: calc(15 * var(--px));
    --request-page-field-border: calc(1 * var(--px));
    --request-page-button-radius: calc(15 * var(--px));
    --request-page-button-border: calc(1 * var(--px));
    --request-page-one-height: calc(698.97 * var(--px));
    --request-page-waves-opacity: 0.25;
    --request-page-two-coordination-height: calc(75.59 * var(--px));
    --request-page-two-guests-height: calc(75.59 * var(--px));
    --request-page-two-count-height: calc(78.93 * var(--px));
    --request-page-two-age-height: calc(75.59 * var(--px));
    --request-page-two-height: calc(1009.97 * var(--px));
    --request-page-row-gap: calc(8.23 * var(--px));
    --request-page-ring: calc(1 * var(--px));
    --request-page-row-radius: calc(15 * var(--px));
    --request-page-phone-scale: 0.9740;
    --request-page-two-open-extra: calc(107.12 * var(--px));
    --request-page-step-gap: calc(8 * var(--px));
    /* request-date: Figma Web #64 «تاریخ تک جلسه» (1:99539), #70 «تاریخ چند جلسه آخرین – 1» (1:112251; the tab «چند روزه», the month and the hint of a range), #74 and #72 (the hints of the first and the last day): the panel the popup layer places is the two tabs, the sheet and the buttons under it. Application 1:31616; the tab «چند روزه» of a phone on the other half of the sheet (no frame draws it). design/_tools/pages/request_dialogs.py */
    --request-date-radius: calc(15 * var(--px));
    --request-date-tab-radius: calc(15 * var(--px));
    --request-date-button-radius: calc(15 * var(--px));
    --request-date-confirm-angle: 246.37deg;
    --request-date-hint-pitch: calc(10 * var(--px));
    /* request-time: Figma Web #65 «تاریخ تک جلسه – 1» (1:100398): the panel is the sheet and the buttons under it; a time is two columns, each a box with its value and the values before and after it. Application 1:20141. design/_tools/pages/request_dialogs.py */
    --request-time-radius: calc(15 * var(--px));
    --request-time-box-radius: calc(15 * var(--px));
    --request-time-box-border: calc(1 * var(--px));
    /* address-list: Figma Web #8 «انتخاب آدرس» (1:97305; #9 is the same): six addresses in two columns, «ثبت آدرس جدید». Application 1:31996 (1:31908 is the same): the addresses one below the other, one distance apart. design/_tools/pages/request_dialogs.py */
    --address-list-row-pitch: calc(63.78 * var(--px));
    --address-list-add-gap: calc(8.41 * var(--px));
    --address-list-below: calc(16.03 * var(--px));
    --address-list-row-radius: calc(15 * var(--px));
    /* request-organizer: Figma Web #13 «انتخاب برگزار کننده میزبان» (1:101122; #17 is the same): the panel the popup layer places is the sheet and the buttons under it; the window of the list from the export, three organizers high; an organizer from the window, what it holds from its row; «به سیستم صوتی نیاز دارید؟» and its answers. Application 1:19834: the sheet and the organizers in a window three rows high; the question on a sheet of its own and the buttons where 1:19935 has them. design/_tools/pages/organizer.py */
    --request-organizer-row: calc(63.19 * var(--px));
    --request-organizer-ring: calc(2 * var(--px));
    --request-organizer-row-radius: calc(15 * var(--px));
    --request-organizer-radius: calc(15 * var(--px));
    --request-organizer-know-radius: calc(15 * var(--px));
    --request-organizer-button-radius: calc(15 * var(--px));
    --request-organizer-dot-inset: calc(2.69 * var(--px));
    /* organizer-intro: Figma Web #19 «انتخاب برگزار کننده میزبان – 6» (1:100982; #18 is the same in the colours of the preacher): the panel is the sheet and «بازگشت»; the window of the list from the export; an organizer from the window, what it holds from its part. A phone has no frame: the sheet, the cross, the mark and the box of 1:20682, the title of 1:19834; an organizer from the parts of a row of 1:19834. design/_tools/pages/organizer.py */
    --organizer-intro-inset-start: calc(21.84 * var(--px));
    --organizer-intro-inset-top: calc(11.2 * var(--px));
    --organizer-intro-description-width: calc(233.95 * var(--px));
    --organizer-intro-description-pitch: calc(15 * var(--px));
    --organizer-intro-logo-gap: calc(11.2 * var(--px));
    --organizer-intro-logo-height: calc(31.76 * var(--px));
    --organizer-intro-radius: calc(15 * var(--px));
    --organizer-intro-box-radius: calc(15 * var(--px));
    /* terms-sheet: Figma Web #15 «انتخاب برگزار کننده میزبان – 2» (1:100686; #16 the same with the notes of the preacher): the panel is the sheet and «بازگشت»; the window of the text from the export. Application 1:20682: the sheet with the box the text scrolls in. design/_tools/pages/organizer.py */
    --terms-sheet-pitch: calc(15 * var(--px));
    --terms-sheet-radius: calc(15 * var(--px));
    --terms-sheet-box-radius: calc(15 * var(--px));
    /* preacher-details: Figma Web #82 «تکمیل اطلاعات مبلغ – 5» (1:17269; step 1 with the header; #77 to #81 and #83 the same in other states) and #7 «اطلاعات تکمیلی – 1» (1:21457; step 5 with the header), #219 (1:18292), #224 (1:19500), #202 (1:20832): the head, the fields and the buttons measured from the frame below the header; the cards and lists of steps 3 and 4 one under the other, what they hold from them. Application 1:5331, 1:5781 and 1:7856, 1:6660, 1:8124, 1:8454: measured from the frame below the header; a part of a card from its card. design/_tools/pages/preacher_details.py */
    --preacher-details-waves-opacity: 0.25;
    --preacher-details-one-shift: calc(55.38 * var(--px));
    --preacher-details-field-radius: calc(15 * var(--px));
    --preacher-details-field-border: calc(1 * var(--px));
    --preacher-details-one-button-radius: calc(30 * var(--px));
    --preacher-details-site-line-gap: calc(61.3 * var(--px));
    --preacher-details-site-gap: calc(68.54 * var(--px));
    --preacher-details-one-height: calc(900.35 * var(--px));
    --preacher-details-five-height: calc(670.6 * var(--px));
    --preacher-details-notes-pitch: calc(20 * var(--px));
    --preacher-details-tab-drop: calc(10 * var(--px));
    --preacher-details-pill-shown: calc(7.12 * var(--px));
    --preacher-details-pill-radius: calc(22 * var(--px));
    --preacher-details-two-height: calc(698.97 * var(--px));
    --preacher-details-button-radius: calc(15 * var(--px));
    --preacher-details-two-body-top: calc(142.97 * var(--px));
    --preacher-details-three-rate-pitch: calc(26.87 * var(--px));
    --preacher-details-ring: calc(2 * var(--px));
    --preacher-details-dot-inset: calc(3.17 * var(--px));
    --preacher-details-line-pitch: calc(33.87 * var(--px));
    --preacher-details-rate-extra: calc(49.2 * var(--px));
    --preacher-details-eulogy-base: calc(137.64 * var(--px));
    --preacher-details-three-gap: calc(8.25 * var(--px));
    --preacher-details-card-radius: calc(15 * var(--px));
    --preacher-details-three-buttons-gap: calc(60.3 * var(--px));
    --preacher-details-four-gap: calc(7.45 * var(--px));
    --preacher-details-four-buttons-gap: calc(60.68 * var(--px));
    --preacher-details-cards-top: calc(138.94 * var(--px));
    --preacher-details-card-start: calc(26.33 * var(--px));
    --preacher-details-buttons-height: calc(47.34 * var(--px));
    --preacher-details-step-gap: calc(8 * var(--px));
    /* birthday-sheet: Figma Web #69 «تاریخ تولد – 1» (1:99887; #68 the same empty): the panel is the sheet and the buttons under it; the day, the month and the year in their outlined boxes. Application 1:9096. design/_tools/pages/preacher_details.py */
    --birthday-sheet-radius: calc(15 * var(--px));
    --birthday-sheet-box-radius: calc(15 * var(--px));
    --birthday-sheet-box-border: calc(1 * var(--px));
    --birthday-sheet-button-radius: calc(15 * var(--px));
    --birthday-sheet-button-border: 0;
    /* map: No design: the map of Iran (decision 30.4, Release 2, R3) in the boxes the design gives the picture of a map. The pin of a map that only shows a place: MapView. */
    --map-pin-size: calc(32 * var(--px));
    /* manage: No design (owner, 2026-10-13 and 2026-10-19: the management pages are built from the look of the site). The frame of the management pages and its parts, in the flow of the page: ManageScaffold. Release 2, R1 (docs/DECISIONS.md, section 28). Release 2, R2: the file fields (the box of Dropify), the thumbnails of the lists and the text of a piece of the media pages. */
    --manage-max-width: calc(360 * var(--px));
    --manage-nav-width: calc(360 * var(--px));
    --manage-gap: calc(16 * var(--px));
    --manage-padding-top: calc(16 * var(--px));
    --manage-padding-inline: calc(16 * var(--px));
    --manage-padding-bottom: calc(110 * var(--px));
    --manage-nav-top: 0;
    --manage-nav-padding: calc(12 * var(--px));
    --manage-nav-title-gap: calc(8 * var(--px));
    --manage-nav-gap: calc(6 * var(--px));
    --manage-link-padding-block: calc(8 * var(--px));
    --manage-link-padding-inline: calc(12 * var(--px));
    --manage-content-gap: calc(16 * var(--px));
    --manage-heading-gap: calc(12 * var(--px));
    --manage-actions-gap: calc(8 * var(--px));
    --manage-card-padding: calc(16 * var(--px));
    --manage-card-gap: calc(12 * var(--px));
    --manage-filter-gap: calc(10 * var(--px));
    --manage-field-gap: calc(4 * var(--px));
    --manage-field-min: 0;
    --manage-field-grow: calc(328 * var(--px));
    --manage-input-height: calc(44 * var(--px));
    --manage-input-padding: calc(12 * var(--px));
    --manage-textarea-min: calc(88 * var(--px));
    --manage-textarea-padding: calc(10 * var(--px));
    --manage-button-height: calc(44 * var(--px));
    --manage-button-padding: calc(16 * var(--px));
    --manage-buttons-gap: calc(8 * var(--px));
    --manage-chip-gap: calc(4 * var(--px));
    --manage-chip-padding-block: calc(2 * var(--px));
    --manage-chip-padding-inline: calc(8 * var(--px));
    --manage-cell-padding: 0;
    --manage-cell-padding-block: 0;
    --manage-empty-padding: calc(20 * var(--px));
    --manage-pager-gap: calc(8 * var(--px));
    --manage-check-min: calc(140 * var(--px));
    --manage-check-row-gap: calc(10 * var(--px));
    --manage-check-column-gap: calc(12 * var(--px));
    --manage-check-gap: calc(8 * var(--px));
    --manage-check-box: calc(20 * var(--px));
    --manage-fact-min: calc(140 * var(--px));
    --manage-fact-row-gap: calc(10 * var(--px));
    --manage-fact-column-gap: calc(12 * var(--px));
    --manage-fact-gap: calc(2 * var(--px));
    --manage-secret-padding-block: calc(10 * var(--px));
    --manage-secret-padding-inline: calc(12 * var(--px));
    --manage-row-gap: calc(4 * var(--px));
    --manage-row-padding: calc(10 * var(--px));
    --manage-cell-label: calc(96 * var(--px));
    --manage-cell-label-gap: calc(8 * var(--px));
    --manage-file-player: calc(328 * var(--px));
    --manage-thumb: calc(48 * var(--px));
    --manage-text-min: calc(240 * var(--px));
    --manage-drop-height: calc(160 * var(--px));
    --manage-picture: calc(64 * var(--px));
    /* edit-pencil: No design (owner, 2026-10-19: a pencil beside what an account with the permission may edit, which leads to its editor, so the site needs fewer menus). Release 2, R2: EditPencil, on the cards, the rows, the people, the occasions and the pages of the pieces. */
    --edit-pencil-size: calc(28 * var(--px));
    --edit-pencil-icon: calc(16 * var(--px));
    --edit-pencil-gap: calc(6 * var(--px));
    --edit-pencil-inset: calc(6 * var(--px));
    /* site-editor: No design (owner, 2026-10-20: a pencil beside each part of the site opens its editor on the spot). Release 2, R2: SiteEditor, a panel over the page in the look of the management pages. */
    --site-editor-width: calc(344 * var(--px));
    --site-editor-top: calc(8 * var(--px));
    --site-editor-padding: calc(16 * var(--px));
    --site-editor-gap: calc(12 * var(--px));
    --site-editor-field-gap: calc(4 * var(--px));
    --site-editor-input-height: calc(44 * var(--px));
    --site-editor-input-padding: calc(12 * var(--px));
    --site-editor-textarea-min: calc(96 * var(--px));
    --site-editor-button-height: calc(44 * var(--px));
    --site-editor-button-padding: calc(16 * var(--px));
    --site-editor-row-gap: calc(8 * var(--px));
    /* notifications-page: No design (R4, DECISIONS 31): the list of a person's notifications at /host/notifications and /preacher/notifications, in the look of the cards of the profile; NotificationsPage. */
    --notifications-page-width: calc(328 * var(--px));
    --notifications-page-top: calc(16 * var(--px));
    --notifications-page-bottom: calc(110 * var(--px));
    --notifications-page-gap: calc(10 * var(--px));
    --notifications-page-head-gap: calc(8 * var(--px));
    --notifications-page-item-padding: calc(14 * var(--px));
    --notifications-page-item-radius: calc(15 * var(--px));
    --notifications-page-item-gap: calc(4 * var(--px));
    --notifications-page-dot: calc(8 * var(--px));
    --notifications-page-button-height: calc(36 * var(--px));
    --notifications-page-button-padding: calc(14 * var(--px));
    --notifications-page-button-radius: calc(10 * var(--px));
    /* push-prompt: No design (owner, 2026-10-25: ask the person for the notifications of the browser): PushPrompt, a strip in the flow of a page with its buttons, in the look of NoticeBar. */
    --push-prompt-width: calc(328 * var(--px));
    --push-prompt-top: calc(12 * var(--px));
    --push-prompt-padding-block: calc(10 * var(--px));
    --push-prompt-padding-inline: calc(14 * var(--px));
    --push-prompt-gap: calc(8 * var(--px));
    --push-prompt-radius: calc(12 * var(--px));
    --push-prompt-border: calc(1 * var(--px));
    --push-prompt-button-height: calc(32 * var(--px));
    --push-prompt-button-padding: calc(12 * var(--px));
    --push-prompt-button-radius: calc(8 * var(--px));
    /* notice-bar: No design. Release 2, R3: NoticeBar, a line above a page in the flow of the page: what the staff asked of a request to become a preacher, or why «تایید نهایی» was refused. */
    --notice-bar-width: calc(328 * var(--px));
    --notice-bar-top: calc(12 * var(--px));
    --notice-bar-padding-block: calc(10 * var(--px));
    --notice-bar-padding-inline: calc(14 * var(--px));
    --notice-bar-radius: calc(12 * var(--px));
    --notice-bar-border: calc(1 * var(--px));
    /* preacher-request-card: No design (owner, 2026-10-24: a card on the host's profile that shows where the request to become a preacher stands). Release 2, R3: PreacherRequestCard, in the flow under the profile, in the look of the profile cards. */
    --preacher-request-card-width: calc(328 * var(--px));
    --preacher-request-card-top: calc(16 * var(--px));
    --preacher-request-card-padding: calc(18 * var(--px));
    --preacher-request-card-gap: calc(8 * var(--px));
    --preacher-request-card-radius: calc(15 * var(--px));
    --preacher-request-card-button-height: calc(44 * var(--px));
    --preacher-request-card-button-padding: calc(18 * var(--px));
    --preacher-request-card-button-radius: calc(12 * var(--px));
    /* choice-sheet: No design. Release 2, R3: ChoiceSheet, a choice over the page (the reason of a cancellation, an acceptance on a condition, whether a ceremony was held). */
    --choice-sheet-width: calc(328 * var(--px));
    --choice-sheet-top: calc(60 * var(--px));
    --choice-sheet-padding: calc(18 * var(--px));
    --choice-sheet-gap: calc(12 * var(--px));
    --choice-sheet-option-gap: calc(8 * var(--px));
    --choice-sheet-option-padding: calc(10 * var(--px));
    --choice-sheet-field-gap: calc(6 * var(--px));
    --choice-sheet-textarea-min: calc(90 * var(--px));
    --choice-sheet-button-height: calc(44 * var(--px));
    --choice-sheet-button-padding: calc(18 * var(--px));
    /* site-loader: No design (owner, 2026-10-26: a loading with the logo of روضه خونگی for the change of pages and the waits, in the colours of the site; the same day: no words, only the turning line round the disc): wwwroot/css/loader.css, used by Loading, PageLoader and the start of the site (index.html). */
    --site-loader-badge: calc(88 * var(--px));
    --site-loader-ring: calc(4 * var(--px));
    --site-loader-logo-width: calc(39 * var(--px));
    --site-loader-logo-height: calc(52 * var(--px));
    --site-loader-gap: calc(12 * var(--px));
    --site-loader-padding: calc(32 * var(--px));
    --site-loader-small-badge: calc(48 * var(--px));
    --site-loader-small-ring: calc(3 * var(--px));
    --site-loader-small-logo-width: calc(22 * var(--px));
    --site-loader-small-logo-height: calc(29 * var(--px));
    --site-loader-bar: calc(3 * var(--px));
    --site-loader-float-top: calc(200 * var(--px));
    /* date-field: No design (owner, 2026-10-26: the date boxes of the browser showed mm/dd/yyyy): PersianDateField, a day of the Persian calendar in the forms of the management, and TimeSelect beside it. */
    --date-field-min-width: calc(140 * var(--px));
    --date-field-gap: calc(8 * var(--px));
    --date-field-icon: calc(16 * var(--px));
    --date-field-panel-width: calc(360 * var(--px));
    --date-field-panel-offset: 0;
    --date-field-panel-padding: calc(16 * var(--px));
    --date-field-panel-radius: calc(22 * var(--px));
    --date-field-head-gap: calc(8 * var(--px));
    --date-field-turn: calc(40 * var(--px));
    --date-field-arrow: calc(12 * var(--px));
    --date-field-day: calc(44 * var(--px));
    --date-field-day-gap: calc(2 * var(--px));
    --date-field-day-radius: calc(12 * var(--px));
    --date-field-ring: calc(2 * var(--px));
    --date-field-foot-gap: calc(16 * var(--px));
    /* ticket-thread: No design (R5, DECISIONS 33): TicketThread, the conversation of a ticket with its files and the field to write in, on the page of a ticket of the profile and of the panel. */
    --ticket-thread-gap: calc(10 * var(--px));
    --ticket-thread-list-padding: calc(10 * var(--px));
    --ticket-thread-bubble-padding-block: calc(9 * var(--px));
    --ticket-thread-bubble-padding-inline: calc(12 * var(--px));
    --ticket-thread-bubble-radius: calc(14 * var(--px));
    --ticket-thread-bubble-max: 86%;
    --ticket-thread-meta-gap: calc(4 * var(--px));
    --ticket-thread-files-gap: calc(6 * var(--px));
    --ticket-thread-thumb: calc(96 * var(--px));
    --ticket-thread-file-height: calc(38 * var(--px));
    --ticket-thread-file-padding: calc(10 * var(--px));
    --ticket-thread-file-radius: calc(10 * var(--px));
    --ticket-thread-file-icon: calc(16 * var(--px));
    --ticket-thread-composer-gap: calc(8 * var(--px));
    --ticket-thread-composer-padding: calc(10 * var(--px));
    --ticket-thread-composer-radius: calc(12 * var(--px));
    --ticket-thread-field-min: calc(70 * var(--px));
    --ticket-thread-button-height: calc(40 * var(--px));
    --ticket-thread-button-padding: calc(18 * var(--px));
    --ticket-thread-button-radius: calc(10 * var(--px));
    --ticket-thread-attach-icon: calc(18 * var(--px));
    --ticket-thread-pending-height: calc(30 * var(--px));
    --ticket-thread-pending-padding: calc(10 * var(--px));
    --ticket-thread-empty-padding: calc(24 * var(--px));
    --ticket-thread-border: calc(1 * var(--px));
    /* ticket-page: No design (R5, DECISIONS 33): ProfileTicketPage, one ticket in the card of the tickets of the profile (#84, #216), and the pager of the list. */
    --ticket-page-padding: calc(16 * var(--px));
    --ticket-page-gap: calc(10 * var(--px));
    --ticket-page-head-gap: calc(6 * var(--px));
    --ticket-page-chip-height: calc(24 * var(--px));
    --ticket-page-chip-padding: calc(9 * var(--px));
    --ticket-page-chip-radius: calc(12 * var(--px));
    --ticket-page-thread-height: calc(430 * var(--px));
    --ticket-page-bottom: calc(110 * var(--px));
    --ticket-page-pager-top: 0;
    --ticket-page-pager-height: calc(32 * var(--px));
    --ticket-page-pager-gap: calc(12 * var(--px));
    --ticket-page-pager-padding: calc(14 * var(--px));
    --ticket-page-pager-radius: calc(10 * var(--px));
    --ticket-page-empty-top: 0;
    --ticket-page-top: calc(192 * var(--px));
    --ticket-page-panel-thread-height: calc(460 * var(--px));
    /* donation-pay: No design (R5, DECISIONS 33): the line under the button of «اهداء نذورات» (#226-228; 1:19592) that says why a payment could not start. */
    --donation-pay-problem-start: calc(29.22 * var(--px));
    --donation-pay-problem-top: calc(349 * var(--px));
    --donation-pay-problem-width: calc(283.35 * var(--px));
    /* donation-result: No design (R5, DECISIONS 33): DonationResultPage, where the gateway sends the person back (/donation/{id}), in the look of the cards of the profile. */
    --donation-result-width: calc(328 * var(--px));
    --donation-result-top: calc(20 * var(--px));
    --donation-result-bottom: calc(110 * var(--px));
    --donation-result-padding: calc(20 * var(--px));
    --donation-result-gap: calc(12 * var(--px));
    --donation-result-radius: calc(16 * var(--px));
    --donation-result-mark: calc(58 * var(--px));
    --donation-result-mark-icon: calc(28 * var(--px));
    --donation-result-fact-gap: calc(8 * var(--px));
    --donation-result-button-height: calc(42 * var(--px));
    --donation-result-button-padding: calc(18 * var(--px));
    --donation-result-button-radius: calc(10 * var(--px));
    /* chart: No design: the charts of the panel, finer than Final.pdf and in the look of the site (owner, 2026-11-01; DECISIONS 42). Seven series, checked with the validator of the dataviz skill; every value is also written beside its mark */
    --chart-card-min: calc(280 * var(--px));
    --chart-gap: calc(14 * var(--px));
    --chart-icon-box: calc(38 * var(--px));
    --chart-icon: calc(20 * var(--px));
    --chart-ring: calc(132 * var(--px));
    --chart-ring-gap: calc(14 * var(--px));
    --chart-legend-row: calc(28 * var(--px));
    --chart-swatch: calc(10 * var(--px));
    --chart-bar: calc(10 * var(--px));
    --chart-plot-height: calc(230 * var(--px));
    --chart-plot-min-width: calc(640 * var(--px));
    --chart-column-bar: calc(15 * var(--px));
    --chart-tooltip: calc(160 * var(--px));
    /* choice-ring: One radio for the whole site (owner, 2026-10-28: «بعضی ها بیضی شدن بعضیا مرکز دایره نیستن»; 2026-10-30: «رادیو باتن های سامانه ... همشون رو درست کن»). The desktop frames agree (#13, #24, #99, #212, the filters and the request: a circle of 30 with a ring of 3 and the dot 5.12 inside its edge); the phone frames drew 12.68 to 13.85 with rings of 1 or 2 and dots 2.66 to 3.41 inside (the request had no dot of its own and took the desktop's, a dot of 2.7). Every radio has the ring of #24 and of its phone frame 1:20060. ChoiceRing; DECISIONS 36.6. */
    --choice-ring-size: calc(13.7 * var(--px));
    --choice-ring-border: calc(2 * var(--px));
    --choice-ring-dot: calc(3.41 * var(--px));
    /* tick-mark: One box to tick for the whole site (owner, 2026-10-30: like elements have one look; DECISIONS 36.8). The frames drew the box of a form 32.6 (the request, the details, the filters) and the box of a place in an offer 36.42; the box of a whole ceremony 48.67 in the lists and 58.38 on its page; on a phone 20.4, 19.61 and 27.84. Ticked, the box is filled with the colours of the role and carries a white tick (#40 to #58), everywhere. The rounded square of the drawings is drawn by CSS (its corners are 32 % of its side). TickMark; TickBox places it in its button. */
    --tick-mark-size: calc(20.4 * var(--px));
    --tick-mark-large: calc(27.84 * var(--px));
    --tick-mark-border: calc(1.6 * var(--px));
    /* heading-dot: One dot before a heading (owner, 2026-10-30: like elements have one look; DECISIONS 36.9). The frames drew it 15.6 before the headings of the pages and 10.91 before those of the sheets; on a phone 7 × 5, 7 × 8, 7 × 7, 7.74 and 8. It is the dot of the pages, and 8 on a phone. StatusDot (Heading). */
    --heading-dot-size: calc(8 * var(--px));
    /* site-button: One button for the whole site (owner, 2026-10-30: like elements have one look; DECISIONS 36.10). The frames drew the buttons of the forms and the sheets 86.95 high on the desktop (52 of them) and from 46.97 to 47.44 on a phone, with corners of 8 to 30 and the label placed from its start; the buttons inside a card 51.71 and 32.91. The normal button is the one of the forms (#226: AppButton), the small one the one of the cards (#111); the label stands in the middle. Filled in the colours of the role (primary), outlined (secondary), red (danger), grey while it waits (inactive). wwwroot/css/buttons.css. */
    --site-button-height: calc(47 * var(--px));
    --site-button-small-height: calc(36 * var(--px));
    --site-button-radius: calc(15 * var(--px));
    --site-button-small-radius: calc(10 * var(--px));
    --site-button-border: calc(1 * var(--px));
    --site-button-padding: calc(14 * var(--px));
    --site-button-angle: 246.37deg;
    --site-button-small-padding: calc(8 * var(--px));
    /* choice-word: The word of a choice (owner, 2026-10-30: like elements have one look; DECISIONS 36.11). The frames placed every word in a box of its own, 6 to 28 from its box on a phone and up to 2 off its middle; the word now stands one gap after its box (tick-mark, choice-ring), in the middle of its height, in the type most of them had (17 medium; 10 regular on a phone). wwwroot/css/choices.css. */
    --choice-word-gap: calc(7 * var(--px));
    /* error-page: No design (owner, 2026-10-28: «صفحه های ارور http»; DECISIONS 36.13): the pages of errors, made of the tokens of the site in the flow of the page. ErrorPage; docker/nginx/errors/50x.html. */
    --error-page-width: calc(360 * var(--px));
    --error-page-gap: calc(12 * var(--px));
    --error-page-padding-top: calc(56 * var(--px));
    --error-page-padding-inline: calc(16 * var(--px));
    --error-page-padding-bottom: calc(120 * var(--px));
    --error-page-code: calc(88 * var(--px));
    --error-page-button: calc(120 * var(--px));
    /* rich-text: No design: the text of the editor of posts and pages (owner, 2026-10-28 and 2026-10-30; Final.pdf P57, P58; DECISIONS 37). wwwroot/css/rich-text.css. */
    --rich-text-block-gap: calc(8 * var(--px));
    --rich-text-indent: calc(18 * var(--px));
    --rich-text-cell: calc(6 * var(--px));
    --rich-text-editor-height: calc(180 * var(--px));
    /* stat-tile: No design: the pages of the sessions of the panel, finer than Final.pdf P3 to P19 in the look of the site (DECISIONS 43). The figures over a page. */
    --stat-tile-min: calc(150 * var(--px));
    --stat-tile-padding: calc(10 * var(--px));
    --stat-tile-gap: calc(8 * var(--px));
    --stat-tile-mark: calc(30 * var(--px));
    /* session: No design: the pages of the sessions of the panel, finer than Final.pdf P3 to P19 in the look of the site (DECISIONS 43). The card of a ceremony and the people of «ارسال به». */
    --session-card-min: calc(300 * var(--px));
    --session-gap: calc(10 * var(--px));
    --session-padding: calc(14 * var(--px));
    --session-line-gap: calc(6 * var(--px));
    --session-line-mark: calc(14 * var(--px));
    --session-person-gap: calc(4 * var(--px));
    --session-person-padding: calc(6 * var(--px));
    --session-avatar: calc(30 * var(--px));
    --session-column-min: calc(280 * var(--px));
    --session-column-height: calc(260 * var(--px));
    /* manage-popup: No design: the pages of the sessions of the panel, finer than Final.pdf P3 to P19 in the look of the site (DECISIONS 43). The white sheet of a popup of the panel. */
    --manage-popup-width: calc(340 * var(--px));
    --manage-popup-wide: calc(340 * var(--px));
    --manage-popup-margin: calc(10 * var(--px));
    --manage-popup-padding: calc(14 * var(--px));
    --manage-popup-gap: calc(10 * var(--px));
    --manage-popup-close: calc(28 * var(--px));
    /* report: No design: the column filters of the grids of the reports, Final.pdf P64 in the look of the site (DECISIONS 49). */
    --report-filter-min: calc(80 * var(--px));
    --report-filter-height: calc(32 * var(--px));
  }
}