.profile-world {
  border: var(--line);
}

.water-toolbar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 46px;
  border-bottom: var(--line);
}

.water-toolbar p {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: .03em;
}

.water-status {
  flex: 0 0 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
}

.water-toggle {
  flex: 0 0 auto;
  min-width: 110px;
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-left: var(--line);
  border-radius: 0;
  background: var(--red);
  color: var(--black);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.water-toggle:hover { background: #f13c5e; }
.water-toggle:focus-visible { outline-offset: -5px; outline-color: var(--black); }

.water-stage {
  position: relative;
  width: 100%;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 2.4;
  min-height: 300px;
  max-height: 680px;
  background: #282532;
}

.water-poster,
.water-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.water-poster { object-fit: cover; }
.water-canvas {
  opacity: 0;
  cursor: crosshair;
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .5s ease;
}

.water-canvas.is-ready { opacity: 1; }
.water-canvas:focus-visible { outline-offset: -6px; }
.water-canvas[aria-disabled="true"] { cursor: default; }

.water-instruction {
  position: absolute;
  bottom: 18px;
  left: 20px;
  margin-right: 20px;
  color: #fff;
  font-size: 11px;
  letter-spacing: .04em;
  text-shadow: 0 1px 5px #000;
  pointer-events: none;
}

.water-toggle[hidden], .water-canvas[hidden], .water-instruction [hidden] { display: none; }
.profile-world .statement { padding: 22px 24px 26px; }
.profile-world .statement h3 { margin: 24px 0 18px; }
.profile-world .statement p { max-width: none; }
.profile-world[data-water-state="paused"] .water-status { background: transparent; border: 1px solid var(--red); }

@media (max-width: 720px) {
  .water-toolbar { min-height: 44px; }
  .water-toolbar p { gap: 8px; padding: 10px 12px; font-size: 9px; letter-spacing: 0; }
  .water-status { flex-basis: 6px; height: 6px; }
  .water-toggle { min-width: 82px; padding: 10px 12px; font-size: 10px; }
  .water-stage { aspect-ratio: 1.2; min-height: 300px; max-height: 440px; }
  .water-instruction { bottom: 14px; left: 14px; font-size: 9px; }
  .profile-world .statement { padding: 20px 18px 26px; }
  .profile-world .statement h3 { margin-top: 24px; font-size: clamp(34px, 10vw, 48px); }
  .profile-world .statement p { font-size: 12px; line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
  .water-canvas { transition: none; }
}