.snow-intro {
  max-width: 930px;
  margin: 24px auto;
}
.snow-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 22px 0;
}
.snow-inputs label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
}
.snow-inputs input,
.snow-inputs select {
  width: 100%;
  min-height: 46px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}
.snow-inputs input:disabled {
  opacity: 0.45;
}
.snow-results-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.snow-results-grid div {
  padding: 18px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.snow-results-grid strong {
  display: block;
  font-size: 28px;
  color: var(--accent);
}
.snow-results-grid span {
  font-size: 14px;
}
#snow-cm-result {
  display: block;
  font-size: clamp(36px, 6vw, 56px);
  margin: 10px 0;
}
#snow-error {
  color: #e79050;
  min-height: 1.6em;
}
#snow-results[hidden] {
  display: none;
}
.snow-article {
  max-width: 940px;
  margin: 24px auto;
}
.snow-article h2 {
  margin: 28px 0 12px;
}
.snow-article p {
  margin: 12px 0;
  line-height: 1.75;
}
.snow-scenario-table {
  width: min(100%, 500px);
  margin: 18px auto;
  border-collapse: collapse;
}
.snow-scenario-table td,
.snow-scenario-table th {
  padding: 12px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 760px) {
  .snow-inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .snow-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .snow-inputs {
    grid-template-columns: 1fr;
  }
}
.upper-panel {
  margin-top: 28px;
}
.upper-note {
  padding: 16px;
  border-left: 4px solid var(--accent);
  background: var(--bg);
  border-radius: 8px;
  text-align: left;
}
.upper-details {
  margin: 18px 0 24px;
  text-align: left;
}
.upper-details summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 700;
  padding: 12px 0;
}
.upper-main-result {
  display: grid;
  gap: 5px;
  margin: 24px auto;
  max-width: 650px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.upper-main-result strong {
  font-size: clamp(32px, 5vw, 46px);
  color: var(--accent);
}
.upper-figure {
  max-width: 850px;
  margin: 25px auto;
}
.upper-figure svg {
  width: 100%;
  height: auto;
  display: block;
}
.upper-figure svg text {
  font:
    13px system-ui,
    sans-serif;
  fill: var(--text);
}
.upper-grid {
  stroke: var(--line);
  stroke-width: 1;
}
.upper-zero {
  stroke: var(--muted);
  stroke-dasharray: 3 4;
}
.upper-point {
  fill: var(--text);
  stroke: var(--panel);
  stroke-width: 2;
}
.upper-figure figcaption {
  font-size: 14px;
  color: var(--muted);
}
.upper-table-scroll {
  overflow-x: auto;
  margin: 24px auto;
  max-width: 850px;
}
.upper-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 430px;
}
.upper-table th,
.upper-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.upper-table caption {
  padding: 12px;
  font-size: 14px;
  text-align: left;
}
.sea-reading strong {
  color: var(--accent);
  font-size: 22px;
}
#upper-error {
  color: #b65024;
  min-height: 1em;
}
#upper-results[hidden] {
  display: none;
}