.slope-page { background: #f6f8f4; color: #1f3028; }
.slope-page .brand-symbol svg { width: 22px; height: 22px; }
.slope-skip { position: absolute; left: 12px; top: -80px; z-index: 10; background: #fff; padding: 10px 14px; color: #1f3028; }
.slope-skip:focus-visible { top: 12px; outline: 3px solid #a27422; outline-offset: 3px; }
.slope-main { max-width: 1020px; padding-block: 18px 64px; }
.slope-path { margin: 0 0 10px; color: #56675d; font-size: .86rem; }
.slope-path a { color: #285c43; }
.slope-main h1 { margin: 0; font-size: clamp(1.95rem, 4.6vw, 3rem); line-height: 1.07; letter-spacing: -.035em; }
.slope-lead { max-width: 62ch; margin: 10px 0 18px; font-size: 1rem; line-height: 1.48; color: #43594d; }
.slope-answer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; padding: 18px 22px; background: #fff; border: 1px solid #b9cdbd; border-left: 6px solid #2f6547; }
.slope-answer-title h2 { margin: 0 0 4px; font-size: 1.18rem; line-height: 1.2; }
.slope-answer-title p { max-width: 50ch; margin: 0; color: #486153; font-size: .9rem; line-height: 1.45; }
.slope-number { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.slope-number strong { font-variant-numeric: tabular-nums; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1; letter-spacing: -.045em; color: #1b5135; }
.slope-number span { font-size: .82rem; font-weight: 700; }
.slope-answer-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 8px; border-top: 1px solid #dce6dd; font-variant-numeric: tabular-nums; }
.slope-answer-row strong { font-size: 1.13rem; color: #1b5135; }
.slope-area, .slope-comparison { grid-column: 1 / -1; margin: 0; color: #405a4b; font-size: .92rem; line-height: 1.45; }
.slope-comparison { background: #edf4ed; padding: 8px 10px; }
.slope-comparison[hidden] { display: none; }
.slope-answer button { justify-self: start; align-self: center; background: #1f5138; color: white; border: 1px solid #1f5138; padding: 9px 13px; font: inherit; font-weight: 700; cursor: pointer; }
.slope-answer button:disabled { opacity: .5; cursor: not-allowed; }
.slope-answer button:not(:disabled) { touch-action: manipulation; }
.slope-answer button:not(:disabled):hover { background: #173f2d; border-color: #173f2d; }
.slope-answer button:not(:disabled):active { background: #123423; border-color: #123423; }
.slope-answer button:focus-visible, .slope-page input:focus-visible, .slope-page a:focus-visible { outline: 3px solid #a27422; outline-offset: 3px; }
.slope-answer #slope-copy-status { align-self: center; margin: 0; min-height: 1.2em; color: #43594d; font-size: .85rem; }
.slope-answer textarea { grid-column: 1 / -1; width: 100%; font: inherit; line-height: 1.4; }
.slope-answer textarea[hidden] { display: none; }
.slope-measure { margin-top: 24px; border-block: 1px solid #b9cdbd; padding: 18px 0 22px; }
.slope-measure-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; }
.slope-measure-heading h2 { margin: 0; font-size: 1.35rem; }
.slope-measure-heading p { max-width: 43ch; margin: 0; color: #43594d; font-size: .91rem; line-height: 1.45; }
.slope-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 16px 0; padding: 10px 0; border: 0; border-block: 1px solid #dbe3da; }
.slope-modes legend { float: left; margin-right: 18px; padding: 0; font-weight: 700; }
.slope-modes label { display: inline-flex; align-items: center; gap: 7px; font-size: .93rem; cursor: pointer; }
.slope-modes input { accent-color: #286b4e; width: 18px; height: 18px; margin: 0; }
.slope-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
.slope-mode-fields, .slope-common-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 175px); align-items: center; gap: 10px 16px; min-width: 0; }
.slope-mode-fields[hidden] { display: none; }
.slope-mode-fields label, .slope-common-fields label { display: flex; flex-wrap: wrap; gap: 4px 9px; justify-content: space-between; align-items: baseline; font-weight: 650; line-height: 1.35; }
.slope-common-fields label[hidden], .slope-common-fields input[hidden] { display: none !important; }
.slope-mode-fields label span, .slope-common-fields label span { font-weight: 500; color: #5d6a60; font-size: .82rem; }
.slope-mode-fields input, .slope-common-fields input { width: 100%; min-height: 42px; border: 1px solid #8fa998; border-radius: 2px; background: #fff; padding: 7px 10px; color: #1f3028; font: inherit; font-variant-numeric: tabular-nums; }
.slope-mode-fields small, .slope-common-fields small { grid-column: 1 / -1; color: #596b5e; line-height: 1.45; }
.slope-figure { margin: 25px 0 0; padding: 12px; border: 1px solid #c9d8cb; background: #fff; }
.slope-figure img { display: block; width: 100%; height: auto; }
.slope-figure figcaption { max-width: 86ch; margin: 10px 4px 2px; color: #526156; font-size: .91rem; line-height: 1.5; }
.slope-notes { margin-top: 28px; padding-top: 20px; border-top: 1px solid #c9d8cb; max-width: 87ch; }
.slope-notes h2 { margin: 0 0 10px; font-size: 1.4rem; }
.slope-notes p, .slope-related { margin: 0 0 12px; line-height: 1.6; }
.slope-notes a, .slope-related a { color: #245c40; text-underline-offset: 3px; }
.slope-example { border-top-color: #c5b289; }
.slope-related { max-width: 87ch; padding-top: 18px; border-top: 1px solid #c9d8cb; }
@media (max-width: 700px) {
  .slope-main { padding-block: 14px 46px; }
  .slope-answer { grid-template-columns: 1fr; padding: 15px 16px; gap: 8px; }
  .slope-number { justify-content: flex-start; }
  .slope-measure-heading { display: block; }
  .slope-measure-heading p { margin-top: 5px; }
  .slope-fields { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 390px) {
  .slope-lead { font-size: .93rem; }
  .slope-answer-title h2 { font-size: 1.08rem; }
  .slope-mode-fields, .slope-common-fields { grid-template-columns: 1fr; gap: 5px; }
  .slope-mode-fields input, .slope-common-fields input { margin-bottom: 6px; }
  .slope-modes legend { float: none; display: block; width: 100%; margin: 0 0 8px; }
}