/* WkBot sales site - the client, redrawn for the stage's demos.

   A copy of the desktop client's light theme (wk/web/app.css) at the parts the films need: the
   navy rail, the top bar, cards, rule lists, the rule editor, switches, buttons, inputs. Every class
   is prefixed `dm-` and every token `--c-` so nothing here meets the site's own .btn or .card.
   Values are the client's, unchanged - when the client changes its look, change it here too.

   The screen is drawn at 800 x 500 and scaled to the stage (engine.js), so sizes are the client's
   own pixel sizes, not responsive ones. */

.dm-frame { position: absolute; inset: 0; overflow: hidden; }

.dm {
  --c-navy-900: #071634;
  --c-navy-800: #0a2149;
  --c-navy-700: #092c66;
  --c-navy-600: #0d3677;
  --c-brand: #4bb4ff;
  --c-bg: #f2f5fa;
  --c-surface: #ffffff;
  --c-raised: #ffffff;
  --c-hover: #edf1f8;
  --c-line: #dce3ed;
  --c-line-soft: #e8edf4;
  --c-text: #0e1a2b;
  --c-muted: #56647a;
  --c-dim: #8793a6;
  --c-accent: var(--c-navy-900);
  --c-accent-hi: var(--c-navy-800);
  --c-accent-soft: rgba(13, 54, 119, .1);
  --c-ok: var(--c-navy-900);
  --c-warn: #c87b16;
  --c-warn-soft: rgba(200, 123, 22, .11);
  --c-danger: #ce3a3a;
  --c-danger-soft: rgba(206, 58, 58, .1);
  --c-game-bg: #0b0f16;
  --c-game-hi: #151d2b;
  --c-game-line: #26324a;
  --c-game-text: #d5deeb;
  --c-game-dim: #6e7e98;
  --c-side-text: #a7bddc;
  --c-side-dim: #6c86ac;
  --c-side-line: rgba(255, 255, 255, .07);
  --c-r: 9px;
  --c-r-sm: 6px;
  --c-e: cubic-bezier(.4, 0, .2, 1);
  --c-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --c-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;

  position: absolute; left: 0; top: 0; width: 800px; height: 500px; transform-origin: 0 0;
  display: grid; grid-template-columns: 158px minmax(0, 1fr);
  overflow: hidden; background: var(--c-bg); color: var(--c-text);
  font: 13px/1.45 var(--c-font); text-align: left; letter-spacing: 0;
  -webkit-font-smoothing: antialiased; user-select: none; cursor: default;
}
.dm *, .dm *::before, .dm *::after { box-sizing: border-box; }
.dm-i { width: 15px; height: 15px; flex: none; }

/* ── The rail ─────────────────────────────────────────────────────────── */
.dm-side { display: flex; flex-direction: column; min-height: 0; background: var(--c-navy-900); }
.dm-brand {
  display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 14px; flex: none;
  font-size: 13.5px; font-weight: 640; letter-spacing: .2px; color: #fff;
}
.dm-brand img { width: 22px; height: 22px; border-radius: var(--c-r-sm); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.dm-nav { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 2px 8px 8px; }
.dm-nav-sep { height: 1px; margin: 6px 6px; background: var(--c-side-line); }
.dm-nav-group {
  padding: 9px 6px 4px; font-size: 9px; font-weight: 650; letter-spacing: .9px;
  text-transform: uppercase; color: var(--c-side-dim);
}
.dm-nav-item {
  position: relative; display: flex; align-items: center; gap: 9px; padding: 4.5px 9px;
  border-radius: var(--c-r-sm); color: var(--c-side-text); font-size: 12px;
  transition: background .19s var(--c-e), color .19s var(--c-e);
}
.dm-nav-item .dm-i { width: 14px; height: 14px; opacity: .92; }
.dm-nav-item::before {
  content: ""; position: absolute; left: -4px; top: 6px; bottom: 6px; width: 2px; border-radius: 99px;
  background: var(--c-brand); transform: scaleY(0); transition: transform .19s var(--c-e);
}
.dm-nav-item.is-active { background: rgba(75, 180, 255, .15); color: #fff; }
.dm-nav-item.is-active::before { transform: scaleY(1); }
.dm-nav-item.is-active .dm-i { color: var(--c-brand); }
.dm-nav-item.is-press { background: rgba(255, 255, 255, .1); }
.dm-side-foot {
  display: flex; align-items: center; gap: 8px; padding: 9px 13px 11px;
  border-top: 1px solid var(--c-side-line); font-size: 11px; color: var(--c-side-text);
}

.dm-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; opacity: .5; }
.dm-dot.is-ok { background: var(--c-ok); opacity: 1; }
.dm-side .dm-dot.is-live { background: var(--c-brand); opacity: 1; animation: dm-breathe 2.2s var(--c-e) infinite; color: var(--c-brand); }
@keyframes dm-breathe { 0%, 100% { box-shadow: 0 0 0 0 currentColor; } 50% { box-shadow: 0 0 0 4px transparent; } }

/* ── The main column ──────────────────────────────────────────────────── */
.dm-main { display: grid; grid-template-rows: 46px minmax(0, 1fr); min-width: 0; min-height: 0; }
.dm-top {
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border-bottom: 1px solid var(--c-line-soft); background: var(--c-surface);
}
.dm-top-title { font-size: 13.5px; font-weight: 620; letter-spacing: .1px; }
.dm-top-sub { font-size: 11.5px; color: var(--c-dim); padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--c-line); }
.dm-top-spacer { flex: 1 1 auto; }
.dm-lic {
  display: inline-flex; align-items: center; gap: 7px; height: 25px; padding: 0 11px 0 10px;
  border: 1px solid rgba(13, 54, 119, .35); border-radius: 99px; background: var(--c-accent-soft);
  font-size: 11px; color: var(--c-muted); white-space: nowrap;
}
.dm-lic b { color: var(--c-ok); font-weight: 600; }
.dm-view { position: relative; min-height: 0; overflow: hidden; padding: 14px 16px 16px; }

/* ── Card ─────────────────────────────────────────────────────────────── */
.dm-card {
  background: var(--c-surface); border: 1px solid var(--c-line-soft); border-radius: var(--c-r);
  padding: 12px 13px 13px; box-shadow: 0 1px 2px rgba(7, 22, 52, .05);
}
.dm-card + .dm-card { margin-top: 12px; }
.dm-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-height: 29px; }
.dm-card-head > .dm-i { color: var(--c-accent); opacity: .85; }
.dm-card-title { font-size: 11px; font-weight: 650; letter-spacing: .7px; text-transform: uppercase; color: var(--c-muted); }
.dm-card-end { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.dm-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 29px; padding: 0 11px; border: 1px solid var(--c-line); border-radius: var(--c-r-sm);
  background: var(--c-raised); color: var(--c-text); font-size: 12.5px; font-weight: 500; white-space: nowrap;
  transition: background .11s var(--c-e), border-color .11s var(--c-e), transform .11s var(--c-e), opacity .19s var(--c-e), color .11s;
}
.dm-btn .dm-i { width: 14px; height: 14px; }
.dm-btn.is-primary { background: var(--c-accent); border-color: var(--c-accent); color: #fff; font-weight: 600; }
.dm-btn.is-icon { width: 29px; padding: 0; color: var(--c-muted); }
.dm-btn.is-off { opacity: .45; }
.dm-btn.is-press { transform: scale(.97); background: var(--c-hover); border-color: var(--c-dim); }
.dm-btn.is-primary.is-press { background: var(--c-accent-hi); border-color: var(--c-accent-hi); }
.dm-btn.is-wait { border-color: var(--c-accent); color: var(--c-accent); animation: dm-wait 1.1s var(--c-e) infinite; }
@keyframes dm-wait { 50% { box-shadow: 0 0 0 3px var(--c-accent-soft); } }

/* ── Switch ───────────────────────────────────────────────────────────── */
.dm-switch { display: inline-flex; align-items: center; gap: 7px; }
.dm-track { width: 32px; height: 18px; flex: none; border-radius: 99px; background: var(--c-line); transition: background .19s var(--c-e); }
.dm-knob { display: block; width: 14px; height: 14px; margin: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(7, 22, 52, .3); transition: transform .19s var(--c-e); }
.dm-switch.is-on .dm-track { background: var(--c-ok); }
.dm-switch.is-on .dm-knob { transform: translateX(14px); }
.dm-switch-label { font-size: 11.5px; color: var(--c-muted); min-width: 20px; }

/* ── Tag ──────────────────────────────────────────────────────────────── */
.dm-tag {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 99px;
  background: var(--c-hover); border: 1px solid var(--c-line); font-size: 10.5px; font-weight: 550; color: var(--c-muted);
}
.dm-tag.is-ok { background: var(--c-accent-soft); border-color: rgba(13, 54, 119, .3); color: var(--c-ok); }

/* ── Rule list ────────────────────────────────────────────────────────── */
.dm-rules { position: relative; display: flex; flex-direction: column; }
.dm-rule {
  position: relative; display: grid; grid-template-columns: auto auto auto 1fr auto auto auto;
  align-items: center; gap: 10px; padding: 7px 6px; background: var(--c-surface);
  border-top: 1px solid var(--c-line-soft); border-radius: var(--c-r-sm);
  transition: background .19s var(--c-e), box-shadow .19s var(--c-e), opacity .19s var(--c-e);
}
.dm-rules > .dm-rule:first-child { border-top-color: transparent; }
.dm-grip { color: var(--c-dim); opacity: .6; display: grid; }
.dm-grip .dm-i { width: 14px; height: 14px; }
.dm-rule-pic {
  width: 28px; height: 28px; border-radius: var(--c-r-sm); display: grid; place-items: center;
  border: 1px solid var(--c-line-soft); background: var(--c-bg); color: var(--c-navy-600);
}
.dm-rule-pic .dm-i { width: 16px; height: 16px; }
.dm-rule-pic.is-heal { background: #eaf2ff; border-color: #d4e3fa; color: #1e5aaa; }
.dm-rule-pic.is-hp   { background: #fdecec; border-color: #f6d3d3; color: var(--c-danger); }
.dm-rule-pic.is-mp   { background: #e9f0fb; border-color: #d3e0f4; color: #2f5fb0; }
.dm-rule-name { font-size: 12.5px; font-weight: 550; line-height: 1.25; }
.dm-rule-sub { font-size: 11px; color: var(--c-dim); line-height: 1.25; }
.dm-rule-when { font-size: 11.5px; color: var(--c-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dm-rule-key {
  font-family: var(--c-mono); font-size: 11px; padding: 2px 7px; border: 1px solid var(--c-line);
  border-radius: 4px; color: var(--c-muted); white-space: nowrap; transition: all .19s var(--c-e);
}
.dm-rule-cd { font-size: 11px; color: var(--c-dim); font-variant-numeric: tabular-nums; min-width: 16px; }
.dm-rules-hint { margin-top: 8px; font-size: 11px; color: var(--c-dim); transition: color .3s; }
.dm-rules-hint.is-lit { color: var(--c-accent); }

/* A rule just added: a soft wash that fades. A rule the module just used: a pulse and its key lit. */
.dm-rule.is-new { animation: dm-new 1.6s var(--c-e); }
@keyframes dm-new { 0%, 30% { background: var(--c-accent-soft); } 100% { background: var(--c-surface); } }
.dm-rule.is-fire { background: var(--c-accent-soft); box-shadow: inset 2px 0 0 var(--c-accent); }
.dm-rule.is-fire .dm-rule-key { background: var(--c-accent); border-color: var(--c-accent); color: #fff; transform: scale(1.08); }
.dm-rule.is-lift { z-index: 3; box-shadow: 0 10px 26px -8px rgba(7, 22, 52, .35), 0 0 0 1px var(--c-line); }
.dm-rule.is-lift .dm-grip { opacity: 1; color: var(--c-accent); }

/* ── Rule editor ──────────────────────────────────────────────────────── */
.dm-editor {
  display: flex; flex-direction: column; gap: 10px; padding: 12px; margin: 4px 0;
  border: 1px solid var(--c-line); border-left: 2px solid var(--c-accent); border-radius: var(--c-r-sm);
  background: var(--c-hover);
}
.dm-erow { display: flex; align-items: flex-end; gap: 8px; }
.dm-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dm-field.grow { flex: 1 1 auto; }
.dm-flabel { font-size: 10.5px; letter-spacing: .3px; color: var(--c-dim); }
.dm-input {
  display: flex; align-items: center; height: 29px; padding: 0 10px; min-width: 0;
  border: 1px solid var(--c-line); border-radius: var(--c-r-sm); background: var(--c-surface);
  font-size: 12.5px; color: var(--c-text); white-space: nowrap; overflow: hidden;
  transition: border-color .11s var(--c-e), box-shadow .19s;
}
.dm-input.is-ph { color: var(--c-dim); }
.dm-input.is-focus, .dm-input.is-typing { border-color: var(--c-accent); }
.dm-input.is-typing::after {
  content: ""; width: 1px; height: 15px; margin-left: 1px; background: var(--c-text);
  animation: dm-caret 1s steps(1) infinite;
}
@keyframes dm-caret { 50% { opacity: 0; } }
.dm-input.is-sel { color: transparent; }
.dm-input.is-sel span { background: rgba(75, 180, 255, .3); color: var(--c-text); }
.dm-select {
  position: relative; display: flex; align-items: center; height: 29px; padding: 0 26px 0 10px;
  border: 1px solid var(--c-line); border-radius: var(--c-r-sm); background: var(--c-raised);
  font-size: 12.5px; white-space: nowrap; transition: border-color .11s var(--c-e), background .11s;
}
.dm-select > .dm-i { position: absolute; right: 8px; top: 50%; width: 13px; height: 13px; transform: translateY(-50%); color: var(--c-dim); }
.dm-select.is-press, .dm-select.is-open { border-color: var(--c-dim); background: var(--c-hover); }
.dm-menu {
  position: absolute; z-index: 6; left: 0; top: calc(100% + 3px); min-width: 100%; padding: 3px;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--c-r-sm);
  box-shadow: 0 10px 28px rgba(7, 22, 52, .14); opacity: 0; transform: translateY(-3px);
  transition: opacity .15s var(--c-e), transform .15s var(--c-e);
}
.dm-menu.is-in { opacity: 1; transform: none; }
.dm-menu div { padding: 4px 9px; border-radius: 4px; font-size: 12px; color: var(--c-text); white-space: nowrap; }
.dm-menu div.is-hot { background: var(--c-hover); }
.dm-seg { display: inline-flex; padding: 2px; border: 1px solid var(--c-line); border-radius: var(--c-r-sm); background: var(--c-surface); }
.dm-seg span { display: inline-flex; align-items: center; height: 23px; padding: 0 11px; border-radius: 4px; font-size: 12px; color: var(--c-muted); }
.dm-seg span.is-on { background: var(--c-accent); color: #fff; font-weight: 550; }
.dm-lookup { display: flex; align-items: center; gap: 6px; height: 29px; min-width: 128px; font-size: 11.5px; color: var(--c-dim); white-space: nowrap; }
.dm-lookup.is-ok { color: var(--c-ok); }
.dm-lookup .dm-rule-pic { width: 24px; height: 24px; }
.dm-lookup .dm-rule-pic .dm-i { width: 14px; height: 14px; }
.dm-spin { width: 13px; height: 13px; border: 1.5px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: dm-spin .62s linear infinite; }
@keyframes dm-spin { to { transform: rotate(360deg); } }
.dm-appear { animation: dm-appear .22s var(--c-e) both; }
@keyframes dm-appear { from { opacity: 0; transform: translateY(-3px); } }

/* ── The game, where a film needs it: the client's dark, never its art ── */
.dm-game {
  position: absolute; z-index: 5; padding: 9px 11px 10px; border-radius: 9px;
  background: var(--c-game-bg); border: 1px solid var(--c-game-line); color: var(--c-game-text);
  box-shadow: 0 16px 34px -12px rgba(7, 22, 52, .55); font-size: 11px;
}
.dm-game-title { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 9.5px; font-weight: 650; letter-spacing: .8px; text-transform: uppercase; color: var(--c-game-dim); }
.dm-bar { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 7px; }
.dm-bar + .dm-bar { margin-top: 5px; }
.dm-bar-label { font-size: 10.5px; color: var(--c-game-dim); }
.dm-bar-track { height: 7px; border-radius: 99px; background: var(--c-game-hi); overflow: hidden; }
.dm-bar-track { display: block; }
.dm-bar-fill { display: block; width: 100%; height: 100%; border-radius: inherit; transform-origin: left; }
.dm-bar.is-hp .dm-bar-fill { background: linear-gradient(90deg, #c7393d, #ef6a6d); }
.dm-bar.is-mp .dm-bar-fill { background: linear-gradient(90deg, #2c6fd6, #5aa8ff); }
.dm-bar-num { font-family: var(--c-mono); font-size: 10.5px; text-align: right; font-variant-numeric: tabular-nums; }
.dm-game.is-hit { animation: dm-hit .35s var(--c-e); }
@keyframes dm-hit { 30% { border-color: rgba(229, 104, 107, .8); box-shadow: 0 0 0 3px rgba(229, 104, 107, .25), 0 16px 34px -12px rgba(7, 22, 52, .55); } }

/* ── The pointer, its press, and a key being pressed ──────────────────── */
.dm-cursor {
  position: absolute; left: 0; top: 0; z-index: 20; width: 20px; height: 24px; pointer-events: none;
  opacity: 0; transition: opacity .18s;
  filter: drop-shadow(0 2px 3px rgba(7, 22, 52, .35));
}
.dm-cursor.is-on { opacity: 1; }
.dm-cursor svg { display: block; width: 18px; height: 22px; transform-origin: 2px 2px; transition: transform .1s; }
.dm-cursor path { fill: #fff; stroke: #0e1a2b; stroke-width: 1.3; stroke-linejoin: round; }
.dm-cursor.is-down svg { transform: scale(.86); }
.dm-ripple {
  position: absolute; z-index: 19; width: 28px; height: 28px; margin: -12px 0 0 -12px; border-radius: 50%;
  border: 2px solid rgba(22, 98, 214, .55); background: rgba(75, 180, 255, .18); pointer-events: none;
  animation: dm-ripple .6s var(--c-e) forwards;
}
@keyframes dm-ripple { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

.dm-keycap {
  position: absolute; z-index: 18; min-width: 34px; height: 30px; padding: 0 9px; translate: -50% -100%;
  display: grid; place-items: center; border-radius: 7px;
  font: 600 12.5px/1 var(--c-mono); color: var(--c-text); background: #fff;
  border: 1px solid #c3cede; box-shadow: 0 3px 0 #c3cede, 0 10px 22px -8px rgba(7, 22, 52, .4);
  opacity: 0; transform: translateY(6px) scale(.9);
  transition: opacity .18s var(--c-e), transform .18s var(--c-e), box-shadow .1s;
}
.dm-keycap.is-in { opacity: 1; transform: none; }
.dm-keycap.is-down { transform: translateY(3px); box-shadow: 0 0 0 #c3cede, 0 6px 14px -8px rgba(7, 22, 52, .4); background: #eef4fd; }
.dm-keycap.is-out { opacity: 0; transform: translateY(-6px); }
.dm-keycap.is-game { background: var(--c-game-hi); color: var(--c-game-text); border-color: var(--c-game-line); box-shadow: 0 3px 0 #05070b, 0 10px 22px -8px rgba(0, 0, 0, .6); }
.dm-keycap.is-game.is-down { background: #1d2738; box-shadow: 0 0 0 #05070b; }

/* A caption for the longer films: what is being shown, at the foot of the screen. */
.dm-caption {
  position: absolute; z-index: 17; left: 50%; bottom: 14px; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 8px; border-radius: 99px;
  background: rgba(7, 22, 52, .92); color: #eef4fd; font-size: 12.5px; white-space: nowrap;
  box-shadow: 0 12px 28px -10px rgba(7, 22, 52, .6);
  opacity: 0; transform: translateY(6px); transition: opacity .3s var(--c-e), transform .3s var(--c-e);
}
.dm-caption.is-in { opacity: 1; transform: none; }
.dm-caption b {
  display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px;
  background: var(--c-brand); color: #04101f; font-size: 11.5px;
}

/* The caption sits in the top bar, right-aligned, where it covers nothing the film is showing. */
.dm-caption { left: auto; right: 12px; bottom: auto; top: 8px; translate: none; transform: translateY(-6px); }
.dm-caption.is-in { transform: none; }

/* ══ Cavebot ════════════════════════════════════════════════════════════ */
.dm.dm-narrow { grid-template-columns: 136px minmax(0, 1fr); }
.dm-cb-view { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; }

.dm-cb-head { display: flex; align-items: center; gap: 7px; padding: 7px 8px; flex: none; }
.dm-cb-head .dm-btn { height: 27px; }
.dm-cb-sync { padding: 0 9px; }
.dm-cb-head .dm-btn.is-icon { width: 27px; }
.dm-cb-method { position: relative; flex: none; }
.dm-cb-method span { position: relative; z-index: 1; padding: 0 8px; font-size: 11px; transition: color .3s var(--c-e); }
.dm-cb-method span.is-on { background: transparent; }
.dm-cb-pill {
  position: absolute; top: 2px; bottom: 2px; left: 2px; border-radius: 4px; background: var(--c-accent);
  box-shadow: 0 2px 7px rgba(7, 22, 52, .28);
  transition: transform .42s cubic-bezier(.3, 1.3, .45, 1), width .42s cubic-bezier(.3, 1.3, .45, 1);
}
.dm-cb-status {
  display: flex; align-items: center; gap: 7px; flex: 1 1 auto; min-width: 0; height: 27px; padding: 0 10px;
  border: 1px solid var(--c-line); border-radius: 99px; background: var(--c-raised); font-size: 11px; color: var(--c-muted);
  transition: border-color .19s, background .19s;
}
.dm-cb-status.is-ok { border-color: rgba(13, 54, 119, .3); background: var(--c-accent-soft); }
.dm-cb-status.is-walking .dm-dot { background: var(--c-brand); animation: dm-breathe 1.4s var(--c-e) infinite; color: var(--c-brand); }
.dm-cb-stext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-cb-pos { margin-left: auto; font-family: var(--c-mono); font-size: 10px; letter-spacing: -.2px; color: var(--c-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dm-cb-end { display: flex; align-items: center; gap: 6px; flex: none; }
.dm-cb-end .dm-switch { margin-left: 2px; }

.dm-cb-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 10px; }
.dm-cb-side { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }

.dm-cb-tabs { position: relative; display: flex; align-items: flex-end; gap: 1px; padding: 6px 8px 0; border-bottom: 1px solid var(--c-line-soft); flex: none; }
.dm-cb-tab {
  display: inline-flex; align-items: center; gap: 6px; height: 27px; padding: 0 9px; border-radius: 6px 6px 0 0;
  font-size: 11.5px; font-weight: 550; color: var(--c-muted); white-space: nowrap; transition: color .11s, background .11s;
}
.dm-cb-tab.is-on { color: var(--c-text); }
.dm-cb-tab.is-press { background: var(--c-hover); }
.dm-cb-tab.is-walking::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-brand); color: var(--c-brand); animation: dm-breathe 1.8s var(--c-e) infinite; }
.dm-cb-count {
  min-width: 17px; height: 15px; padding: 0 5px; line-height: 15px; border-radius: 99px; background: var(--c-hover);
  font-size: 9.5px; font-weight: 500; color: var(--c-dim); text-align: center; font-variant-numeric: tabular-nums;
}
.dm-cb-tab.is-on .dm-cb-count { background: var(--c-accent-soft); color: var(--c-accent); }
.dm-cb-tab-add { width: 25px; justify-content: center; padding: 0; color: var(--c-dim); }
.dm-cb-tab-add .dm-i { width: 13px; height: 13px; }
.dm-cb-ink {
  position: absolute; bottom: -1px; height: 2px; border-radius: 2px; background: var(--c-accent);
  transition: left .3s cubic-bezier(.3, 1.3, .45, 1), width .3s cubic-bezier(.3, 1.3, .45, 1);
}
.dm-cb-tabin {
  width: 104px; height: 21px; margin: 0 2px 3px; padding: 0 7px; display: flex; align-items: center;
  border: 1px solid var(--c-accent); border-radius: 5px; background: var(--c-surface); font-size: 11.5px;
}

.dm-cb-list { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 4px 5px; scroll-behavior: smooth; }
.dm-cb-row {
  position: relative; display: grid; grid-template-columns: 10px 16px auto minmax(0, 1fr) auto; align-items: center; gap: 7px;
  height: 27px; padding: 0 6px 0 3px; border-radius: var(--c-r-sm); transition: background .11s, opacity .19s, transform .19s;
}
.dm-cb-row.has-flag { grid-template-columns: 10px 16px 28px auto minmax(0, 1fr); }
.dm-cb-row .dm-grip .dm-i { width: 11px; height: 11px; }
.dm-cb-num { font-size: 10.5px; color: var(--c-dim); text-align: right; font-variant-numeric: tabular-nums; }
.dm-cb-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 560; white-space: nowrap; }
.dm-cb-kind i, .dm-cb-kbtn i, .dm-cb-mitem i {
  width: 7px; height: 7px; flex: none; border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--k, #2369c3) 22%, transparent);
}
.dm-cb-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--c-muted); }
.dm-cb-label.is-script { font-family: var(--c-mono); font-size: 10.5px; }
.dm-cb-coord { font-family: var(--c-mono); font-size: 10.5px; color: var(--c-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dm-cb-row.is-new { animation: dm-cb-new 1.1s var(--c-e); }
@keyframes dm-cb-new { 0% { background: rgba(75, 180, 255, .38); box-shadow: inset 0 0 0 1px rgba(75, 180, 255, .6); } 100% { background: transparent; } }
.dm-cb-row.is-selected { background: var(--c-accent-soft); }
.dm-cb-row.is-current::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px;
  background: var(--c-brand); color: var(--c-brand); animation: dm-breathe 1.8s var(--c-e) infinite;
}
.dm-cb-row.is-leaving { opacity: 0; transform: translateX(-6px); }
.dm-cb-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 16px; text-align: center; font-size: 11.5px; color: var(--c-dim); }
.dm-cb-empty b { font-size: 12px; color: var(--c-muted); font-weight: 600; }

.dm-cb-composer {
  flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px 9px 7px;
  border-top: 1px solid var(--c-line-soft); background: linear-gradient(var(--c-surface), #f8fafd);
}
.dm-cb-crow { display: flex; align-items: flex-start; gap: 8px; }
.dm-cb-pad {
  display: grid; grid-template-columns: repeat(3, 21px); grid-auto-rows: 21px; gap: 2px; padding: 3px; flex: none;
  border: 1px solid var(--c-line); border-radius: var(--c-r-sm); background: var(--c-surface);
}
.dm-cb-pad span { display: grid; place-items: center; border-radius: 3px; background: var(--c-hover); color: var(--c-dim); transition: background .11s, color .11s, transform .11s; }
.dm-cb-pad span .dm-i { width: 11px; height: 11px; }
.dm-cb-pad span.is-on { background: var(--c-accent); color: #fff; }
.dm-cb-pad span.is-press { transform: scale(.9); }
.dm-cb-me { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.dm-cb-kinds { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 23px; gap: 3px; }
.dm-cb-kbtn { justify-content: flex-start; gap: 6px; height: 23px; padding: 0 7px; font-size: 11px; font-weight: 550; }
.dm-cb-kbtn.is-press { border-color: var(--k); background: color-mix(in srgb, var(--k) 12%, #fff); }
.dm-cb-kbtn.is-off { opacity: .32; filter: grayscale(1); }
.dm-cb-foot { display: flex; align-items: center; gap: 6px; }
.dm-cb-foot .dm-btn.is-icon { width: 25px; height: 25px; }
.dm-cb-foot .dm-btn .dm-i { width: 13px; height: 13px; }
.dm-cb-place span { height: 21px; padding: 0 8px; font-size: 11px; }
.dm-cb-hint { min-height: 14px; font-size: 10.5px; color: var(--c-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-cb-hint .mono { font-family: var(--c-mono); color: var(--c-muted); }

.dm-cb-stage { position: relative; min-height: 0; padding: 0; overflow: hidden; background: #0b0e15; border-color: var(--c-line); }
.dm-cb-layer { position: absolute; inset: 0; transition: opacity .35s var(--c-e); }
.dm-cb-layer.is-hidden { opacity: 0; pointer-events: none; }
.dm-cb-map canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
.dm-cb-tools { position: absolute; right: 7px; top: 7px; display: flex; flex-direction: column; gap: 5px; }
.dm-cb-tgroup { display: flex; flex-direction: column; border-radius: 7px; overflow: hidden; background: rgba(7, 22, 52, .88); box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.dm-cb-tool { width: 25px; height: 23px; display: grid; place-items: center; color: #c9d7ee; transition: background .11s, color .11s; }
.dm-cb-tool .dm-i { width: 13px; height: 13px; }
.dm-cb-tool.is-on { color: var(--c-brand); }
.dm-cb-tool.is-press { background: rgba(255, 255, 255, .14); color: #fff; }
.dm-cb-floor { height: 15px; text-align: center; font: 600 11px/15px var(--c-mono); color: #fff; }
.dm-cb-readout {
  position: absolute; left: 7px; bottom: 7px; padding: 3px 8px; border-radius: 6px;
  background: rgba(7, 10, 18, .82); color: #d5deeb; font: 10px/1.5 var(--c-mono); white-space: nowrap;
}
/* The key the Cavebot is pressing while it walks. */
.dm-cb-keytick {
  position: absolute; right: 9px; bottom: 9px; min-width: 28px; height: 26px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 6px;
  font: 600 14px/1 var(--c-font); color: var(--c-game-text); background: var(--c-game-hi);
  border: 1px solid var(--c-game-line); box-shadow: 0 3px 0 #05070b;
  opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s, box-shadow .06s, background .06s;
}
.dm-cb-keytick.is-on { opacity: 1; transform: none; }
.dm-cb-keytick.is-on.is-down { transform: translateY(2px); box-shadow: 0 1px 0 #05070b; background: #1d2738; }
.dm-ripple.is-bot { border-color: rgba(255, 221, 58, .9); background: rgba(255, 221, 58, .25); }

/* Cavebot, chapters 2 to 4: markers, variables, the map. */
.dm-btn.is-danger { background: var(--c-danger); border-color: var(--c-danger); color: #fff; font-weight: 600; }
.dm-btn.is-danger.is-press { background: #b93232; border-color: #b93232; }
.dm-cb-varsbtn.is-active { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

/* Controls only a coordinate route has, closing up in markers mode. */
.dm-cb-sync { max-width: 80px; overflow: hidden; transition: max-width .3s var(--c-e), opacity .2s, padding .3s, margin .3s, border-width .3s; }
.dm-cb-sync.is-collapsed { max-width: 0; padding: 0; opacity: 0; border-width: 0; margin-left: -7px; }
.dm-cb-tabs { max-height: 40px; transition: max-height .3s var(--c-e), opacity .2s, padding .3s, border-color .3s; }
.dm-cb-tabs.is-collapsed { max-height: 0; padding-top: 0; opacity: 0; border-bottom-color: transparent; overflow: hidden; }
.dm-cb-row.is-entering { animation: dm-cb-in .34s var(--c-e) backwards; }
@keyframes dm-cb-in { from { opacity: 0; transform: translateY(7px); } }
.dm-cb-flag { display: block; width: 28px; height: 18px; border: 1px solid var(--c-line); border-radius: 3px; background: #000; image-rendering: pixelated; }

/* The confirm strip, opening under the head. */
.dm-cb-confirm { display: grid; grid-template-rows: 0fr; margin-top: -10px; transition: grid-template-rows .3s var(--c-e), margin .3s var(--c-e); }
.dm-cb-confirm > div { min-height: 0; overflow: hidden; }
.dm-cb-confirm.is-open { grid-template-rows: 1fr; margin-top: 0; }
.dm-cb-confirm-box {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid rgba(206, 58, 58, .3);
  border-radius: var(--c-r-sm); background: var(--c-danger-soft);
}
.dm-cb-confirm-box > .dm-i { color: var(--c-danger); }
.dm-cb-confirm-text { flex: 1 1 auto; font-size: 11px; color: var(--c-text); }
.dm-cb-confirm-box .dm-btn { height: 25px; font-size: 11.5px; padding: 0 9px; }

/* The live minimap. */
.dm-cb-live { background: #05070b; }
.dm-cb-live canvas { position: absolute; image-rendering: pixelated; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.dm-cb-livebar {
  position: absolute; left: 9px; top: 9px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px;
  border-radius: 99px; background: rgba(21, 29, 43, .9); border: 1px solid #26324a; color: #d5deeb; font-size: 10.5px;
}
.dm-cb-livebar .dm-dot { background: var(--c-brand); opacity: 1; animation: dm-breathe 2.2s var(--c-e) infinite; color: var(--c-brand); }
.dm-cb-livehint {
  position: absolute; left: 50%; bottom: 10px; translate: -50% 0; padding: 5px 11px; border-radius: 7px;
  background: rgba(21, 29, 43, .92); border: 1px solid #26324a; color: #d5deeb; font-size: 10.5px; white-space: nowrap;
}

/* A box being dragged over something. */
.dm-cb-box {
  position: absolute; z-index: 15; border: 1.5px dashed #4bb4ff; background: rgba(75, 180, 255, .16);
  border-radius: 2px; pointer-events: none;
}

/* Menus: what goes here, and the routes on file. */
.dm-cb-menu, .dm-cb-pop {
  position: absolute; z-index: 16; padding: 5px; border-radius: 9px; background: var(--c-surface);
  border: 1px solid var(--c-line); box-shadow: 0 12px 30px rgba(7, 22, 52, .2);
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top left;
  transition: opacity .16s var(--c-e), transform .16s var(--c-e);
}
.dm-cb-menu { width: 196px; }
.dm-cb-menu.is-in, .dm-cb-pop.is-in { opacity: 1; transform: none; }
.dm-cb-mhead { display: flex; flex-direction: column; gap: 1px; padding: 5px 7px 7px; border-bottom: 1px solid var(--c-line-soft); margin-bottom: 4px; }
.dm-cb-mhead b { font-family: var(--c-mono); font-size: 11px; font-weight: 600; color: var(--c-text); }
.dm-cb-pop .dm-cb-mhead b { font-family: var(--c-font); font-size: 11.5px; }
.dm-cb-mhead span { font-size: 10.5px; color: var(--c-ok); }
.dm-cb-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.dm-cb-mitem { display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 7px; border-radius: 5px; font-size: 11.5px; color: var(--c-text); transition: background .11s; }
.dm-cb-mitem.is-press { background: var(--c-hover); }
.dm-cb-mitem.is-off { opacity: .35; filter: grayscale(1); }
.dm-cb-pop { width: 168px; transform-origin: top right; }
.dm-cb-popitem { display: flex; align-items: center; gap: 8px; height: 27px; padding: 0 8px; border-radius: 5px; font-size: 11.5px; color: var(--c-text); }
.dm-cb-popitem .dm-i { width: 14px; height: 14px; color: var(--c-dim); }
.dm-cb-popitem.is-press { background: var(--c-hover); }

/* Script variables. */
.dm-cb-vars { background: var(--c-surface); display: flex; flex-direction: column; transform: translateX(0); transition: opacity .3s var(--c-e), transform .3s var(--c-e); }
.dm-cb-vars.is-hidden { transform: translateX(10px); }
.dm-cbv-head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 9px 12px; border-bottom: 1px solid var(--c-line-soft); }
.dm-cbv-head .dm-btn.is-icon { width: 27px; height: 27px; }
.dm-cbv-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dm-cbv-title > b { font-size: 12.5px; font-weight: 620; }
.dm-cbv-title span { font-size: 10px; color: var(--c-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-cbv-title span b { color: var(--c-muted); font-weight: 600; }
.dm-cbv-close { border-color: transparent; background: transparent; }
.dm-cbv-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 4px 8px 8px; }
.dm-cbv-sect { padding: 8px 4px 4px; font-size: 9.5px; font-weight: 650; letter-spacing: .8px; text-transform: uppercase; color: var(--c-muted); }
.dm-cbv-sect b { margin-left: 3px; color: var(--c-dim); font-weight: 600; }
.dm-cbv-row { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 5px; border-radius: var(--c-r-sm); }
.dm-cbv-row.is-new { animation: dm-cb-new 1.1s var(--c-e); }
.dm-cbv-tile { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 5px; background: #10151f; border: 1px solid #26324a; }
.dm-cbv-tile.is-group { background: var(--c-accent-soft); border-color: rgba(13, 54, 119, .2); color: var(--c-accent); }
.dm-cbv-tile .dm-i { width: 15px; height: 15px; }
.dm-cbv-item { width: 22px; height: 22px; display: block; }
.dm-cbv-text { min-width: 0; display: flex; flex-direction: column; }
.dm-cbv-name { font-family: var(--c-mono); font-size: 11.5px; font-weight: 600; color: var(--c-text); }
.dm-cbv-name span.is-typing::after { content: ""; display: inline-block; width: 1px; height: 13px; margin-left: 1px; vertical-align: -2px; background: var(--c-text); animation: dm-caret 1s steps(1) infinite; }
.is-typing-name .dm-cbv-name { padding: 1px 6px; border: 1px solid var(--c-accent); border-radius: 4px; min-width: 120px; }
.dm-cbv-sub { font-size: 10px; color: var(--c-dim); }
.dm-cbv-none { padding: 2px 6px; font-size: 10.5px; color: var(--c-dim); }
.dm-cbv-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 6px 6px 42px; animation: dm-appear .22s var(--c-e) both; }
.dm-cbv-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px 0 3px; border-radius: 99px;
  border: 1px solid var(--c-line); background: var(--c-surface); font: 500 10.5px var(--c-mono); color: var(--c-muted);
  transition: background .15s, color .15s, border-color .15s;
}
.dm-cbv-chip .dm-cbv-item { width: 15px; height: 15px; }
.dm-cbv-chip.is-on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.dm-cbv-chip.is-press { transform: scale(.96); }

/* The game, where a picture is taken: a dark strip of items. */
.dm-cbv-cap {
  position: absolute; left: 10px; right: 10px; top: 54px; z-index: 3; padding: 9px 10px 10px; border-radius: 9px;
  background: var(--c-game-bg); border: 1px solid var(--c-game-line); box-shadow: 0 16px 34px -12px rgba(7, 22, 52, .55);
  opacity: 0; transform: translateY(-8px); transition: opacity .25s var(--c-e), transform .25s var(--c-e);
}
.dm-cbv-cap.is-in { opacity: 1; transform: none; }
.dm-cbv-captitle { margin-bottom: 8px; font-size: 9.5px; font-weight: 650; letter-spacing: .8px; text-transform: uppercase; color: var(--c-game-dim); }
.dm-cbv-slots { display: flex; gap: 6px; }
.dm-cbv-slot { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 4px; background: var(--c-game-hi); border: 1px solid var(--c-game-line); }
.dm-cbv-slot .dm-cbv-item { width: 26px; height: 26px; }

/* Cavebot, chapters 5 to 7: sections, the Action, its script. */
.dm-cb-edit {
  display: flex; align-items: center; gap: 8px; margin: 2px 2px 6px 24px; padding: 6px 8px;
  border: 1px solid var(--c-line); border-left: 2px solid var(--c-accent); border-radius: var(--c-r-sm);
  background: var(--c-surface); animation: dm-appear .22s var(--c-e) both;
}
.dm-cb-edit-label { font-size: 10.5px; color: var(--c-muted); }
.dm-cb-edit .dm-input { flex: 1 1 auto; height: 24px; font-size: 11.5px; }
.dm-cb-row.is-running { background: rgba(200, 55, 55, .1); box-shadow: inset 2px 0 0 #c83737; }

/* The line the bot's log shows when the script runs. */
.dm-cb-log {
  position: absolute; left: 8px; right: 40px; top: 8px; z-index: 4; display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px; background: rgba(7, 22, 52, .94); color: #dbe6f6;
  font: 10.5px/1.45 var(--c-mono); box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(-6px); transition: opacity .25s var(--c-e), transform .25s var(--c-e);
}
.dm-cb-log.is-in { opacity: 1; transform: none; }
.dm-cb-log .dm-i { width: 13px; height: 13px; color: #ff8a8a; flex: none; }
.dm-cb-log b { color: #fff; font-weight: 600; }

/* The script editor: the client's own dialog. */
.dm-ed-scrim {
  /* Centred over the content, right of the rail - the corner the Arduino square sits in stays clear. */
  position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; padding: 34px 0 0 136px;
  background: rgba(7, 22, 52, .38); opacity: 0; pointer-events: none; transition: opacity .25s var(--c-e);
}
.dm-ed-scrim.is-open { opacity: 1; }
.dm-ed-scrim.is-gone { display: none; }
.dm-ed {
  width: 636px; height: 426px; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 12px; background: var(--c-surface); box-shadow: 0 30px 70px -20px rgba(7, 22, 52, .55);
  transform: translateY(10px) scale(.98); transition: transform .3s cubic-bezier(.3, 1.3, .45, 1);
}
.dm-ed-scrim.is-open .dm-ed { transform: none; }
.dm-ed-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px 12px; }
.dm-ed-logo { position: relative; width: 38px; height: 38px; flex: none; }
.dm-ed-logo img { width: 38px; height: 38px; border-radius: 9px; display: block; }
.dm-ed-logo i {
  position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; display: grid; place-items: center;
  border-radius: 50%; background: var(--c-navy-800); color: #fff; box-shadow: 0 0 0 2px #fff;
}
.dm-ed-logo i .dm-i { width: 10px; height: 10px; }
.dm-ed-title { display: flex; flex-direction: column; }
.dm-ed-title > b { font-size: 14.5px; font-weight: 640; }
.dm-ed-title span { font-size: 11.5px; color: var(--c-muted); }
.dm-ed-title span b { color: var(--c-text); font-weight: 600; }
.dm-ed-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 212px; gap: 12px; padding: 0 18px 14px; }
.dm-ed-main { display: flex; flex-direction: column; min-height: 0; }
.dm-ed-box {
  position: relative; flex: 1 1 auto; min-height: 0; display: flex; border: 1px solid var(--c-accent);
  border-radius: 9px 9px 0 0; background: var(--c-surface);
}
.dm-ed-gutter {
  flex: none; min-width: 34px; padding: 8px 0; background: var(--c-bg); border-right: 1px solid var(--c-line-soft);
  border-radius: 9px 0 0 0; font: 12px/20px var(--c-mono); color: var(--c-dim); text-align: right;
}
.dm-ed-gutter div { padding: 0 9px 0 8px; }
.dm-ed-gutter div.is-cur { color: var(--c-text); font-weight: 600; }
.dm-ed-code { position: relative; flex: 1 1 auto; min-width: 0; padding: 8px 0; font: 12.5px/20px var(--c-mono); color: #0e1a2b; white-space: pre; }
.dm-ed-line { height: 20px; padding: 0 10px; }
.dm-ed-line.is-cur { background: rgba(13, 54, 119, .045); }
.dm-ed-caret { display: inline-block; width: 1.5px; height: 16px; margin-left: 1px; vertical-align: -3px; background: #0e1a2b; animation: dm-caret 1s steps(1) infinite; }
.dm-ed-probe { position: absolute; visibility: hidden; font: 12.5px var(--c-mono); }
.dm-ed-code i { font-style: normal; }
.tk-kw  { color: #1e5aaa; font-weight: 700; }
.tk-api { color: #147868; font-weight: 700; }
.tk-var { color: #be6e14; font-weight: 700; }
.tk-str { color: #a0502a; }
.tk-num { color: #7846a0; }
.tk-com { color: #6f8a7e; font-style: italic !important; }
.tk-op  { color: #6a778c; }
.dm-ed-status {
  display: flex; align-items: center; gap: 14px; height: 27px; padding: 0 10px; border: 1px solid var(--c-line);
  border-top: 0; border-radius: 0 0 9px 9px; background: var(--c-bg); font-size: 11px; color: var(--c-muted);
}
.dm-ed-pos { font-family: var(--c-mono); font-size: 10.5px; }
.dm-ed-check { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dm-ed-check .dm-i { width: 13px; height: 13px; }
.dm-ed-check.is-ok { color: var(--c-ok); }
.dm-ed-check.is-busy { color: var(--c-dim); }

.dm-ed-pop {
  position: absolute; z-index: 5; width: 330px; overflow: hidden; border: 1px solid var(--c-line); border-radius: 6px;
  background: var(--c-surface); box-shadow: 0 10px 28px rgba(7, 22, 52, .16); white-space: normal;
  animation: dm-appear .14s var(--c-e) both;
}
.dm-ed-poplist { padding: 3px; }
.dm-ed-popitem { display: grid; grid-template-columns: 18px auto minmax(0, 1fr); align-items: center; gap: 8px; height: 25px; padding: 0 7px; border-radius: 4px; }
.dm-ed-popitem.is-on { background: var(--c-accent-soft); }
.dm-ed-kind { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; font: 700 10px var(--c-mono); color: #fff; }
.dm-ed-kind.k-fn { background: #147868; }
.dm-ed-kind.k-var { background: #be6e14; }
.dm-ed-popname { font: 12px var(--c-mono); color: var(--c-text); white-space: nowrap; }
.dm-ed-popname b { color: var(--c-accent); font-weight: 700; }
.dm-ed-popsig { font: 10.5px var(--c-mono); color: var(--c-dim); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-ed-popdoc { padding: 6px 10px 7px; border-top: 1px solid var(--c-line-soft); background: var(--c-bg); font-size: 11px; line-height: 1.45; color: var(--c-muted); }
.dm-ed-popdoc code { font: 11px var(--c-mono); color: var(--c-text); }

.dm-ed-ref { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-bg); }
.dm-ed-search {
  display: flex; align-items: center; gap: 7px; margin: 8px; height: 28px; padding: 0 9px; border: 1px solid var(--c-line);
  border-radius: 6px; background: var(--c-surface); font-size: 11.5px; color: var(--c-dim);
}
.dm-ed-search .dm-i { width: 13px; height: 13px; }
.dm-ed-list { padding: 0 8px 8px; overflow: hidden; }
.dm-ed-cat { padding: 7px 4px 3px; font-size: 9.5px; font-weight: 650; letter-spacing: .8px; text-transform: uppercase; color: var(--c-dim); }
.dm-ed-fn { padding: 4px 4px 5px; border-radius: 5px; }
.dm-ed-fn { white-space: nowrap; }
.dm-ed-fn b { font: 700 11px var(--c-mono); color: #147868; }
.dm-ed-fn small { margin-left: 5px; font-size: 9px; font-weight: 600; color: var(--c-dim); }
.dm-ed-fn span { display: block; font-size: 10.5px; line-height: 1.35; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dm-ed-foot {
  display: flex; align-items: center; gap: 8px; padding: 11px 18px; border-top: 1px solid var(--c-line-soft); background: var(--c-bg);
}
.dm-ed-keys { font-size: 10.5px; color: var(--c-dim); white-space: nowrap; }
.dm-ed-keys kbd {
  display: inline-block; margin: 0 2px; padding: 1px 5px; border: 1px solid var(--c-line); border-radius: 4px;
  background: var(--c-surface); font: 10px var(--c-font); color: var(--c-muted);
}
.dm-ed-grow { flex: 1 1 auto; }
.dm-ed-foot .dm-btn { height: 31px; padding: 0 16px; }
.dm-ed-ghost { border-color: transparent; background: transparent; }

/* ══ The shorter films' shared parts ════════════════════════════════════ */
.dm-glyph { width: 20px; height: 20px; display: block; flex: none; }
.dm-rule-pic.is-dark { background: #10151f; border-color: #26324a; }
.dm-rule-key.is-danger { color: var(--c-danger); border-color: rgba(206, 58, 58, .35); }

/* A setting: text on the left, its control on the right. */
.dm-setting { display: flex; align-items: center; gap: 12px; padding: 7px 2px; border-top: 1px solid var(--c-line-soft); transition: opacity .3s var(--c-e); }
.dm-card-head + .dm-setting { border-top: 0; padding-top: 2px; }
.dm-setting-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dm-setting-text b { font-size: 12px; font-weight: 600; line-height: 1.35; }
.dm-setting-text span { font-size: 10.5px; color: var(--c-dim); line-height: 1.35; }
.dm-setting-ctl { display: flex; align-items: center; gap: 6px; flex: none; }
.dm-setting-ctl .dm-btn { height: 26px; font-size: 11.5px; }
.dm-setting-ctl .dm-input { height: 26px; justify-content: center; }
.dm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; align-items: start; }
.dm-pair > .dm-card { margin-top: 0; }
.dm-card.is-dim .dm-setting { opacity: .42; }

/* The battle list, in the game's dark. */
.dm-battle-row {
  position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) 76px; align-items: center; gap: 8px;
  height: 25px; padding: 0 6px; border: 1px solid transparent; border-radius: 5px; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.dm-battle-row.is-target { border-color: #e5484d; box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .35); }
.dm-battle-row.is-dead .dm-battle-name { text-decoration: line-through; color: var(--c-game-dim); }
.dm-battle-row.is-unlisted .dm-battle-name { color: #ffd166; }
.dm-avatar { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; font: 700 10px var(--c-font); color: #fff; }
.dm-battle-name { font-size: 11px; color: var(--c-game-text); white-space: nowrap; }
.dm-battle-hp { display: block; height: 5px; border-radius: 99px; background: var(--c-game-hi); overflow: hidden; }
.dm-battle-hp i { display: block; height: 100%; background: linear-gradient(90deg, #2f9e44, #6ad37a); transform-origin: left; }
.dm-loot {
  position: absolute; right: 5px; top: 50%; translate: 0 -50%; display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px 1px 3px; border-radius: 99px; background: #2a2412; color: #ffd166; font-size: 10px; font-weight: 600;
  animation: dm-appear .2s var(--c-e) both;
}
.dm-loot .dm-glyph { width: 14px; height: 14px; }

/* An alarm: a bell that rings, and what it is about. */
.dm-alarm {
  position: absolute; z-index: 16; display: flex; align-items: center; gap: 10px; padding: 8px 13px 8px 9px; border-radius: 10px;
  background: #fff; border: 1px solid rgba(200, 123, 22, .45); box-shadow: 0 14px 30px -12px rgba(7, 22, 52, .4);
  font-size: 11px; color: var(--c-muted); opacity: 0; transform: translateY(6px); transition: opacity .25s var(--c-e), transform .25s var(--c-e);
}
.dm-alarm.is-in { opacity: 1; transform: none; }
.dm-alarm b { display: block; font-size: 11.5px; font-weight: 650; color: var(--c-warn); }
.dm-alarm-bell { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-warn-soft); color: var(--c-warn); }
.dm-alarm-bell .dm-i { width: 15px; height: 15px; animation: dm-ring .5s ease-in-out infinite; transform-origin: 50% 15%; }
.dm-alarm-bell i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(200, 123, 22, .5); animation: dm-wave 1.2s ease-out infinite; }
.dm-alarm-bell i + i { animation-delay: .6s; }
@keyframes dm-ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 75% { transform: rotate(-14deg); } }
@keyframes dm-wave { from { transform: scale(1); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }

/* Caster: a little arena and the spells cooling down. */
.dm-cast { display: flex; align-items: center; gap: 14px; }
.dm-arena {
  position: relative; width: 126px; height: 90px; flex: none; border-radius: 6px; overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 18px 18px,
    #1b2a1c;
  border: 1px solid var(--c-game-line);
}
.dm-me, .dm-mob {
  position: absolute; width: 12px; height: 12px; margin: 3px; border-radius: 50%;
  left: calc((3 + var(--x, 0)) * 18px); top: calc((2 + var(--y, 0)) * 18px);
}
.dm-me { background: #fff; box-shadow: 0 0 0 2.5px #2f6fd6, 0 0 10px rgba(75, 180, 255, .6); }
.dm-mob { background: #e5484d; box-shadow: 0 0 0 2px rgba(0, 0, 0, .35); transition: opacity .4s, transform .4s; }
.dm-mob.is-gone { opacity: 0; transform: scale(.4); }
.dm-slots { display: flex; gap: 8px; }
.dm-slot {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 6px;
  background: var(--c-game-hi); border: 1px solid var(--c-game-line); transition: box-shadow .12s, border-color .12s;
}
.dm-slot .dm-glyph { width: 26px; height: 26px; }
.dm-slot .dm-cd {
  position: absolute; inset: 0; border-radius: 5px; pointer-events: none;
  background: conic-gradient(rgba(5, 8, 14, .78) var(--cd, 0deg), transparent 0);
}
.dm-slot b { position: absolute; bottom: -17px; left: 0; right: 0; text-align: center; font: 600 9.5px var(--c-mono); color: var(--c-game-dim); }
.dm-slot.is-cast { border-color: #ffd166; box-shadow: 0 0 0 2px rgba(255, 209, 102, .35), 0 0 14px rgba(255, 209, 102, .4); }
.dm-game-body .dm-cast { padding-bottom: 14px; }

/* Equipment: the two slots in the game. */
.dm-eq { display: flex; gap: 18px; margin-top: 11px; }
.dm-eq-slot { display: flex; align-items: center; gap: 8px; }
.dm-eq-box {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px;
  border: 1px dashed var(--c-game-line); background: var(--c-game-hi); transition: border-color .2s, box-shadow .25s;
}
.dm-eq-box .dm-glyph { width: 26px; height: 26px; animation: dm-pop .3s cubic-bezier(.3, 1.3, .45, 1) both; }
@keyframes dm-pop { from { transform: scale(.4); opacity: 0; } }
.dm-eq-slot.is-on .dm-eq-box { border-style: solid; border-color: #c9a646; box-shadow: 0 0 12px rgba(201, 166, 70, .35); }
.dm-eq-slot b { font-size: 10.5px; font-weight: 500; color: var(--c-game-dim); white-space: nowrap; }
.dm-eq-slot.is-kept .dm-eq-box { box-shadow: 0 0 0 2px rgba(75, 180, 255, .55); }
.dm-eq-slot.is-kept b::after { content: " · already on"; color: #9fd9ff; }

/* Conditions: the status icons in the game. */
.dm-status { display: flex; align-items: center; gap: 10px; min-height: 58px; }
.dm-status-icon {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: opacity .35s var(--c-e), transform .35s var(--c-e); animation: dm-pop .3s cubic-bezier(.3, 1.3, .45, 1) both;
}
.dm-status-icon .dm-glyph { width: 30px; height: 30px; padding: 3px; border-radius: 6px; background: var(--c-game-hi); border: 1px solid var(--c-game-line); box-sizing: content-box; }
.dm-status-icon b { font-size: 9.5px; font-weight: 500; color: var(--c-game-dim); }
.dm-status-icon.is-out { opacity: 0; transform: scale(.6); }

/* Tools: rings, the quiver, the notes. */
.dm-tool-row { display: flex; align-items: center; gap: 14px; padding: 4px 2px 8px; }
.dm-tool-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dm-tool-text b { font-size: 12.5px; font-weight: 600; }
.dm-tool-text span { font-size: 10.5px; color: var(--c-dim); line-height: 1.4; }
.dm-tool-text .dm-seg span { font-size: 11px; color: var(--c-muted); padding: 0 8px; height: 21px; }
.dm-tool-text .dm-seg span.is-on { color: #fff; }
.dm-tool-sub b { color: var(--c-text); font-weight: 600; }
.dm-tool-note { font-size: 11px; line-height: 1.5; color: var(--c-muted); padding: 0 2px 4px; }
.dm-ring { position: relative; display: grid; place-items: center; width: 62px; height: 62px; flex: none; }
.dm-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.dm-ring-bg { fill: none; stroke: var(--c-line-soft); stroke-width: 4; }
.dm-ring-fg { fill: none; stroke: var(--c-accent); stroke-width: 4; stroke-linecap: round; }
.dm-ring b { position: relative; font: 600 11.5px var(--c-mono); color: var(--c-muted); }
.dm-ring.is-on b { color: var(--c-text); }
.dm-ring-face {
  position: absolute; top: 6px; left: 50%; width: 0; height: 0; margin-left: -4px;
  border: 4px solid transparent; border-bottom: 6px solid var(--c-brand); transform-origin: 4px 26px;
  opacity: 0; transition: transform .35s cubic-bezier(.3, 1.3, .45, 1), opacity .3s;
}
.dm-ring.is-on .dm-ring-face { opacity: 1; }
.dm-ring.is-turn { animation: dm-turn .3s var(--c-e); }
@keyframes dm-turn { 50% { transform: scale(1.06); } }
.dm-quiver-slot {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 7px;
  background: #10151f; border: 1px solid #26324a; transition: border-color .2s, box-shadow .2s;
}
.dm-quiver-slot .dm-glyph { width: 30px; height: 30px; }
.dm-quiver-slot b { position: absolute; right: 3px; bottom: 1px; font: 700 9.5px var(--c-mono); color: #fff; text-shadow: 0 1px 1px #000; }
.dm-quiver-slot.is-low { border-color: #ffd166; box-shadow: 0 0 0 2px rgba(255, 209, 102, .3); }
.dm-quiver { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.dm-quiver span { font-size: 10.5px; color: var(--c-dim); }
.dm-quiver span b { color: var(--c-text); }
.dm-quiver-track { position: relative; height: 8px; border-radius: 99px; background: var(--c-line-soft); overflow: hidden; }
.dm-quiver-track i { display: block; height: 100%; background: var(--c-accent); transform-origin: left; }
.dm-quiver-mark { position: absolute; top: 0; bottom: 0; left: 95%; width: 2px; background: var(--c-warn); }

/* Alerts: the watched stretch of the game, and a sound. */
.dm-watch { position: relative; padding: 6px 8px; border-radius: 6px; background: var(--c-game-hi); border: 1px solid var(--c-game-line); transition: border-color .3s, box-shadow .3s; }
.dm-watch.is-watched { border: 1.5px dashed #4bb4ff; box-shadow: 0 0 0 3px rgba(75, 180, 255, .12); }
.dm-watch-names { display: flex; flex-direction: column; gap: 3px; }
.dm-watch-name { display: flex; align-items: center; gap: 7px; height: 18px; font-size: 11px; color: var(--c-game-text); }
.dm-watch-name i { width: 10px; height: 10px; border-radius: 3px; background: #6e7e98; }
.dm-watch-name.is-red { color: #ff6b6b; font-weight: 600; }
.dm-watch-name.is-red i { background: #e5484d; box-shadow: 0 0 8px rgba(229, 72, 77, .7); }
.dm-watch-pre {
  display: flex; align-items: center; justify-content: center; gap: 3px; width: 92px; height: 29px; border-radius: var(--c-r-sm);
  border: 1px dashed var(--c-line); font-size: 11px; color: var(--c-dim);
}
.dm-watch-pre.is-set { border-style: solid; border-color: var(--c-line); background: #10151f; flex-direction: column; gap: 2px; padding: 4px 8px; align-items: stretch; }
.dm-watch-pre.is-set i { display: block; height: 3px; border-radius: 2px; background: #6e7e98; }
.dm-eqz { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; margin-left: 4px; }
.dm-eqz i { width: 3px; border-radius: 1px; background: var(--c-warn); animation: dm-eqz .7s ease-in-out infinite alternate; }
.dm-eqz i:nth-child(1) { animation-delay: -.1s; } .dm-eqz i:nth-child(2) { animation-delay: -.45s; }
.dm-eqz i:nth-child(3) { animation-delay: -.25s; } .dm-eqz i:nth-child(4) { animation-delay: -.6s; } .dm-eqz i:nth-child(5) { animation-delay: -.35s; }
@keyframes dm-eqz { from { height: 3px; } to { height: 16px; } }
.dm-tool-text .dm-seg { align-self: flex-start; }

/* ══ Scenes: films that are a picture of what a module is for, not the client's screen ═════ */
.dm.dm-scene {
  display: block;
  background:
    linear-gradient(rgba(13, 54, 119, .045) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(13, 54, 119, .045) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(80% 90% at 42% 40%, #ffffff, #eaf0f8);
}

/* Remote View: a computer, a phone, the link between them. */
.dm-rv-monitor { position: absolute; left: 36px; top: 44px; width: 482px; height: 352px; }
.dm-rv-screen {
  position: absolute; left: 0; top: 0; width: 482px; height: 300px; overflow: hidden;
  border: 10px solid #0e1a2b; border-radius: 14px; background: linear-gradient(160deg, #123a7a, #071634 62%);
  box-shadow: 0 30px 60px -30px rgba(7, 22, 52, .65);
}
.dm-rv-neck { position: absolute; left: 221px; top: 300px; width: 40px; height: 34px; background: linear-gradient(90deg, #aab6c6, #d2dbe6, #aab6c6); }
.dm-rv-base { position: absolute; left: 156px; top: 332px; width: 170px; height: 12px; border-radius: 6px; background: linear-gradient(#d2dbe6, #aab6c6); box-shadow: 0 10px 18px -8px rgba(7, 22, 52, .4); }

.dm-rv-win { position: absolute; overflow: hidden; border-radius: 8px; background: #0b0e15; box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .65); }
.dm-rv-bar { display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; background: #1a2333; font-size: 9.5px; color: #9fb0c8; }
.dm-rv-bar i { width: 7px; height: 7px; border-radius: 50%; background: #3a4760; }
.dm-rv-bar i:nth-child(1) { background: #e5484d; } .dm-rv-bar i:nth-child(2) { background: #ffb224; } .dm-rv-bar i:nth-child(3) { background: #3fb950; }
.dm-rv-bar i.is-press { filter: brightness(1.3); transform: scale(1.2); }
.dm-rv-bar span { margin-left: 5px; }
.dm-rv-bar.is-navy { background: #071634; color: #fff; font-weight: 600; }
.dm-rv-bar.is-navy img { width: 12px; height: 12px; border-radius: 3px; }
.dm-rv-game { left: 10px; top: 12px; width: 292px; height: 204px; transform-origin: 50% 120%; transition: transform .45s cubic-bezier(.5, 0, .75, 0), opacity .4s; }
.dm-rv-game canvas { display: block; }
.dm-rv-game.is-min { transform: scale(.08) translateY(400px); opacity: 0; }
.dm-rv-bot { left: 312px; top: 12px; width: 140px; height: 204px; background: #f2f5fa; }
.dm-rv-panel { display: flex; flex-direction: column; gap: 7px; padding: 9px; font-size: 10px; color: var(--c-text); }
.dm-rv-ptitle { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 650; }
.dm-rv-ptitle .dm-i { width: 12px; height: 12px; color: var(--c-accent); }
.dm-rv-ptitle .dm-switch { margin-left: auto; transform: scale(.82); transform-origin: right center; }
.dm-rv-ptitle .dm-switch-label { display: none; }
.dm-rv-field {
  display: flex; flex-direction: column; gap: 2px; padding: 5px 7px; border-radius: 6px; background: #fff; border: 1px solid var(--c-line);
  transition: opacity .3s var(--c-e), transform .3s var(--c-e);
}
.dm-rv-field span { font-size: 8.5px; color: var(--c-dim); }
.dm-rv-field b { font: 600 9.5px var(--c-mono); color: var(--c-text); white-space: nowrap; }
.dm-rv-viewers { display: flex; align-items: center; gap: 5px; font-size: 9.5px; color: var(--c-dim); transition: opacity .3s, transform .3s; }
.dm-rv-viewers i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-line); }
.dm-rv-viewers.is-live { color: var(--c-text); }
.dm-rv-viewers.is-live i { background: var(--c-brand); color: var(--c-brand); animation: dm-breathe 1.6s var(--c-e) infinite; }
.dm-rv-panel .is-off { opacity: 0; transform: translateY(4px); }

.dm-rv-float {
  position: absolute; left: 160px; top: 96px; width: 136px; overflow: hidden; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .7); opacity: 0; transform: scale(.85); transition: opacity .35s var(--c-e), transform .35s cubic-bezier(.3, 1.3, .45, 1);
}
.dm-rv-float.is-in { opacity: 1; transform: none; }
.dm-rv-fbar { display: flex; align-items: center; gap: 4px; height: 16px; padding: 0 6px; background: #071634; color: #fff; font-size: 8.5px; }
.dm-rv-fbar .dm-i { width: 10px; height: 10px; color: var(--c-brand); }
.dm-rv-float canvas { display: block; }

.dm-rv-phone {
  position: absolute; left: 606px; top: 62px; width: 160px; height: 334px; padding: 8px; border-radius: 28px; background: #0e1a2b;
  box-shadow: 0 30px 60px -28px rgba(7, 22, 52, .7), inset 0 0 0 1px rgba(255, 255, 255, .06);
  opacity: 0; transform: translateX(46px) rotate(3deg); transition: opacity .6s var(--c-e), transform .7s cubic-bezier(.3, 1.2, .45, 1);
}
.dm-rv-phone.is-in { opacity: 1; transform: none; }
.dm-rv-pscreen { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; border-radius: 21px; background: #f2f5fa; }
.dm-rv-notch { position: absolute; z-index: 2; top: 6px; left: 50%; width: 46px; height: 11px; margin-left: -23px; border-radius: 6px; background: #0e1a2b; }
.dm-rv-url {
  display: flex; align-items: center; gap: 5px; height: 22px; margin: 25px 8px 7px; padding: 0 8px; border-radius: 11px;
  background: #fff; border: 1px solid var(--c-line); font: 9px var(--c-mono); color: var(--c-muted); white-space: nowrap; overflow: hidden;
}
.dm-rv-url .dm-i { width: 10px; height: 10px; color: var(--c-accent); flex: none; }
.dm-rv-urltext.is-typing::after { content: ""; display: inline-block; width: 1px; height: 10px; margin-left: 1px; vertical-align: -1px; background: var(--c-text); animation: dm-caret 1s steps(1) infinite; }
.dm-rv-live { position: relative; height: 196px; display: grid; place-items: center; background: #0b0e15; overflow: hidden; }
.dm-rv-live canvas { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.dm-rv-wait { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #9fb0c8; transition: opacity .3s; }
.dm-rv-phone.is-live .dm-rv-live canvas { opacity: 1; }
.dm-rv-phone.is-live .dm-rv-wait { opacity: 0; }
.dm-rv-pfoot { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; font-size: 9px; color: var(--c-dim); }
.dm-rv-badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-dim); }
.dm-rv-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-line); }
.dm-rv-phone.is-live .dm-rv-badge { color: #e5484d; }
.dm-rv-phone.is-live .dm-rv-badge i { background: #e5484d; color: #e5484d; animation: dm-breathe 1.4s var(--c-e) infinite; }
.dm-rv-tap {
  position: absolute; z-index: 2; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  background: rgba(255, 255, 255, .3); border: 2px solid #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .6);
  opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s cubic-bezier(.3, 1.3, .45, 1);
}
.dm-rv-tap.is-in { opacity: 1; transform: none; }

.dm-rv-beam { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.dm-rv-beam.is-on { opacity: 1; }
.dm-rv-beam svg { position: absolute; inset: 0; width: 800px; height: 500px; overflow: visible; }
.dm-rv-glow { fill: none; stroke: rgba(75, 180, 255, .22); stroke-width: 9; stroke-linecap: round; }
.dm-rv-dash { fill: none; stroke: #4bb4ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 10; animation: dm-rv-flow .8s linear infinite; }
@keyframes dm-rv-flow { to { stroke-dashoffset: -24; } }
.dm-rv-task { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(4, 10, 24, .82); border-top: 1px solid rgba(255, 255, 255, .06); }
.dm-rv-task img { width: 14px; height: 14px; border-radius: 3px; }
.dm-rv-tgame { position: relative; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; color: #c9d7ee; background: rgba(255, 255, 255, .08); }
.dm-rv-tgame .dm-i { width: 12px; height: 12px; }
.dm-rv-tgame::after { content: ""; position: absolute; bottom: -3px; left: 5px; right: 5px; height: 2px; border-radius: 2px; background: #4bb4ff; }
.dm-rv-tgame.is-min { background: transparent; }
.dm-rv-tgame.is-min::after { left: 7px; right: 7px; opacity: .6; }
.dm-rv-clock { position: absolute; right: 10px; font: 9px var(--c-mono); color: #9fb0c8; }

/* Trade & Depot: a town trip, drawn. */
.dm-tr-svg { position: absolute; inset: 0; width: 800px; height: 500px; }
.dm-tr-road { fill: none; stroke: #c3cede; stroke-width: 5; stroke-linecap: round; stroke-dasharray: .5 11; }
.dm-tr-done { fill: none; stroke: #2f6fd6; stroke-width: 3; stroke-linecap: round; }
.dm-tr-stop { position: absolute; width: 62px; height: 62px; transform: translate(-50%, -50%); }
.dm-tr-node {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #fff; color: var(--c-dim);
  border: 1px solid var(--c-line); box-shadow: 0 10px 22px -12px rgba(7, 22, 52, .35); transition: background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.dm-tr-node .dm-i { width: 27px; height: 27px; }
.dm-tr-stop > b { position: absolute; top: 68px; left: 50%; translate: -50% 0; font-size: 12.5px; font-weight: 600; color: var(--c-muted); white-space: nowrap; }
.dm-tr-stop.is-here .dm-tr-node { border-color: #2f6fd6; color: #2f6fd6; box-shadow: 0 0 0 5px rgba(47, 111, 214, .12), 0 10px 22px -12px rgba(7, 22, 52, .35); }
.dm-tr-stop.is-done .dm-tr-node { background: var(--c-navy-800); border-color: var(--c-navy-700); color: var(--c-brand); }
.dm-tr-token {
  position: absolute; z-index: 3; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: #fff; border: 3px solid #1f56b3; box-shadow: 0 0 0 6px rgba(75, 180, 255, .25), 0 6px 12px rgba(7, 22, 52, .3);
}
.dm-tr-card {
  position: absolute; left: 50%; bottom: 74px; translate: -50% 0; z-index: 2; display: flex; align-items: center; gap: 9px;
  padding: 8px 14px 8px 9px; border-radius: 11px; background: #fff; border: 1px solid var(--c-line);
  box-shadow: 0 14px 28px -14px rgba(7, 22, 52, .4); font-size: 13px; color: var(--c-muted); white-space: nowrap;
  opacity: 0; transform: translateY(6px); transition: opacity .3s var(--c-e), transform .3s var(--c-e);
}
.dm-tr-stop.is-low .dm-tr-card { bottom: auto; top: 96px; }
.dm-tr-card.is-in { opacity: 1; transform: none; }
.dm-tr-card.is-gone { opacity: 0; transform: translateY(-6px); }
.dm-tr-card b { color: var(--c-text); font-weight: 650; }
.dm-tr-card .dm-glyph, .dm-tr-card .dm-i { width: 25px; height: 25px; color: var(--c-accent); }
.dm-tr-fly { position: absolute; z-index: 4; width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.dm-tr-fly .dm-glyph { width: 26px; height: 26px; }
.dm-tr-bubble {
  position: absolute; z-index: 5; padding: 3px 9px; border-radius: 9px; background: #0b0e15; color: #ffd166;
  font: 600 11px var(--c-mono); white-space: nowrap; transform: translate(-50%, -140%); opacity: 0;
  transition: opacity .25s, transform .35s var(--c-e);
}
.dm-tr-bubble.is-in { opacity: 1; transform: translate(-50%, -190%); }
.dm-tr-bubble.is-gone { opacity: 0; transform: translate(-50%, -230%); }
.dm-tr-code {
  position: absolute; left: 524px; top: 92px; width: 256px; overflow: hidden; border-radius: 11px; background: #fff;
  border: 1px solid var(--c-line); box-shadow: 0 24px 48px -26px rgba(7, 22, 52, .45);
}
.dm-tr-cbar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; background: var(--c-bg); border-bottom: 1px solid var(--c-line-soft); font: 10.5px var(--c-mono); color: var(--c-muted); }
.dm-tr-cbar i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-line); }
.dm-tr-cbar span { margin-left: 5px; }
.dm-tr-lines { padding: 6px 0 8px; }
.dm-tr-line { display: flex; gap: 8px; height: 21px; align-items: center; padding: 0 10px 0 6px; font: 10px var(--c-mono); color: #0e1a2b; white-space: nowrap; transition: background .25s, opacity .25s; }
.dm-tr-line i { font-style: normal; }
.dm-tr-ln { width: 12px; text-align: right; color: var(--c-dim); flex: none; }
.dm-tr-line.is-past { opacity: .55; }
.dm-tr-line.is-on { background: rgba(75, 180, 255, .14); box-shadow: inset 2px 0 0 #2f6fd6; opacity: 1; }

/* Scripting: the editor, the API, the output of a test run. */
.dm-sx-win {
  position: absolute; left: 26px; top: 50px; width: 452px; height: 404px; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 12px; background: #fff; border: 1px solid var(--c-line); box-shadow: 0 30px 60px -30px rgba(7, 22, 52, .5);
}
.dm-sx-bar { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 12px; border-bottom: 1px solid var(--c-line-soft); }
.dm-sx-file { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--c-mono); }
.dm-sx-file .dm-i { width: 14px; height: 14px; color: var(--c-accent); }
.dm-sx-where { font-size: 11px; color: var(--c-dim); }
.dm-sx-grow { flex: 1 1 auto; }
.dm-sx-bar .dm-btn { height: 27px; font-size: 12px; }
.dm-sx-win .dm-ed-box { position: relative; margin: 10px 10px 0; border-color: var(--c-line); }
.dm-sx-win .dm-ed-status { margin: 0 10px 10px; }
.dm-sx-hint {
  position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: 6px;
  background: #0e1a2b; color: #c9d7ee; white-space: nowrap; box-shadow: 0 10px 24px -8px rgba(7, 22, 52, .5);
  animation: dm-appear .16s var(--c-e) both;
}
.dm-sx-hint code { font: 11.5px var(--c-mono); color: #9fb0c8; }
.dm-sx-hint code b { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.dm-sx-hint span { font-size: 10.5px; color: #8fa3c0; }

.dm-sx-api, .dm-sx-out {
  position: absolute; left: 492px; width: 282px; overflow: hidden; border-radius: 12px; background: #fff;
  border: 1px solid var(--c-line); box-shadow: 0 24px 48px -28px rgba(7, 22, 52, .45);
}
.dm-sx-api { top: 50px; height: 268px; padding-bottom: 6px; }
.dm-sx-out { top: 328px; height: 140px; }
.dm-sx-head { display: flex; align-items: center; gap: 6px; padding: 8px 11px; border-bottom: 1px solid var(--c-line-soft); font-size: 11px; font-weight: 650; letter-spacing: .5px; text-transform: uppercase; color: var(--c-muted); }
.dm-sx-head .dm-i { width: 13px; height: 13px; }
.dm-sx-group { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: start; gap: 6px; padding: 6px 11px 0; }
.dm-sx-group > div { display: flex; flex-wrap: wrap; gap: 3px; }
.dm-sx-group > span { padding-top: 3px; font-size: 8.5px; font-weight: 650; letter-spacing: .6px; text-transform: uppercase; color: var(--c-dim); white-space: nowrap; }
.dm-sx-chip {
  font: normal 600 9.5px var(--c-mono); color: #147868; padding: 2px 6px; border-radius: 5px; background: var(--c-bg); border: 1px solid var(--c-line-soft);
  transition: background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.dm-sx-chip.is-used { background: #147868; border-color: #147868; color: #fff; box-shadow: 0 4px 10px -4px rgba(20, 120, 104, .6); }
.dm-sx-log { padding: 6px 0; }
.dm-sx-ln { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 11px; font: 10.5px/1.5 var(--c-mono); color: var(--c-text); white-space: nowrap; }
.dm-sx-ln i { font-style: normal; }
.dm-sx-ln b { color: var(--c-ok); font-weight: 600; }
.dm-sx-ln.is-run { color: var(--c-dim); }
.dm-sx-ln.is-print span { color: #7846a0; }
.dm-sx-ln.is-done { color: var(--c-ok); font-weight: 600; }

/* ══ Arduino mode: the home page's own section. A board on its mat, a cable, the computer ═══ */
.dm-ar-mat {
  position: absolute; left: 22px; top: 92px; width: 318px; height: 312px; border-radius: 20px;
  background:
    linear-gradient(rgba(120, 160, 220, .07) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(120, 160, 220, .07) 1px, transparent 1px) 0 0 / 18px 18px,
    radial-gradient(90% 80% at 45% 45%, #13254a, #0a1428);
  border: 1px solid #0d1c3a;
  box-shadow: 0 30px 60px -30px rgba(7, 22, 52, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* The cable: drawn in from the computer, then plugged; light runs along it while it carries. */
.dm-ar-wire { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dm-ar-wire svg { position: absolute; inset: 0; width: 800px; height: 500px; overflow: visible; }
.dm-ar-cord { fill: none; stroke: #1b2333; stroke-width: 7; stroke-linecap: round; }
.dm-ar-flow {
  fill: none; stroke: #4bb4ff; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 2 12;
  opacity: 0; transition: opacity .3s; animation: dm-ar-flow .6s linear infinite reverse;
}
.dm-ar-wire.is-sending .dm-ar-flow { opacity: 1; }
@keyframes dm-ar-flow { to { stroke-dashoffset: -14; } }
.dm-ar-plug { fill: #1b2333; opacity: 0; transform: translateX(16px); transition: opacity .2s, transform .28s var(--c-e); }
.dm-ar-wire.is-plugged .dm-ar-plug { opacity: 1; transform: none; }
.dm-ar-plug .dm-ar-plug-tip { fill: #aeb8c6; }
.dm-ar-leads path { fill: none; stroke: rgba(170, 200, 240, .7); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0; transition: opacity .4s; }
.dm-ar-leads path.is-in { opacity: 1; }

/* The board. Off: flat and grey-ish. On: its power light. Writing: a light sweeps over it and its
   two lights chatter. Ready: a glow under it. */
.dm-ar-board { position: absolute; z-index: 3; width: 290px; height: 149.4px; animation: dm-ar-float 6s ease-in-out infinite; }
@keyframes dm-ar-float { 50% { transform: translateY(-2px); } }
.dm-ar-board::before {
  content: ""; position: absolute; inset: -16% -8%; z-index: -1; border-radius: 40px;
  background: radial-gradient(closest-side, rgba(75, 180, 255, .38), transparent);
  opacity: 0; transition: opacity .9s;
}
.dm-ar-board.is-ready::before { opacity: 1; }
.dm-ar-pcb { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .5)); transition: filter .7s; }
.dm-ar-board.is-off .dm-ar-pcb { filter: saturate(.45) brightness(.78) drop-shadow(0 14px 16px rgba(0, 0, 0, .5)); }
.dm-ar-silk text { font: 600 7px/1 var(--c-mono); fill: rgba(235, 242, 255, .78); text-anchor: middle; }
.dm-ar-chiptext { font: 600 6.6px/1 var(--c-mono); fill: #8d96a5; text-anchor: middle; letter-spacing: .3px; }
.dm-ar-name { font: 700 12px/1 var(--c-font); fill: rgba(235, 242, 255, .86); letter-spacing: .4px; }
.dm-ar-ledtext { font: 600 6.5px/1 var(--c-mono); fill: rgba(235, 242, 255, .72); }
.dm-ar-led { fill: #3d3418; transition: fill .05s; }
.dm-ar-pwr { fill: #3d1d1d; }
.dm-ar-glow { opacity: 0; filter: blur(4px); transition: opacity .06s; }
.dm-ar-g-pwr { fill: #ff5a4f; }
.dm-ar-g-tx, .dm-ar-g-rx { fill: #ffd84a; }
.dm-ar-board.is-on .dm-ar-pwr { fill: #ff5a4f; }
.dm-ar-board.is-on .dm-ar-g-pwr { opacity: .55; transition: opacity .5s; }
.dm-ar-board.is-tx .dm-ar-tx, .dm-ar-board.is-rx .dm-ar-rx { fill: #ffe066; }
.dm-ar-board.is-tx .dm-ar-g-tx { opacity: .65; }
.dm-ar-board.is-rx .dm-ar-g-rx { opacity: .55; }
.dm-ar-scan {
  position: absolute; left: 1.8%; top: 2.4%; width: 85.5%; height: 95.3%; border-radius: 8px;
  overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .3s;
}
.dm-ar-scan::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 36%;
  background: linear-gradient(90deg, transparent, rgba(110, 200, 255, .5) 50%, transparent);
  animation: dm-ar-scan 1s linear infinite;
}
@keyframes dm-ar-scan { to { left: 105%; } }
.dm-ar-board.is-writing .dm-ar-scan { opacity: 1; }

/* Its labels. */
.dm-ar-state {
  position: absolute; z-index: 5; left: 40px; top: 104px; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px; border-radius: 99px; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(160, 190, 235, .24); color: #c9d7ee; font: 600 10.5px/1 var(--c-font); letter-spacing: .2px;
  opacity: 0; transform: translateY(-4px); transition: opacity .35s, transform .35s, border-color .4s, color .4s;
}
.dm-ar-state.is-in { opacity: 1; transform: none; }
.dm-ar-state i { width: 6px; height: 6px; border-radius: 50%; background: #8793a6; transition: background .3s, box-shadow .3s; }
.dm-ar-state.is-busy i { background: #4bb4ff; box-shadow: 0 0 8px #4bb4ff; animation: dm-breathe 1s var(--c-e) infinite; }
.dm-ar-state.is-ready { border-color: rgba(75, 209, 122, .5); color: #e6fff0; }
.dm-ar-state.is-ready i { background: #4bd17a; box-shadow: 0 0 8px #4bd17a; }
.dm-ar-tag {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 7px;
  border-radius: 8px; background: #0e1a2b; border: 1px solid rgba(160, 190, 235, .26); color: #eef4fd;
  font: 600 10.5px/1 var(--c-mono); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s;
}
.dm-ar-tag.is-in { opacity: 1; transform: none; }
.dm-ar-tag .dm-i { width: 13px; height: 13px; color: #4bb4ff; }
.dm-ar-tag.is-chip { left: 58px; top: 134px; }
.dm-ar-tag.is-usb { left: 262px; top: 334px; }

/* What the film ends on. */
.dm-ar-badge {
  position: absolute; z-index: 6; left: 50%; top: 420px; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 14px;
  background: #071634; color: #eef4fd; white-space: nowrap;
  box-shadow: 0 18px 40px -16px rgba(7, 22, 52, .7), 0 0 0 1px rgba(75, 180, 255, .35);
  opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .45s var(--c-e), transform .45s var(--c-e);
}
.dm-ar-badge.is-in { opacity: 1; transform: none; }
.dm-ar-badge .dm-i { width: 26px; height: 26px; color: #4bb4ff; }
.dm-ar-badge b { display: block; font-size: 13.5px; }
.dm-ar-badge small { display: block; font-size: 11px; color: #9ab0d2; }

/* The computer. */
.dm-ar-monitor { position: absolute; z-index: 4; left: 372px; top: 48px; width: 408px; height: 312px; }
.dm-ar-screen {
  position: absolute; left: 0; top: 0; width: 408px; height: 272px; overflow: hidden;
  border: 10px solid #0e1a2b; border-radius: 14px; background: linear-gradient(160deg, #123a7a, #071634 62%);
  box-shadow: 0 30px 60px -30px rgba(7, 22, 52, .65);
}
.dm-ar-monitor .dm-rv-neck { left: 184px; top: 272px; height: 30px; }
.dm-ar-monitor .dm-rv-base { left: 129px; top: 300px; width: 150px; }

/* WkBot on its settings. */
.dm-ar-app { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--c-bg); transition: opacity .5s var(--c-e), transform .5s var(--c-e); }
.dm-ar-app.is-gone { opacity: 0; transform: scale(.96); }
.dm-ar-app .dm-rv-bar { height: 20px; }
.dm-ar-app .dm-rv-bar em { margin-left: 8px; font-style: normal; font-weight: 400; color: #9ab0d2; }
.dm-ar-body { display: grid; gap: 12px; padding: 12px; }
.dm-ar-card { padding: 11px 12px; background: var(--c-surface); border: 1px solid var(--c-line-soft); border-radius: var(--c-r); box-shadow: 0 1px 2px rgba(7, 22, 52, .05); }
.dm-ar-h { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 650; letter-spacing: .6px; text-transform: uppercase; color: var(--c-muted); }
.dm-ar-h .dm-i { width: 14px; height: 14px; color: var(--c-accent); }
.dm-ar-seg { display: flex; margin-top: 9px; padding: 2px; border-radius: 7px; background: var(--c-hover); border: 1px solid var(--c-line); }
.dm-ar-seg span { flex: 1; padding: 5px 4px; border-radius: 5px; text-align: center; font-size: 11px; color: var(--c-muted); transition: background .2s, color .2s, box-shadow .2s; }
.dm-ar-seg span[data-hw] { flex: 1.6; }
.dm-ar-seg span.is-on { background: #fff; color: var(--c-text); font-weight: 600; box-shadow: 0 1px 2px rgba(7, 22, 52, .16); }
.dm-ar-seg span.is-press { background: #e3e9f2; }
.dm-ar-row { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-size: 11px; color: var(--c-muted); }
.dm-ar-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--c-dim); transition: background .3s; }
.dm-ar-row.is-found .dm-ar-dot { background: var(--c-warn); }
.dm-ar-row.is-ready .dm-ar-dot { background: #2f9e5b; }
.dm-ar-row .dm-btn { margin-left: auto; height: 26px; gap: 6px; font-size: 11px; transition: opacity .3s; }
.dm-ar-row.is-off .dm-btn { opacity: .45; }
.dm-ar-row .dm-btn .dm-i { width: 13px; height: 13px; }
.dm-ar-ghost { display: grid; gap: 8px; padding: 2px 4px; }
.dm-ar-ghost i { height: 8px; border-radius: 4px; background: #e2e8f1; }
.dm-ar-ghost i:nth-child(1) { width: 72%; } .dm-ar-ghost i:nth-child(2) { width: 54%; } .dm-ar-ghost i:nth-child(3) { width: 63%; }

/* The setup, over the settings: four steps on a rail, the step on the right. */
.dm-ar-wiz { position: absolute; inset: 20px 0 0; display: grid; place-items: center; background: rgba(7, 22, 52, .34); opacity: 0; transition: opacity .3s; }
.dm-ar-wiz.is-in { opacity: 1; }
.dm-ar-wcard {
  display: flex; flex-direction: column; width: 356px; height: 212px; overflow: hidden;
  background: var(--c-surface); border-radius: 10px; box-shadow: 0 20px 40px -14px rgba(7, 22, 52, .55);
  transform: translateY(8px) scale(.97); transition: transform .35s var(--c-e);
}
.dm-ar-wiz.is-in .dm-ar-wcard { transform: none; }
.dm-ar-whead { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--c-line-soft); font-size: 12px; }
.dm-ar-whead .dm-i { width: 15px; height: 15px; color: var(--c-accent); }
.dm-ar-wmain { flex: 1; display: grid; grid-template-columns: 94px 1fr; min-height: 0; }
.dm-ar-rail { display: grid; align-content: start; gap: 4px; padding: 10px 8px; background: var(--c-bg); border-right: 1px solid var(--c-line-soft); }
.dm-ar-step { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 6px; font-size: 11px; color: var(--c-dim); transition: background .2s, color .2s; }
.dm-ar-mk { display: grid; place-items: center; width: 17px; height: 17px; flex: none; border-radius: 50%; border: 1px solid var(--c-line); background: #fff; font-size: 9.5px; font-weight: 600; transition: background .2s, border-color .2s, color .2s; }
.dm-ar-mk .dm-i { display: none; width: 11px; height: 11px; stroke-width: 2.6; }
.dm-ar-step.is-active { background: #fff; color: var(--c-text); font-weight: 600; box-shadow: 0 1px 2px rgba(7, 22, 52, .1); }
.dm-ar-step.is-active .dm-ar-mk { background: var(--c-navy-900); border-color: var(--c-navy-900); color: #fff; }
.dm-ar-step.is-done { color: var(--c-text); }
.dm-ar-step.is-done .dm-ar-mk { background: var(--c-navy-900); border-color: var(--c-navy-900); color: var(--c-brand); }
.dm-ar-step.is-done .dm-ar-mk > span { display: none; }
.dm-ar-step.is-done .dm-ar-mk .dm-i { display: block; }
.dm-ar-pane { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 11px 13px 12px; }
.dm-ar-ptitle { font-size: 13px; font-weight: 650; }
.dm-ar-plead { margin-top: -4px; font-size: 11px; color: var(--c-muted); }
.dm-ar-pstatus { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 7px; font-size: 11px; font-weight: 550; }
.dm-ar-pstatus .dm-i { width: 13px; height: 13px; stroke-width: 2.4; }
.dm-ar-pstatus.is-ok { background: var(--c-accent-soft); color: var(--c-navy-900); }
.dm-ar-pstatus.is-busy { background: var(--c-hover); color: var(--c-muted); }
.dm-ar-pstatus .dm-spin { width: 11px; height: 11px; }
.dm-ar-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 10.5px; }
.dm-ar-facts dt { color: var(--c-dim); }
.dm-ar-facts dd { font-family: var(--c-mono); }
.dm-ar-go { align-self: flex-start; margin-top: auto; height: 27px; }
.dm-ar-progress { display: grid; gap: 7px; }
.dm-ar-ptrack { height: 7px; overflow: hidden; border-radius: 99px; background: var(--c-hover); border: 1px solid var(--c-line-soft); }
.dm-ar-ptrack span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c-navy-600), var(--c-brand)); }
.dm-ar-pline { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--c-muted); }
.dm-ar-pline .dm-spin { width: 11px; height: 11px; }
.dm-ar-pline b { margin-left: auto; font-family: var(--c-mono); font-weight: 600; color: var(--c-text); }

/* The game, once the board is in charge. */
.dm-ar-game { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.dm-ar-game.is-in { opacity: 1; }
.dm-ar-game canvas { display: block; }
.dm-ar-live {
  position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 6px; border-radius: 8px; background: rgba(7, 22, 52, .88); color: #fff;
  font-size: 11px; font-weight: 600; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6); transition: box-shadow .3s;
}
.dm-ar-live img { width: 15px; height: 15px; border-radius: 4px; }
.dm-ar-live b { display: inline-flex; align-items: center; gap: 5px; margin-left: 3px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .18); font-weight: 500; color: #c9d7ee; }
.dm-ar-live b i { width: 6px; height: 6px; border-radius: 50%; background: #4bd17a; box-shadow: 0 0 6px #4bd17a; }
.dm-ar-live.is-heal { box-shadow: 0 0 0 2px rgba(75, 209, 122, .7), 0 8px 18px -8px rgba(0, 0, 0, .6); }

/* A key or a click on its way up the cable. */
.dm-ar-pkt {
  position: absolute; z-index: 6; translate: -50% -50%; display: grid; place-items: center;
  min-width: 32px; height: 28px; padding: 0 8px; border-radius: 7px;
  background: #fff; color: #0e1a2b; border: 1px solid #c3cede;
  box-shadow: 0 2px 0 #c3cede, 0 8px 16px -6px rgba(7, 22, 52, .45);
  font: 700 13px/1 var(--c-mono); opacity: 0; transform: scale(.7); transition: opacity .15s, transform .2s;
}
.dm-ar-pkt.is-in { opacity: 1; transform: none; }
.dm-ar-pkt.is-out { opacity: 0; transform: scale(.6); }
.dm-ar-pkt.is-click { background: #ffdd3a; border-color: #d6b520; box-shadow: 0 2px 0 #c9a90f, 0 8px 16px -6px rgba(7, 22, 52, .45); }
.dm-ar-pkt .dm-i { width: 16px; height: 16px; }