

.ar-root {

  --ar-paper: var(--paper, #F8F6F2);

  --ar-plate: var(--stonelight, #EFEAE3);

  --ar-ink: var(--red110, #4E251B);

  --ar-muted: var(--ink-soft, #6B4A3E);

  --ar-line: var(--stone-mid, #D8CFC5);

  --ar-flare: var(--flare-ink, #BF3719);

  --ar-ember: var(--ember, #872823);

  --ar-blush: var(--blush, #F0E4DC);

  color: var(--ar-ink);

}



.ar-head {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 12px;

  margin: 0 0 12px;

}

.ar-title { font-size: 24px; font-weight: 500; margin: 0; line-height: 1.1; }



.ar-sec { padding: 0; min-width: 0; margin-bottom: 14px; }

.ar-sec h3 {

  font-size: 10px;

  letter-spacing: .1em;

  text-transform: uppercase;

  color: var(--ar-muted);

  font-weight: 500;

  margin: 0 0 8px;

}



.ar-chartcard { padding-top: 12px; margin-bottom: 16px; }

.ar-pins { margin-bottom: 14px; }

.ar-plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }

.ar-col { min-width: 0; display: flex; flex-direction: column; }

.ar-col .ar-fold { margin-top: 2px; }

.ar-stat { background: var(--ar-plate); border-radius: 16px; padding: 12px 15px 13px; }

.ar-stat-title {

  display: block;

  font-size: 10px;

  letter-spacing: .1em;

  font-weight: 500;

  color: var(--ar-muted);

  margin-bottom: 6px;

}

.ar-stat p { font-size: 13px; line-height: 1.4; margin: 6px 0 0; max-width: 46ch; text-wrap: pretty; }

.ar-pin { box-shadow: 0 6px 20px rgba(40, 18, 12, .07); }

.ar-chart-sec { margin-bottom: 0; }

.ar-sr {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0 0 0 0);

  clip-path: inset(50%);

  white-space: nowrap;

}

.ar-fig {

  display: block;

  color: var(--ar-flare);

  font-family: "Borna", "DM Sans", ui-sans-serif, system-ui, sans-serif;

  font-size: clamp(34px, 3.6vw, 44px);

  font-weight: 500;

  line-height: .95;

  letter-spacing: -.035em;

  white-space: nowrap;

  font-variant-numeric: tabular-nums;

}



.ar-details {

  margin: 0;

  display: grid;

  grid-template-columns: .7fr 1fr 1.7fr .9fr;

  border-top: 1px solid var(--ar-line);

  border-bottom: 1px solid var(--ar-line);

}

.ar-detail { min-width: 0; padding: 8px 14px 8px 0; }

.ar-detail dt { font-size: 10px; color: var(--ar-muted); letter-spacing: .04em; }

.ar-detail dd { margin: 2px 0 0; font-size: 13px; line-height: 1.3; overflow-wrap: break-word; }



.ar-fold { border-top: 1px solid var(--ar-line); margin-bottom: 0; }

.ar-fold + .ar-fold { margin-top: 0; }

.ar-fold summary {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 12px;

  padding: 10px 0 9px;

  cursor: pointer;

  list-style: none;

}

.ar-fold summary::-webkit-details-marker { display: none; }

.ar-fold summary h3 { margin: 0; }

.ar-fold summary:focus-visible { outline: 2px solid var(--ar-flare); outline-offset: 2px; }

.ar-fold summary:hover .ar-show { color: var(--ar-flare); }

.ar-foldcue {

  flex: none;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  color: var(--ar-ember);

}

.ar-show { font-size: 13px; color: inherit; }

.ar-chev {

  display: block;

  transition: transform .42s cubic-bezier(.22,.61,.36,1);

}

.ar-fold[open] .ar-chev { transform: rotate(180deg); }

.ar-foldbody {

  display: grid;

  grid-template-rows: 0fr;

}

.ar-foldbody[data-anim] {

  transition: grid-template-rows .42s cubic-bezier(.22,.61,.36,1);

}

.ar-foldbody.is-open { grid-template-rows: 1fr; }

.ar-foldinner { overflow: hidden; min-height: 0; }

.ar-fold .ar-list { padding-bottom: 8px; }

.ar-list { margin: 0; padding: 0; list-style: none; }

.ar-list li {

  display: grid;

  grid-template-columns: 13px minmax(0, 1fr);

  gap: 8px;

  align-items: start;

  padding: 7px 0;

  border-top: 1px solid var(--ar-line);

  font-size: 14px;

  line-height: 1.35;

  text-wrap: pretty;

}

.ar-list li[hidden] { display: none; }

.ar-glyph {

  width: 7px;

  height: 7px;

  margin: 6px 0 0 2px;

  border: 1px solid var(--ar-flare);

  transform: rotate(45deg);

}



.ar-table-wrap { overflow-x: auto; }

.ar-table { border-collapse: collapse; table-layout: fixed; width: 100%; font-size: 12px; }

.ar-table th:nth-child(1) { width: 16%; }

.ar-table th:nth-child(2) { width: 19%; }

.ar-table th:nth-child(3) { width: 19%; }

.ar-table th:nth-child(4) { width: 18%; }

.ar-table th:nth-child(5) { width: 28%; }

.ar-table th {

  text-align: left;

  font-weight: 500;

  font-size: 9px;

  line-height: 1.25;

  letter-spacing: .06em;

  text-transform: uppercase;

  color: var(--ar-muted);

  padding: 0 8px 6px 0;

  border-bottom: 1px solid var(--ar-line);

  vertical-align: bottom;

}

.ar-table td {

  padding: 7px 8px 7px 0;

  border-bottom: 1px solid var(--ar-line);

  line-height: 1.3;

  vertical-align: top;

  overflow-wrap: break-word;

  font-variant-numeric: tabular-nums;

}

.ar-table tr:last-child td { border-bottom: 0; }



.ar-chart-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 7px 18px; margin-bottom: 2px; }

.ar-chart-head h4 { font-size: 14px; font-weight: 500; margin: 0; }

.ar-chart-caption { margin: 2px 0 0; font-size: 11px; line-height: 1.35; color: var(--ar-muted); }

.ar-chart-head { row-gap: 8px; }

.ar-key { display: flex; flex-wrap: wrap; gap: 5px 10px; margin: 0; padding: 0; list-style: none; font-size: 9px; color: var(--ar-muted); }

.ar-key li { display: flex; align-items: center; gap: 6px; }

.ar-key .k { width: 9px; height: 9px; border-radius: 2px; display: block; }

.ar-key .k-sub { background: var(--ar-flare); }

.ar-key .k-ret { background: var(--ar-ember); }

.ar-key .k-out { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ar-ink); }



.ar-chart-plot { position: relative; margin-top: 6px; }

.ar-chart svg { min-height: 250px; }

.ar-chart svg { width: 100%; height: auto; display: block; overflow: visible; }

.ar-grid { stroke: var(--ar-line); stroke-width: 1; }

.ar-ytick, .ar-xtick { font-size: 10px; fill: var(--ar-muted); font-family: inherit; }

.ar-axis { font-size: 10px; fill: var(--ar-muted); letter-spacing: .06em; font-family: inherit; }

.ar-sub { fill: var(--ar-flare); }

.ar-ret { fill: var(--ar-ember); }

.ar-hit { fill: transparent; }

.ar-out-line { fill: none; stroke: var(--ar-ink); stroke-width: 1.5; }

.ar-out-fill { fill: var(--ar-blush); opacity: .5; }

.ar-bar { cursor: default; }

.ar-bar:hover .ar-hit, .ar-bar:focus .ar-hit { fill: rgba(78, 37, 27, .06); }

.ar-bar:focus { outline: none; }

.ar-bar:focus-visible .ar-hit { fill: rgba(255, 85, 50, .12); }



.ar-tip {

  position: absolute;

  top: 4px;

  min-width: 170px;

  background: var(--ar-ink);

  color: var(--ar-paper);

  border-radius: 10px;

  padding: 8px 11px;

  font-size: 11px;

  line-height: 1.5;

  pointer-events: none;

  z-index: 2;

}

.ar-tip[hidden] { display: none; }



.ar-foot { font-size: 10px; line-height: 1.4; color: var(--ar-muted); margin: 10px 0 0; max-width: 88ch; }



.ar-acts { display: flex; align-items: center; gap: 10px; margin-top: 10px; }



.sam-box.sam-result-box { max-height: calc(100vh - 48px); }

.ar-root .ar-btn { margin: 0; padding: 10px 20px; }

.ar-said { font-size: 12px; color: var(--ar-muted); }



@media (max-width: 720px) {

  .sam-box.sam-result-box { max-height: calc(100vh - 24px); }

  .ar-title { font-size: 22px; }

  .ar-plates { grid-template-columns: minmax(0, 1fr); }

  .ar-stat { padding: 12px 14px; }

  .ar-fig { font-size: 34px; }

  .ar-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ar-detail { padding: 7px 10px 7px 0; }

  .ar-list li { font-size: 14px; gap: 6px; }

  .ar-table { min-width: 520px; font-size: 11px; }

  .ar-table th { font-size: 8px; }

  .ar-chart-head { display: block; }

  .ar-key { margin-top: 5px; }

  .ar-chart-plot { overflow-x: auto; }

  .ar-chart svg { min-width: 700px; }

  .ar-acts { flex-wrap: wrap; }

}



@media (max-width: 560px) {

  .ar-details { grid-template-columns: minmax(0, 1fr); }

}



.ar-list li,

.ar-table tbody tr,

.ar-stat {

  transition: transform .34s cubic-bezier(.22,.61,.36,1),

              box-shadow .34s cubic-bezier(.22,.61,.36,1),

              background-color .34s cubic-bezier(.22,.61,.36,1);

}

.ar-hover .ar-list li:hover,

.ar-hover .ar-table tbody tr:hover {

  transform: translateY(-2px);

  background-color: var(--ar-plate);

}

.ar-hover .ar-stat:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 20px rgba(40, 18, 12, .07);

}

.ar-root:not(.ar-hover) .ar-list li,

.ar-root:not(.ar-hover) .ar-table tbody tr,

.ar-root:not(.ar-hover) .ar-stat { transition: none; }

@media (prefers-reduced-motion: reduce) {

  .ar-list li, .ar-table tbody tr, .ar-stat { transition: none; }

  .ar-list li:hover, .ar-table tbody tr:hover, .ar-stat:hover { transform: none; }

}



@media (prefers-reduced-motion: reduce) {

  .ar-foldbody[data-anim], .ar-chev { transition: none; }

}



.ar-assess .ar-title { font-size: 34px; letter-spacing: -.025em; }

.ar-assess .ar-sec h3,

.ar-assess .ar-stat-title,

.ar-assess .ar-detail dt,

.ar-assess .ar-table th {

  font-size: 12px;

  letter-spacing: .16em;

  text-transform: uppercase;

}

.ar-assess .ar-sec h3 { margin-bottom: 10px; }

.ar-assess .ar-stat-title { margin-bottom: 8px; }

.ar-assess .ar-fig { font-size: clamp(40px, 4.4vw, 58px); }

.ar-assess .ar-stat { padding: 16px 18px 17px; }

.ar-assess .ar-stat p { font-size: 16px; line-height: 1.45; margin-top: 8px; }

.ar-assess .ar-detail { padding: 10px 14px 10px 0; }

.ar-assess .ar-detail dd { font-size: 16px; line-height: 1.35; margin-top: 4px; }

.ar-assess .ar-list li { font-size: 16px; line-height: 1.45; padding: 9px 0; }

.ar-assess .ar-glyph { margin-top: 7px; }

.ar-assess .ar-table { font-size: 15px; }

.ar-assess .ar-table th { line-height: 1.3; padding-bottom: 8px; }

.ar-assess .ar-table td { padding: 9px 10px 9px 0; }

.ar-assess .ar-chart-head h4 { font-size: 20px; }

.ar-assess .ar-chart-caption { font-size: 15px; }

.ar-assess .ar-key { font-size: 12px; letter-spacing: .04em; gap: 6px 14px; }

.ar-assess .ar-key .k { width: 11px; height: 11px; }

.ar-assess .ar-ytick,

.ar-assess .ar-xtick,

.ar-assess .ar-axis { font-size: 13px; }

.ar-assess .ar-tip { font-size: 15px; min-width: 210px; }

.ar-assess .ar-foot { font-size: 13px; line-height: 1.5; }

.ar-assess .ar-said { font-size: 15px; }

.ar-assess .ar-note {

  font-size: 15px;

  line-height: 1.5;

  color: var(--ar-muted);

  margin: 10px 0 0;

  max-width: 52ch;

  text-wrap: pretty;

}



.ar-assess .ar-benefits { border-top: 1px solid var(--ar-line); margin-top: 32px; padding-top: 32px; }

.ar-assess .ar-col .ar-benefits { margin-bottom: 0; }



.ar-assess .ar-head { margin-bottom: 28px; }

.ar-assess .ar-project { margin-bottom: 0; }

.ar-assess .ar-detail { padding: 14px 20px 14px 0; }

.ar-assess .ar-chartcard { padding-top: 56px; margin-bottom: 64px; }

.ar-assess .ar-pins { margin-bottom: 64px; }

.ar-assess .ar-plates { gap: 10px 40px; }

.ar-assess .ar-stat { padding: 36px; }

.ar-assess .ar-note { margin-top: 20px; }

.ar-assess .ar-list li { padding: 14px 0; }

.ar-assess .ar-chart-head { margin-bottom: 18px; }

.ar-assess .ar-table th { padding-bottom: 14px; }

.ar-assess .ar-table td { padding: 14px 14px 14px 0; }

.ar-assess .ar-foot { margin-top: 28px; }

.ar-assess .ar-acts { margin-top: 28px; gap: 14px; }



.ar-benhead { display: block; margin-bottom: 18px; }

.ar-benhead h3 { margin: 0; }

.ar-benicon { display: block; width: 64px; height: auto; margin: 0 0 14px; }



@media (max-width: 720px) {

  .ar-assess .ar-title { font-size: 28px; }

  .ar-assess .ar-fig { font-size: 40px; }

  .ar-assess .ar-table { font-size: 14px; }

  .ar-assess .ar-table th { font-size: 12px; }

  .ar-assess .ar-head { margin-bottom: 22px; }

  .ar-assess .ar-detail { padding: 12px 14px 12px 0; }

  .ar-assess .ar-chartcard { padding-top: 40px; margin-bottom: 44px; }

  .ar-assess .ar-pins { margin-bottom: 44px; }

  .ar-assess .ar-plates { gap: 40px; }

  .ar-assess .ar-stat { padding: 24px; }

  .ar-assess .ar-table td { padding: 12px 12px 12px 0; }

  .ar-benhead { margin-bottom: 16px; }

  .ar-benicon { width: 56px; margin-bottom: 12px; }

}



.ar-assess .ar-plates { grid-template-rows: auto auto auto; }

.ar-assess .ar-plates > .ar-col {

  display: grid;

  grid-row: span 3;

  grid-template-rows: subgrid;

  gap: 0;

}

@supports not (grid-template-rows: subgrid) {

  .ar-assess .ar-plates > .ar-col { display: flex; grid-row: auto; }

}

