.water-dev-deck {
  position: fixed;
  z-index: 20;
  top: max(14px, env(safe-area-inset-top));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: var(--panel-width, 440px);
  max-width: calc(100% - 56px);
  color: #183b4c;
  font-size: 13px;
}
.developer-panel[data-side="right"] { right: max(14px, env(safe-area-inset-right)); }
.developer-panel[data-side="left"] { left: max(14px, env(safe-area-inset-left)); }
.developer-panel-body {
  height: 100%;
  padding: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  border: 1px solid #b6d5da;
  border-radius: 18px;
  background: rgb(245 250 247 / 97%);
  box-shadow: 0 12px 60px rgb(12 40 72 / 28%);
  scrollbar-width: thin;
}
.developer-panel.is-collapsed { width: 0; }
.developer-panel.is-collapsed .developer-panel-body { visibility: hidden; pointer-events: none; }
.water-dev-deck .developer-panel-tab { position: absolute; z-index: 2; top: 40%; width: 34px; padding: 10px 7px; writing-mode: vertical-rl; cursor: ew-resize; touch-action: none; border-radius: 7px 0 0 7px; box-shadow: 0 4px 16px #183b4c33; }
.developer-panel[data-side="right"] .developer-panel-tab { left: -34px; }
.developer-panel[data-side="left"] .developer-panel-tab { right: -34px; top: 60%; border-radius: 0 7px 7px 0; }
.developer-panel-resize { position: absolute; z-index: 1; top: 8px; bottom: 8px; width: 10px; cursor: ew-resize; touch-action: none; }
.developer-panel[data-side="right"] .developer-panel-resize { left: -5px; }
.developer-panel[data-side="left"] .developer-panel-resize { right: -5px; }
.developer-panel-resize:hover, .developer-panel-resize:focus-visible { background: #268c9355; outline: 2px solid #268c93; border-radius: 5px; }
.developer-panel.is-collapsed .developer-panel-resize { display: none; }
.deck-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.deck-eyebrow { font-size: 10px; letter-spacing: .13em; color: #487484; }
.deck-heading h1 { margin: 4px 0 0; font-size: 23px; font-weight: 600; }
.deck-intro, .deck-note { font-size: 12px; line-height: 1.5; color: #486572; }
.deck-content-error { color: #a53624; overflow-wrap: anywhere; }
.deck-actions, .water-dev-deck .water-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; justify-content: flex-start; }
.water-dev-deck button {
  min-height: 34px; padding: 6px 10px; border: 1px solid #accdd0;
  border-radius: 7px; background: #e3f1ec; color: #183b4c; font-size: 12px;
}
.water-dev-deck button:hover:not(:disabled) { background: #cde9e3; }
.water-dev-deck button:disabled { opacity: .5; cursor: default; }
#water-copy, #chart-copy { background: #225c70; color: white; border-color: #225c70; }
#water-copy:hover, #chart-copy:hover { background: #174659; }
.water-stats { display: block; padding: 10px; background: #e8f0f0; border-radius: 8px; white-space: pre-line; font: 11px/1.7 Consolas, monospace; font-variant-numeric: tabular-nums; }
.water-stats + .water-stats { margin-top: 8px; }
.water-mode-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 16px; }
.water-dev-deck .water-mode-tabs button { padding: 9px 5px; line-height: 1.4; }
.water-dev-deck .water-mode-tabs button[aria-selected="true"] { background: #225c70; border-color: #225c70; color: white; }
.water-dev-deck .water-mode-tabs button:focus-visible { outline: 2px solid #268c93; outline-offset: 2px; }
.water-mode-status { margin: 10px 0 0; font-size: 12px; font-weight: 600; line-height: 1.5; }
.pane-actions { display: contents; }
.water-dev-deck .pane-actions button { background: transparent; }
.water-group { margin: 8px 0; border: 1px solid #c3d9da; border-radius: 9px; overflow: clip; }
.water-group > summary { display: flex; align-items: center; gap: 9px; padding: 13px 12px; cursor: pointer; list-style: none; background: #e6f0ed; font-weight: 650; }
.water-group > summary::-webkit-details-marker { display: none; }
.water-group > summary::before { content: "+"; width: 12px; color: #3b7b80; font: 18px/1 Consolas, monospace; }
.water-group[open] > summary::before { content: "−"; }
.water-group > summary:hover { background: #dcece7; }
.water-group > summary:focus-visible { outline: 2px solid #268c93; outline-offset: -3px; }
.group-count { margin-left: auto; font-size: 11px; font-weight: 400; color: #536e79; }
.water-group-body { padding: 0 12px; }
.deck-pane > .water-group-body { padding-bottom: 12px; }
.deck-pane :is(.water-stats, .water-export) { margin-top: 12px; }
.group-description { margin: 11px 0; color: #536e79; font-size: 11px; line-height: 1.45; }
.water-parameter { padding: 13px 0; border-top: 1px solid #cddfe0; }
.parameter-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.parameter-heading > label:first-child { font-weight: 650; }
.random-enable { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.water-dev-deck input[type="checkbox"] { accent-color: #ba7922; }
.water-parameter p { margin: 6px 0 8px; color: #536e79; font-size: 11px; line-height: 1.45; }
/* Both sliders share one column and the same 14px thumb travel. */
.parameter-value { --slider-thumb-width: 14px; display: grid; grid-template-columns: minmax(0, 1fr) 65px 42px; align-items: center; column-gap: 8px; }
.parameter-value > span { font-size: 11px; }
.water-dev-deck input[type="number"] { width: 65px; min-height: 29px; padding: 3px 5px; border: 1px solid #adc7ce; border-radius: 5px; background: #fff; color: #183b4c; font: inherit; }
.water-dev-deck input[type="range"] { width: 100%; margin: 0; height: 25px; accent-color: #268c93; cursor: pointer; }
/* One full-width painted rail and identical handle travel for both rows. */
.parameter-rail { grid-column: 1; position: relative; min-width: 0; height: 25px; }
.parameter-rail::before { content: ""; position: absolute; z-index: 0; top: 50%; left: 0; right: 0; transform: translateY(-50%); height: 4px; border-radius: 3px; background: var(--slider-track); pointer-events: none; }
.value-rail { --slider-track: #268c93; }
.random-rail {
  margin-top: 3px;
  --range-start-position: calc(var(--slider-thumb-width) / 2 + (100% - var(--slider-thumb-width)) * var(--range-start));
  --range-end-position: calc(var(--slider-thumb-width) / 2 + (100% - var(--slider-thumb-width)) * var(--range-end));
  --slider-track: linear-gradient(to right, #dbe4e4 0 var(--range-start-position), #d9a64e var(--range-start-position) var(--range-end-position), #dbe4e4 var(--range-end-position) 100%);
}
.parameter-rail input[type="range"] { position: absolute; z-index: 1; inset: 0; width: 100%; margin: 0; appearance: none; box-sizing: border-box; min-width: 0; padding: 0; border: 0; background: transparent; }
.parameter-rail input::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.parameter-rail input::-webkit-slider-thumb { appearance: none; box-sizing: border-box; width: var(--slider-thumb-width); }
.parameter-rail input::-moz-range-track { height: 4px; background: transparent; }
.parameter-rail input::-moz-range-thumb { box-sizing: border-box; width: var(--slider-thumb-width); }
.value-rail input::-webkit-slider-thumb { height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: #268c93; }
.value-rail input::-moz-range-thumb { height: 14px; border: 0; border-radius: 50%; background: #268c93; }
.random-rail input[type="range"] { pointer-events: none; touch-action: none; }
.random-rail input::-webkit-slider-thumb { height: 18px; margin-top: -7px; border: 2px solid #f9f3e8; border-radius: 4px; background: #aa6b17; pointer-events: auto; cursor: ew-resize; }
.random-rail input::-moz-range-thumb { height: 18px; border: 2px solid #f9f3e8; border-radius: 4px; background: #aa6b17; pointer-events: auto; cursor: ew-resize; }
.parameter-rail input:focus-visible { z-index: 2; }
.random-numbers { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.random-numbers label { display: flex; align-items: center; gap: 6px; }
.water-parameter[data-random="false"] :is(.random-rail, .random-numbers) { opacity: .4; }
.random-rail input:disabled::-webkit-slider-thumb { pointer-events: none; }
.random-rail input:disabled::-moz-range-thumb { pointer-events: none; }
.water-dev-deck .site-header { position: static; padding: 12px 0 0; pointer-events: auto; }
.water-dev-deck .header-center { gap: 8px; }
.deck-status { min-height: 1.5em; font-size: 12px; line-height: 1.5; }
.water-export { display: block; font-size: 12px; }
.water-export textarea { display: block; width: 100%; margin-top: 8px; resize: vertical; font: 11px/1.5 Consolas, monospace; }
.water-export textarea[aria-invalid="true"] { border-color: #a53624; }
@media (pointer: coarse) { .water-dev-deck button { min-height: 44px; } }
@media (max-width: 480px) { .developer-panel-body { padding: 14px; } }