.ohs-root {
  --ohs-bg: #f5f1e8;
  --ohs-panel: #fffdf8;
  --ohs-ink: #1d2420;
  --ohs-muted: #667068;
  --ohs-border: #d6cfc0;
  --ohs-field: #eee7da;
  --ohs-safe: #118a5b;
  --ohs-warn: #b7791f;
  --ohs-danger: #c2410c;
  --ohs-line: #2563eb;

  color: var(--ohs-ink);
}

.theme-dark .ohs-root {
  --ohs-bg: #111411;
  --ohs-panel: #191d18;
  --ohs-ink: #f4f1e8;
  --ohs-muted: #b9b5a8;
  --ohs-border: #3a4036;
  --ohs-field: #252a23;
  --ohs-safe: #37d391;
  --ohs-warn: #f5c451;
  --ohs-danger: #fb7b45;
  --ohs-line: #6ea8ff;
}

.ohs-shell {
  display: grid;
  grid-template-columns: minmax(17rem, 0.76fr) minmax(0, 1.24fr);
  gap: 0.8rem;
  width: 100%;
  padding: clamp(0.7rem, 2vw, 1rem);
  border: 1px solid var(--ohs-border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ohs-line), transparent 88%), transparent 38%),
    var(--ohs-bg);
}

.ohs-controls,
.ohs-results,
.ohs-risk,
.ohs-factors article,
.ohs-education,
.ohs-validation {
  border: 1px solid var(--ohs-border);
  border-radius: 8px;
  background: var(--ohs-panel);
}

.ohs-controls {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.75rem;
}

.ohs-units {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}

.ohs-controls fieldset {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0 0 0.65rem;
  border: 0;
  border-bottom: 1px solid var(--ohs-border);
}

.ohs-controls fieldset:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.ohs-controls legend,
.ohs-controls label > span,
.ohs-hero span,
.ohs-risk span,
.ohs-factors span,
.ohs-education span,
.ohs-validation span {
  color: var(--ohs-muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ohs-controls label {
  display: grid;
  gap: 0.25rem;
}

.ohs-tip span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ohs-tip small {
  display: grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--ohs-line);
  color: #fff;
  cursor: help;
}

.ohs-controls input,
.ohs-controls select,
.ohs-units button,
.ohs-secondary,
.ohs-report,
.ohs-optimize {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--ohs-border);
  border-radius: 4px;
  background: var(--ohs-field);
  color: var(--ohs-ink);
  font: inherit;
  font-weight: 760;
  padding: 0.48rem 0.55rem;
}

.ohs-controls select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ohs-muted) 50%),
    linear-gradient(135deg, var(--ohs-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 1.05rem) 50%,
    calc(100% - 0.72rem) 50%;
  background-repeat: no-repeat;
  background-size: 0.34rem 0.34rem;
  padding-right: 2.25rem;
}

.ohs-controls select option {
  background: var(--ohs-panel);
  color: var(--ohs-ink);
}

.ohs-controls label b {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem;
  align-items: center;
}

.ohs-controls label em {
  color: var(--ohs-muted);
  font-style: normal;
  font-weight: 850;
}

.ohs-units button,
.ohs-secondary,
.ohs-report,
.ohs-optimize {
  cursor: pointer;
}

.ohs-units button.active,
.ohs-report {
  border-color: var(--ohs-line);
  background: var(--ohs-line);
  color: #fff;
}

.ohs-controls input:focus,
.ohs-controls select:focus,
.ohs-units button:focus,
.ohs-secondary:focus,
.ohs-report:focus,
.ohs-optimize:focus {
  outline: 2px solid var(--ohs-safe);
  outline-offset: 1px;
}

.ohs-saved {
  margin: 0;
  color: var(--ohs-safe);
  font-size: 0.82rem;
  font-weight: 800;
}

.ohs-results {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(12rem, 1.05fr);
  gap: 0.65rem;
  min-width: 0;
  padding: 0.75rem;
}

.ohs-hero {
  display: grid;
  align-content: center;
  min-height: 12rem;
  padding: 0.9rem;
  border-radius: 6px;
  background:
    radial-gradient(circle at 75% 25%, color-mix(in srgb, var(--ohs-line), transparent 75%), transparent 32%),
    linear-gradient(135deg, var(--ohs-field), var(--ohs-panel));
}

.ohs-hero b {
  color: var(--ohs-safe);
  font-size: clamp(3.4rem, 10vw, 6.4rem);
  line-height: 0.92;
}

.ohs-root[data-risk="cautious"] .ohs-hero b {
  color: var(--ohs-warn);
}

.ohs-root[data-risk="supports"] .ohs-hero b {
  color: var(--ohs-danger);
}

.ohs-hero small {
  margin-left: 0.2rem;
  color: var(--ohs-muted);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
}

.ohs-tipline {
  margin: 0.35rem 0 0;
  color: var(--ohs-muted);
  font-weight: 760;
}

.ohs-vector {
  width: 100%;
  min-height: 12rem;
  border: 1px solid var(--ohs-border);
  border-radius: 8px;
  background: var(--ohs-panel);
}

.ohs-grid {
  fill: none;
  stroke: color-mix(in srgb, var(--ohs-border), transparent 25%);
  stroke-width: 1;
}

.ohs-vertical,
.ohs-base {
  fill: none;
  stroke: var(--ohs-muted);
  stroke-width: 3;
}

.ohs-part {
  fill: none;
  stroke: var(--ohs-ink);
  stroke-linecap: round;
  stroke-width: 12;
}

.ohs-overhang {
  fill: none;
  stroke: var(--ohs-safe);
  stroke-linecap: round;
  stroke-width: 12;
  transition: d 0.2s ease;
}

.ohs-root[data-risk="cautious"] .ohs-overhang {
  stroke: var(--ohs-warn);
}

.ohs-root[data-risk="supports"] .ohs-overhang {
  stroke: var(--ohs-danger);
}

.ohs-arc {
  fill: none;
  stroke: var(--ohs-line);
  stroke-width: 3;
}

.ohs-joint {
  fill: var(--ohs-line);
}

.ohs-angle-text {
  fill: var(--ohs-ink);
  font-size: 22px;
  font-weight: 850;
}

.ohs-risk,
.ohs-education,
.ohs-validation,
.ohs-factors article {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  padding: 0.65rem 0.7rem;
}

.ohs-risk {
  border-left: 5px solid var(--ohs-safe);
}

.ohs-root[data-risk="cautious"] .ohs-risk {
  border-left-color: var(--ohs-warn);
}

.ohs-root[data-risk="supports"] .ohs-risk {
  border-left-color: var(--ohs-danger);
}

.ohs-risk b,
.ohs-validation b {
  font-size: 1.15rem;
}

.ohs-factors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.ohs-factors article {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.ohs-factors article i {
  display: grid;
  place-items: center;
  grid-row: span 2;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ohs-line), transparent 84%);
  color: var(--ohs-line);
  font-style: normal;
}

.ohs-education {
  grid-column: 1 / -1;
}

.ohs-education p {
  margin: 0;
  line-height: 1.4;
}

.ohs-optimize {
  margin-top: 0.45rem;
  border-color: var(--ohs-warn);
  background: color-mix(in srgb, var(--ohs-warn), transparent 86%);
  color: var(--ohs-ink);
  font-weight: 900;
}

.ohs-optimize:hover {
  background: var(--ohs-warn);
  color: #16110a;
}

.ohs-report {
  grid-column: 1 / -1;
  font-weight: 900;
}

[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .ohs-shell,
  .ohs-results {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .ohs-shell {
    padding: 0.55rem;
  }

  .ohs-results {
    padding: 0.6rem;
  }

  .ohs-factors {
    grid-template-columns: 1fr;
  }

  .ohs-hero {
    min-height: 9rem;
  }
}