.controller-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: calc(13px * var(--app-text-scale, 1));
}
.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; }
.controller-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 { border-radius: 0 7px 7px 0; }
.deck-folder-tabs { display: flex; gap: 6px; margin: 12px 0; }
.deck-folder-tabs button { flex: 1; }
.controller-deck .deck-folder-tabs button[aria-pressed="true"] { background: #225c70; color: white; }
.controller-deck [data-category][hidden] { display: none; }
.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: calc(10px * var(--app-text-scale, 1)); letter-spacing: .13em; color: #487484; }
.deck-heading h1 { margin: 4px 0 0; font-size: calc(23px * var(--app-text-scale, 1)); font-weight: 600; }
.deck-intro, .deck-note { font-size: calc(12px * var(--app-text-scale, 1)); line-height: 1.5; color: #486572; }
#left-deck [data-deck-text="intro"]:empty, #left-deck [data-deck-text="export-label"]:empty { display: none; }
.deck-content-error { color: #a53624; overflow-wrap: anywhere; }
.deck-actions, .controller-deck .deck-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; justify-content: flex-start; }
.controller-deck button {
  min-height: 34px; padding: 6px 10px; border: 1px solid #accdd0;
  border-radius: 7px; background: #e3f1ec; color: #183b4c; font-size: calc(12px * var(--app-text-scale, 1));
}
.controller-deck button:hover:not(:disabled) { background: #cde9e3; }
.controller-deck button:disabled { opacity: .5; cursor: default; }
#right-copy, #left-copy, #right-copy-all, #left-copy-all { background: #225c70; color: white; border-color: #225c70; }
#right-copy:hover, #left-copy:hover, #right-copy-all:hover, #left-copy-all:hover { background: #174659; }
.deck-copy-action { position: relative; display: flex; gap: 6px; }
.deck-copy-feedback {
  position: absolute; z-index: 3; top: calc(100% + 6px); left: 0;
  width: max-content; max-width: min(260px, calc(var(--panel-width, 440px) - 36px));
  padding: 8px 12px; border: 1px solid #166534; border-radius: 9px;
  background: #15803d; color: white; box-shadow: 0 4px 14px #16653440;
  font-size: calc(12px * var(--app-text-scale, 1)); font-weight: 600; line-height: 1.4; pointer-events: none;
  animation: deck-copy-flash 2.4s ease both;
}
@keyframes deck-copy-flash {
  0%, 100% { opacity: 0; }
  8%, 88% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .deck-copy-feedback { animation: none; } }
.deck-stats { display: block; padding: 10px; background: #e8f0f0; border-radius: 8px; white-space: pre-line; font: calc(11px * var(--app-text-scale, 1))/1.7 Consolas, monospace; font-variant-numeric: tabular-nums; }
.deck-stats + .deck-stats { margin-top: 8px; }
.deck-mode-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 16px; }
.controller-deck .deck-mode-tabs button { padding: 9px 5px; line-height: 1.4; }
.controller-deck .deck-mode-tabs button[aria-selected="true"] { background: #225c70; border-color: #225c70; color: white; }
.controller-deck .deck-mode-tabs button:focus-visible { outline: 2px solid #268c93; outline-offset: 2px; }
.deck-mode-status { margin: 10px 0 0; font-size: calc(12px * var(--app-text-scale, 1)); font-weight: 600; line-height: 1.5; }
.pane-actions { display: contents; }
.controller-deck .pane-actions button { background: transparent; }
.deck-group { margin: 8px 0; border: 1px solid #c3d9da; border-radius: 9px; overflow: clip; }
.deck-group > summary { display: flex; align-items: center; gap: 9px; padding: 13px 12px; cursor: pointer; list-style: none; background: #e6f0ed; font-weight: 650; }
.deck-group > summary::-webkit-details-marker { display: none; }
.deck-group > summary::before { content: "+"; width: 12px; color: #3b7b80; font: calc(18px * var(--app-text-scale, 1))/1 Consolas, monospace; }
.deck-group[open] > summary::before { content: "−"; }
.deck-group > summary:hover { background: #dcece7; }
.deck-group > summary:focus-visible { outline: 2px solid #268c93; outline-offset: -3px; }
.group-count { margin-left: auto; font-size: calc(11px * var(--app-text-scale, 1)); font-weight: 400; color: #536e79; }
.deck-group-body { padding: 0 12px; }
.deck-pane > .deck-group-body { padding-bottom: 12px; }
.deck-pane :is(.deck-stats, .deck-export) { margin-top: 12px; }
.group-description { margin: 11px 0; color: #536e79; font-size: calc(11px * var(--app-text-scale, 1)); line-height: 1.45; }
.deck-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; }
.controller-deck input[type="checkbox"] { accent-color: #ba7922; }
.deck-parameter p { margin: 6px 0 8px; color: #536e79; font-size: calc(11px * var(--app-text-scale, 1)); line-height: 1.45; }
/* One value slider beside its synchronized numeric input. */
.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: calc(11px * var(--app-text-scale, 1)); }
/* Full Form units are sentences: give them their own line beneath the slider instead of the narrow unit column. */
html[data-deck-wording="full"] .parameter-value { grid-template-columns: minmax(0, 1fr) 65px; }
html[data-deck-wording="full"] .parameter-value > [data-part="unit"] { grid-column: 1 / -1; grid-row: 2; margin: 3px 0 2px; line-height: 1.45; color: #486572; }
.controller-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; }
.controller-deck input[type="range"] { width: 100%; margin: 0; height: 25px; accent-color: #268c93; cursor: pointer; }
/* Full-width value rail with a stable thumb travel area. */
.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; }

.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; }
.parameter-rail input:focus-visible { z-index: 2; }
.controller-deck .site-header { position: static; padding: 12px 0 0; pointer-events: auto; }
.controller-deck .header-center { gap: 8px; }
.deck-status { min-height: 1.5em; font-size: calc(12px * var(--app-text-scale, 1)); line-height: 1.5; }
.deck-tip {
  position: fixed; z-index: 40; max-width: min(360px, calc(100vw - 16px)); padding: 10px 13px; border-radius: 8px;
  box-sizing: border-box; max-height: calc(100dvh - 16px); overflow: auto; overscroll-behavior: contain;
  background: #12313d; color: #eef7f7; font: calc(12.5px * var(--app-text-scale, 1))/1.55 system-ui, sans-serif; box-shadow: 0 10px 36px rgb(6 24 34 / 45%);
}
.deck-tip p { margin: 0 0 7px; } .deck-tip p:last-child { margin: 0; }
.deck-wording { margin: 12px 0 4px; }
.deck-wording-choice { display: inline-flex; gap: 0; border: 1px solid #b6d5da; border-radius: 8px; overflow: hidden; }
.deck-wording-choice button { border: 0; border-radius: 0; margin: 0; }
.deck-wording-choice button[aria-pressed="true"] { background: #225c70; color: #fff; }
.deck-export { display: block; font-size: calc(12px * var(--app-text-scale, 1)); }
.deck-export textarea { display: block; width: 100%; margin-top: 8px; resize: vertical; font: calc(11px * var(--app-text-scale, 1))/1.5 Consolas, monospace; }
.deck-export textarea[aria-invalid="true"] { border-color: #a53624; }
@media (pointer: coarse), (max-width: 759px) {
  .controller-deck button, .deck-group > summary { min-height: 44px; }
  .controller-deck .developer-panel-tab { width: 44px; }
  .developer-panel[data-side="right"] .developer-panel-tab { left: -44px; }
  .developer-panel[data-side="left"] .developer-panel-tab { right: -44px; }
  .controller-deck { max-width: calc(100% - 64px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  .controller-deck :is(input[type="number"], textarea) { font-size: calc(16px * var(--app-text-scale, 1)); min-height: 44px; }
  .parameter-heading { flex-wrap: wrap; }
  .controller-deck input[type="checkbox"] { width: 24px; height: 24px; }
  .parameter-value { --slider-thumb-width: 24px; grid-template-columns: minmax(0, 1fr) 65px; }
  .parameter-value > [data-part="unit"] { grid-column: 1 / -1; }
  .parameter-rail, .controller-deck input[type="range"] { height: 44px; }
  .value-rail input::-webkit-slider-thumb { height: 24px; margin-top: -10px; }
  .value-rail input::-moz-range-thumb { height: 24px; }
}
@media (max-width: 480px) { .developer-panel-body { padding: 14px; } }

/* A scrollable rail keeps every tray label reachable at enlarged text and short heights. */
#left-deck { --deck-tab-width: 34px; }
#left-deck > .developer-panel-tabs { position: absolute; z-index: 2; top: 8px; bottom: 8px; right: calc(-1 * var(--deck-tab-width)); width: var(--deck-tab-width); display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y; }
#left-deck > .developer-panel-tabs::-webkit-scrollbar { display: none; }
#left-deck .developer-panel-tabs .developer-panel-tab { position: relative; inset: auto; flex: none; box-sizing: border-box; width: 100%; min-height: 44px; height: auto; margin: 0; touch-action: pan-y; white-space: nowrap; }
/* Auto margins center folded tabs without clipping the start of an overflowing rail. */
#left-deck.is-collapsed .developer-panel-tabs .developer-panel-tab:first-child { margin-top: auto; }
#left-deck.is-collapsed .developer-panel-tabs .developer-panel-tab:last-child { margin-bottom: auto; }
#right-deck.is-collapsed > .developer-panel-tab { top: 50%; bottom: auto; transform: translateY(-50%); }
#left-deck .deck-folder-tabs { flex-wrap: wrap; }
#left-deck .deck-folder-tabs button { flex: 1 1 auto; }
@media (pointer: coarse), (max-width: 759px) { #left-deck { --deck-tab-width: 44px; } }
@media (max-height: 500px) {
  #left-deck { --deck-tab-width: 72px; }
  #left-deck .developer-panel-tabs .developer-panel-tab { writing-mode: horizontal-tb; white-space: normal; overflow-wrap: anywhere; padding: 6px 3px; }
}