.kn-launcher { display: none; }
html.kn-touch .kn-launcher {
  display: block;
  position: fixed;
  z-index: 1;
  right: max(14px, calc(env(safe-area-inset-right, 0px) + 10px));
  bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 10px));
  width: 44px; height: 44px; padding: 10px; border-radius: 50%;
  background: rgba(247, 240, 225, 0.95); color: #2b2219;
  border: 1px solid rgba(60, 45, 30, 0.18);
  box-shadow: 0 6px 24px rgba(60, 40, 20, 0.12);
  cursor: pointer;
  touch-action: manipulation;
}
.kn-launcher svg { display: block; width: 100%; height: 100%; }
html.kn-touch #panel {
  z-index: 1;
  top: auto; right: 0; bottom: 0; left: 0;
  width: 100%; max-width: none;
  max-height: 60vh; max-height: 60dvh;
  border-radius: 14px 14px 0 0;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(247, 240, 225, 0.95);
  transform: translateY(var(--kn-drag, 0px));
  transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
}
html.kn-touch #panel.folded {
  transform: translateY(calc(100% + 32px));
  pointer-events: none;
}
html.kn-touch #panel.kn-dragging { transition: none; }
html.kn-touch #panel #controls {
  display: grid; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 8px 0 24px; margin: 0; gap: 12px;
}
html.kn-touch #panel #fold {
  position: relative; box-sizing: border-box; flex-shrink: 0;
  min-height: 60px; padding-top: 16px;
  touch-action: none; user-select: none;
}
html.kn-touch #panel #fold::before {
  content: ""; position: absolute; top: 8px; left: 50%;
  transform: translateX(-50%); width: 36px; height: 4px;
  border-radius: 2px; background: rgba(60, 45, 30, 0.25);
}
html.kn-touch #panel #fold::after { content: "×"; font-size: 26px; line-height: 1; }
html.kn-touch #panel input[type=range],
html.kn-touch #panel input[type=checkbox],
html.kn-touch #panel select,
html.kn-touch #panel button { min-height: 44px; }
html.kn-touch #panel input[type=checkbox] { min-width: 44px; margin: 0; accent-color: #5a3f27; }
html.kn-touch #panel select { font-size: 16px; }
@media (max-height: 540px) and (orientation: landscape) {
  html.kn-touch #panel {
    top: 0; left: auto; width: min(320px, 100vw);
    height: 100%; max-height: 100%; border-radius: 14px 0 0 14px;
    padding-top: env(safe-area-inset-top, 0px);
    transform: translateX(0);
  }
  html.kn-touch #panel.folded { transform: translateX(calc(100% + 32px)); }
}
@media (prefers-reduced-motion: reduce) {
  html.kn-touch #panel { transition: none; }
}