body.kt {
  --bg: #fff8f0;
  --surface: #ffffff;
  --border: #f0d0e0;
  --text: #3a2a3a;
  --muted: #b090a0;
  --up: #e8404a;
  --down: #4a90d9;
  --exact: #42b883;
  --accent: #e060a0;
}
body.kt::before {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,150,200,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(255,200,100,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 30%, rgba(150,200,255,0.10) 0%, transparent 40%);
}
body.kt .logo {
  background: linear-gradient(135deg, #e060a0, #ff9040);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.kt .kt-toggle { border-color: #f0d0e0; color: #c080a0; }
body.kt .kt-toggle:hover { border-color: var(--accent); color: var(--accent); }
body.kt .kt-toggle:focus-visible { outline-color: var(--accent); }
body.kt .help-btn { border-color: #f0d0e0; color: #c080a0; }
body.kt .help-btn:hover { border-color: var(--accent); color: var(--accent); }
body.kt .cell { background: #fff; }
body.kt .input-cell { background: #fff; }
body.kt .key { background: #fff5f8; border-color: #f0d0e0; color: var(--text); }
body.kt .key:hover { border-color: var(--accent); }
body.kt .key.in-range {
  border-color: #42b883;
  color: var(--text);
  box-shadow: 0 0 0 1px #42b883, 0 0 6px rgba(66,184,131,0.4);
  background: #ffffff;
}
body.kt .key.out-of-range {
  background: #e8e0ee;
  border-color: #d0c0dc;
  color: #b8a0c8;
  box-shadow: none;
}
body.kt .end-panel { background: rgba(255,248,240,0.85); }
body.kt .end-card { background: #fff; border-color: #f0d0e0; }
body.kt .modal { background: #fff; border-color: #f0d0e0; }
body.kt #keyboard-wrap { background: #fff8f0; }
body.kt #scroll-area { background: #fff8f0; }
body.kt .share-btn { background: var(--accent); }
body.kt .end-name { color: #a04080; opacity:0.6; }

body.kt .flower {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  font-size: 24px;
  opacity: 0.35;
  animation: floatFlower linear infinite;
  user-select: none;
}
@keyframes floatFlower {
  0%   { transform: translateY(0px) rotate(0deg); opacity: 0.25; }
  50%  { transform: translateY(-18px) rotate(20deg); opacity: 0.45; }
  100% { transform: translateY(0px) rotate(0deg); opacity: 0.25; }
}