/* DRS demo kit: a game-like backdrop and the demo panel. Loaded after the script's own CSS. */
html.dk {
  min-height: 100%;
  background:
    radial-gradient(1200px 500px at 70% 110%, rgba(255, 140, 60, .22), transparent 60%),
    radial-gradient(900px 420px at 15% 105%, rgba(90, 120, 255, .20), transparent 60%),
    linear-gradient(180deg, #0c1224 0%, #1a1f3a 45%, #2b2442 70%, #3a2a3a 100%) fixed;
}
html.dk::before {
  /* skyline */
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 34vh; pointer-events: none; z-index: 0; opacity: .55;
  background:
    linear-gradient(0deg, #07090f 0 100%) 0 100% / 100% 12% no-repeat,
    repeating-linear-gradient(90deg, #0a0d17 0 70px, transparent 70px 90px, #0b0f1b 90px 150px, transparent 150px 175px, #090c15 175px 230px, transparent 230px 260px) 0 100% / 100% 70% no-repeat,
    repeating-linear-gradient(90deg, #0d1120 0 40px, transparent 40px 120px, #0c101d 120px 170px, transparent 170px 300px) 0 100% / 100% 100% no-repeat;
}
html.dk body { background: transparent !important; position: relative; z-index: 1; }

.dk-panel {
  position: fixed; left: 24px; bottom: 24px; z-index: 2147483000; width: 250px; padding: 14px;
  border-radius: 16px; background: rgba(12, 14, 22, .88); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45); color: #e8eaf2; font: 600 14px/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif;
  backdrop-filter: blur(8px);
}
.dk-head { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .14em; color: #a5a8ff; margin-bottom: 10px; }
.dk-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 10px #22c55e; }
.dk-note { margin: 0 0 10px; font-size: 12.5px; font-weight: 500; color: #a9adbd; }
.dk-btns { display: grid; gap: 8px; }
.dk-btn {
  all: unset; box-sizing: border-box; display: block; width: 100%; padding: 10px 12px; border-radius: 10px; cursor: pointer; text-align: left;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #e8eaf2; font: 600 14px/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif;
  transition: background .15s, border-color .15s;
}
.dk-btn:hover { background: rgba(255, 255, 255, .12); }
.dk-btn.primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); border-color: transparent; color: #fff; }
.dk-btn.primary:hover { filter: brightness(1.08); }

.dk-progress {
  position: fixed; left: 50%; bottom: 11%; z-index: 2147482999; transform: translateX(-50%); width: 380px; padding: 10px 14px 12px;
  border-radius: 10px; background: rgba(12, 13, 20, .78); color: #fff; text-align: center; font: 600 15px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.dk-progress i { display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: rgba(40, 42, 58, .9); overflow: hidden; }
.dk-progress b { display: block; width: 0; height: 100%; background: #8b8ff8; }

.dk-feed { position: fixed; right: 32px; top: 28px; width: 420px; z-index: 2147482998; display: grid; gap: 8px; pointer-events: none; }
.dk-msg {
  padding: 11px 14px; border-radius: 12px; background: rgba(10, 12, 20, .9); border: 1px solid rgba(255, 255, 255, .1); border-left: 3px solid #8b8ff8;
  color: #eef0f7; font: 600 15px/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif; animation: dk-in .25s ease-out;
}
.dk-msg.bad { border-left-color: #ef4444; }
.dk-msg.good { border-left-color: #22c55e; }
.dk-msg small { display: block; color: #9aa0b8; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.dk-msg.out { opacity: 0; transform: translateX(20px); transition: all .3s; }
@keyframes dk-in { from { opacity: 0; transform: translateX(24px); } }

.dk-toast {
  position: fixed; top: 24px; left: 50%; z-index: 2147483001; transform: translate(-50%, -20px); opacity: 0; pointer-events: none;
  padding: 12px 18px; border-radius: 12px; background: rgba(12, 14, 22, .92); border: 1px solid rgba(255, 255, 255, .12); color: #fff;
  font: 600 15px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif; transition: opacity .2s, transform .2s;
}
.dk-toast.on { opacity: 1; transform: translate(-50%, 0); }
.dk-toast.bad { border-color: rgba(239, 68, 68, .6); }