/* ── Герой ─────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-top: clamp(48px, 8vh, 96px);
  padding-bottom: clamp(56px, 9vh, 110px);
}
.hero h1 {
  /* Растянутое начертание — так красят надписи на борту: широко, тяжело,
     чтобы читалось с причала. */
  font-family: var(--disp);
  font-variation-settings: 'wdth' 122, 'wght' 830;
  font-size: clamp(38px, 6.2vw, 74px);
  line-height: .96;
  letter-spacing: -.03em;
  margin: 0 0 24px;
  /* Перенос отдаём браузеру, но просим уравнять строки: жёсткий <br>
     давал «The line you / must / not load past» — короткая строка
     посередине читается как опечатка вёрстки. */
  text-wrap: balance;
  max-width: 15ch;
}
.lede {
  font-size: clamp(16px, 1.35vw, 18.5px);
  color: var(--ink2);
  max-width: 44ch;
  margin: 0 0 34px;
}
.hero-do { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Прибор ────────────────────────────────────────────────────────── */
.gauge { margin: 0; }
.gauge-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.gauge-name, .gauge-state {
  font-family: var(--mono);
  font-variation-settings: 'wdth' 87.5, 'wght' 400;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .13em;
}
.gauge-name { color: var(--mute); }
.gauge-state {
  margin-left: auto;
  text-align: right;
  color: var(--over-hi);
  transition: color .45s;
}
/* Три состояния — три цвета, и недогруз НЕ красный. Одинаково тревожный
   вид у перегруза и простоя научил бы читать «плохо», но не «чем». */
.gauge-state.over { color: var(--over-hi); }
.gauge-state.good { color: var(--water-hi); }
.gauge-state.idle { color: var(--idle-hi); }

.plate {
  position: relative;
  aspect-ratio: 620 / 420;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--hull-hi) 0%, var(--hull) 46%, var(--pit) 100%);
  /* Крен под перегрузом. Судно с лишним грузом садится и заваливается —
     это тот же сигнал, что и красная вода, только его читают телом. */
  transform: rotate(var(--heel, 0deg));
  transform-origin: 50% 120%;
  transition: transform 1.6s cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 40px 90px -50px var(--shadow), inset 0 1px 0 var(--film-top);
}
.plate canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.marks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* ── ЦВЕТ РАЗМЕТКИ — СВОЙ, А НЕ ЛАТУНЬ ─────────────────────────────
   Разметка лежит ПОВЕРХ ВОДЫ, и спорить ей надо с водой, а не со
   страницей. В тёмной теме латунь светлее тёмной воды, в светлой —
   темнее глубокой; а в розовой роза оказалась поверх красной воды, и
   шкала слилась. Поэтому отдельная переменная: в двух темах это та же
   латунь, в розовой — глубокая слива. */
.marks .ladder path {
  stroke: var(--mark);
  stroke-width: 3;
  opacity: .5;
}
.marks .ladder .spine { stroke-width: 4; opacity: .35; }
/* Подпись самой черты — крупнее остальных и в два слова: число, по
   которому её узнают, и слово, объясняющее, что это. Одного числа мало:
   «100%» без «capacity» на шкале процентов ничего не добавляет. */
.marks .s-lab { font-size: 17px; opacity: .95; }
.marks .s-sub {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
}
.marks text {
  fill: var(--mark);
  font-family: var(--mono);
  font-size: 15px;
  font-variation-settings: 'wdth' 87.5, 'wght' 500;
  letter-spacing: .06em;
  opacity: .75;
}
.marks .disc circle {
  fill: none;
  stroke: var(--mark);
  stroke-width: 7;
}
.marks .theline {
  stroke: var(--mark);
  stroke-width: 7;
  stroke-linecap: round;
}
/* Пока залито выше черты — она горит. Гаснет сама, когда вода села. */
.plate.over .marks .disc { filter: drop-shadow(0 0 10px var(--over-glow)); }


/* ── Стеклянные окна показаний ─────────────────────────────────────── */
.reads {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(46%, 232px);
}
.read {
  padding: 11px 13px 12px;
  border-radius: 10px;
  /* Жидкое стекло: размытие того, что под ним, светлый верхний край и
     тонкая внутренняя окантовка. Работает только над водой — поэтому
     окна и стоят здесь, а не в тексте страницы. */
  background: linear-gradient(160deg, var(--film-hi), var(--film-lo));
  /* Насыщение убавлено: полтора раза усиливали красную воду под
     стеклом, и окно заливалось цветом вместо того, чтобы его смягчать. */
  backdrop-filter: blur(13px) saturate(115%);
    -webkit-backdrop-filter: blur(13px) saturate(115%);
  border: 1px solid var(--film-edge);
  box-shadow:
    0 12px 34px -18px var(--shadow-hard),
    inset 0 1px 0 var(--film-top-hi),
    inset 0 -1px 0 var(--film-top);
  /* Вылет: окно приходит сбоку, слегка повёрнутое, и садится на место.
     Задержка по --i, чтобы они приходили по одному, а не пачкой. */
  opacity: 0;
  transform: translateX(46px) rotate(2.6deg) scale(.94);
}
.reads.in .read {
  animation: shootIn .72s cubic-bezier(.16,.9,.3,1) forwards;
  animation-delay: calc(var(--i) * .13s);
}
@keyframes shootIn {
  70%  { opacity: 1; transform: translateX(-4px) rotate(-.5deg) scale(1.01); }
  100% { opacity: 1; transform: translateX(0) rotate(0) scale(1); }
}
/* Над перегруженной водой стекло темнее: белым по красному сквозь
   размытие числа читаются плохо, а это единственное, что тут читают. */
.plate.over .read {
  background: linear-gradient(160deg, var(--film-dark-hi), var(--film-dark-lo));
  border-color: var(--film-edge-hi);
}
.read-lab {
  display: block;
  font-family: var(--mono);
  font-variation-settings: 'wdth' 75, 'wght' 400;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--paper-72);
}
.read-num {
  display: block;
  font-family: var(--disp);
  font-variation-settings: 'wdth' 112, 'wght' 760;
  font-size: clamp(20px, 2.4vw, 29px);
  line-height: 1.12;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
  margin: 1px 0 2px;
}
.read-num.bad { color: var(--over-hi); }
.read-sub {
  display: block;
  font-family: var(--mono);
  font-variation-settings: 'wdth' 75, 'wght' 300;
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--paper-45);
}


/* ── Шкала под прибором ────────────────────────────────────────────────
   Ползунок родной: стрелки с клавиатуры, палец на телефоне и озвучивание
   достаются бесплатно и работают правильно. Свой div с обработчиками
   выглядел бы так же и потерял бы всё это.

   Полоса посередине — рабочий диапазон. Она нарисована ПОД ползунком и
   говорит, куда надо попасть, до того как человек начал вести. */
.dial {
  position: relative;
  margin-top: 16px;
  padding-top: 10px;
}
.dial-band {
  position: absolute;
  left: 41%;
  width: 18%;
  top: 10px;
  height: 22px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--water-band-hi), var(--water-band-lo));
  border-left: 1px solid var(--water-edge);
  border-right: 1px solid var(--water-edge);
  pointer-events: none;
}
.dial-in {
  position: relative;
  z-index: 1;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 22px;
  background: none;
  cursor: ew-resize;
  margin: 0;
}
/* Дорожка. Тонкая, латунная, с засечками по концам — приборная, а не
   системная синяя. */
.dial-in::-webkit-slider-runnable-track {
  height: 22px;
  background:
    linear-gradient(90deg, var(--over-edge), var(--brass-edge) 42%,
                    var(--water-edge) 50%, var(--brass-edge) 58%, var(--idle-edge)) no-repeat
      center / 100% 2px;
}
.dial-in::-moz-range-track {
  height: 22px;
  background:
    linear-gradient(90deg, var(--over-edge), var(--brass-edge) 42%,
                    var(--water-edge) 50%, var(--brass-edge) 58%, var(--idle-edge)) no-repeat
      center / 100% 2px;
}
/* Бегунок — латунная риска, как визир на приборе, а не круглая пуговица. */
.dial-in::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 22px;
  border: 0;
  border-radius: 2px;
  background: var(--brass);
  box-shadow: 0 0 0 1px var(--ring), 0 6px 16px -8px var(--shadow);
  cursor: ew-resize;
}
.dial-in::-moz-range-thumb {
  width: 12px;
  height: 22px;
  border: 0;
  border-radius: 2px;
  background: var(--brass);
  box-shadow: 0 0 0 1px var(--ring), 0 6px 16px -8px var(--shadow);
  cursor: ew-resize;
}
.dial-in:focus-visible { outline: none; }
.dial-in:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--brass-dim); }
.dial-in:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--brass-dim); }

.dial-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-family: var(--mono);
  font-variation-settings: 'wdth' 75, 'wght' 400;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--mute);
}
.dial-mid { color: var(--water-hi); }

/* Строка модели: из чего считаются показания. Прибор без подписанных
   величин — картинка; с ними это расчёт, который можно оспорить. */
.model {
  margin: 3px 0 0;
  font-family: var(--mono);
  font-variation-settings: 'wdth' 75, 'wght' 300;
  font-size: 9.5px;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--paper-45);
}
.model b { font-variation-settings: 'wdth' 75, 'wght' 600; color: var(--paper-72); }
.model-hint {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-variation-settings: 'wdth' 75, 'wght' 400;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--brass);
  transition: opacity .4s;
}
/* Гаснет, но место держит: без этого строка модели подпрыгивает ровно в
   тот момент, когда человек впервые взялся за прибор. */
.model-hint.gone { opacity: 0; }