.depth-landscape { max-width: 850px; margin: 2rem auto; color: #333; }
.depth-landscape .dl-live[hidden] { display: none; }
.depth-landscape .dl-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0 1rem; font-size: .9rem; }
.depth-landscape .dl-heading { margin-bottom: .4rem; }
.depth-landscape .dl-heading > :first-child { font-weight: 600; }
.depth-landscape .dl-accuracy { color: #666; font-variant-numeric: tabular-nums; }
.depth-landscape canvas { width: 100%; aspect-ratio: 1.8; display: block; cursor: grab; touch-action: pan-y; }
.depth-landscape canvas.dl-dragging { cursor: grabbing; touch-action: none; }
.depth-landscape canvas:focus-visible, .depth-landscape input:focus-visible { outline: 2px solid #267D6F; outline-offset: 4px; }
.depth-landscape .dl-control { display: block; max-width: 500px; margin: .2rem auto 0; padding: 0 1rem; font-size: .95rem; }
.depth-landscape .dl-control > span { display: flex; gap: .4rem; align-items: baseline; }
.depth-landscape .dl-control i { font-family: MJXZERO, MJXTEX, "Times New Roman", serif; }
.depth-landscape output { margin-left: auto; color: #267D6F; font-variant-numeric: tabular-nums; }
.depth-landscape input { display: block; width: 100%; height: 32px; margin: .25rem 0 0; accent-color: #267D6F; cursor: pointer; }
.depth-landscape .dl-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.depth-landscape .dl-fallback img { width: 100%; height: auto; }
.depth-landscape.dl-ready .dl-fallback { display: none; }
.normalization-simple .re-header h4 { display: none; }
.normalization-simple .re-header { justify-content: flex-end; margin-bottom: 0; }
.normalization-simple .re-panel-title { font-size: .95rem; }
.normalization-simple .re-controls { padding-top: 0; }
.gradient-scale { max-width: 680px; margin: 2rem auto; }
.gs-equation { display: flex; align-items: baseline; justify-content: center; min-height: 4.5rem; padding-top: 1.5rem; font: 1.75rem MJXZERO, MJXTEX, "Times New Roman", serif; font-variant-numeric: tabular-nums; }
.gs-equation > sup { align-self: flex-start; margin-top: .1rem; font-size: 1.15rem; }
.gs-equals { margin-inline: .55em; color: #65706c; }
.gs-value { color: #267D6F; }
.gs-value sup { font-size: .65em; }
.gradient-scale svg { display: block; width: 100%; height: auto; overflow: visible; }
.gs-grid { fill: none; stroke: #e4e9e6; stroke-width: 1; }
.gs-grid .gs-one { stroke: #9eaaa4; }
.gs-label { font: 13px system-ui, sans-serif; fill: #65706c; }
.gs-curve { fill: none; stroke: #44AA99; stroke-width: 2.5; }
.gs-point { fill: #44AA99; }
.gs-controls { display: none; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1rem; }
.gs-ready .gs-controls { display: grid; }
.gs-controls label { min-width: 0; font-size: .95rem; }
.gs-controls label > span { display: flex; align-items: baseline; gap: .35rem; }
.gs-controls output { margin-left: auto; color: #267D6F; font-variant-numeric: tabular-nums; }
.gs-controls i { font-family: MJXZERO, MJXTEX, "Times New Roman", serif; }
.gs-controls input { display: block; width: 100%; height: 32px; accent-color: #267D6F; cursor: pointer; }
.gs-controls input:focus-visible { outline: 2px solid #267D6F; outline-offset: 3px; }
@media (max-width: 600px) {
  .gs-controls { gap: 1rem; }
  .gs-controls label { font-size: .85rem; }
  .gs-equation { font-size: 1.65rem; }
  .depth-landscape canvas { aspect-ratio: 1.2; }
  .depth-landscape .dl-heading { padding-inline: 0; font-size: .82rem; }
  .depth-landscape .dl-control { padding-inline: 0; }
}
@media print {
  .depth-landscape .dl-live { display: none; }
  .depth-landscape.dl-ready .dl-fallback { display: block; }
}
.depth-diagram { max-width: 740px; margin: 2rem auto; }
.depth-diagram img { display: block; width: 100%; height: auto; }

@media (max-width: 600px) {
  .depth-diagram { max-width: 380px; }
}