/* ETHERSEA · Vessel */
.page-vessel .deck { padding: 120px 56px 60px; max-width: 1440px; margin: 0 auto; }

.vessel-stage {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.page-title {
  font-size: clamp(60px, 8vw, 120px);
  margin: 8px 0 18px;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--chart);
}
.left .lede { font-size: 15.5px; line-height: 1.55; color: var(--chart-dim); margin-bottom: 28px; max-width: 56ch; }
.vessel-spec {
  grid-template-columns: 130px 1fr 130px 1fr;
  gap: 10px 16px;
  padding: 18px 20px;
  border: 1px solid var(--hairline-strong);
  background: rgba(5,10,20,0.55);
  margin-bottom: 28px;
}
.remark p {
  font-family: var(--captain);
  font-variant: small-caps;
  font-style: italic;
  font-size: 20px;
  line-height: 1.3;
  color: var(--chart);
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}

.vessel-canvas-wrap {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  background: radial-gradient(circle at 50% 40%, rgba(45,200,210,0.06), rgba(5,10,20,0.7));
  border: 1px solid var(--hairline-strong);
  cursor: grab;
}
.vessel-canvas-wrap:active { cursor: grabbing; }
.vessel-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
.canvas-hud {
  position: absolute;
  top: 14px; left: 16px; right: 16px;
  display: flex; justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--chart-dim);
  pointer-events: none;
}
.callouts {
  position: absolute;
  top: 0; right: -160px;
  width: 160px; height: 100%;
  list-style: none; padding: 0; margin: 0;
  pointer-events: none;
  font-size: 10px;
  letter-spacing: 0.14em;
}
.callouts li {
  position: absolute; left: 0;
  top: var(--y); transform: translateY(-50%);
  display: flex; align-items: center; gap: 10px;
  color: var(--chart-dim);
}
.callouts li b {
  color: var(--beacon);
  font-weight: 400;
  font-size: 11px;
}
.callouts li::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 50%;
  width: 24px;
  border-top: 1px dashed var(--beacon);
  opacity: 0.6;
}

/* Pressure ring (conic gradient) */
.ring-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  margin-top: 22px;
  align-items: center;
}
.ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ring {
  --p: 50;
  width: 200px; height: 200px;
  border-radius: 50%;
  background:
    conic-gradient(
      from -90deg,
      var(--sonar) 0deg,
      var(--beacon) calc(var(--p) * 2.7deg),
      var(--rust) calc(var(--p) * 3.6deg),
      rgba(232,238,242,0.06) calc(var(--p) * 3.6deg),
      rgba(232,238,242,0.06) 360deg
    );
  position: relative;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 20px rgba(232, 197, 72, 0.15));
}
.ring::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--abyss);
  border: 1px solid var(--hairline-strong);
}
.ring::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  pointer-events: none;
}
.ring-cap { position: relative; z-index: 1; text-align: center; }
.r-val {
  font-family: var(--captain);
  font-variant: small-caps;
  font-size: 38px;
  color: var(--beacon);
  letter-spacing: 0.02em;
}
.r-val span { font-family: var(--mono); font-size: 12px; margin-left: 4px; color: var(--chart-dim); }
.r-lbl { font-size: 9px; letter-spacing: 0.22em; color: var(--chart-dim); margin-top: 4px; }
.ring-cap-label { font-size: 10px; letter-spacing: 0.22em; color: var(--chart-dim); }

.ring-kv {
  grid-template-columns: 80px 1fr 80px 1fr;
  gap: 8px 14px;
  padding: 14px 18px;
  border: 1px solid var(--hairline-strong);
  background: rgba(5,10,20,0.55);
}

/* Diagram */
.diagram { margin-top: 80px; padding-bottom: 60px; }
.diagram .strip { padding: 0; }
.diagram header { margin-bottom: 28px; }
.diagram header h2 { font-size: clamp(36px,4vw,52px); margin: 4px 0 0; color: var(--chart); }
.schematic {
  border: 1px solid var(--hairline-strong);
  background: rgba(5,10,20,0.55);
  padding: 60px 40px 50px;
  overflow: visible;
}
.schematic svg { width: 100%; height: auto; overflow: visible; }

@media (max-width: 1100px) {
  .vessel-stage { grid-template-columns: 1fr; }
  .callouts { display: none; }
  .ring-row { grid-template-columns: 1fr; }
}