#dmToggle{position:fixed;z-index:120;top:max(4px, env(safe-area-inset-top));left:calc(222px + env(safe-area-inset-left));display:flex;
  padding:2px;background:#0b0f11;border:1px solid #6b5a3a;
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
#dmToggle button{appearance:none;border:0;margin:0;padding:5px 8px;min-height:28px;background:#151b1e;color:#9aa3a1;cursor:pointer;
  font:800 11px/1 var(--ui, system-ui, sans-serif);letter-spacing:.12em}
#dmToggle button + button{margin-left:2px}
#dmToggle button[aria-pressed="true"]{background:#d9b25f;color:#1a1408}
body:not(.ptFlow3) #dmToggle{display:none}
#dmToggle:not(.placed){visibility:hidden}     



#dmCap{position:fixed;z-index:119;left:50%;top:max(2px, env(safe-area-inset-top));
  width:max-content;max-width:min(400px, 44vw);box-sizing:border-box;padding:5px 10px;background:#0d1316;border:1px solid #d9b25f;color:#efe4cc;
  font:600 12px/1.25 var(--ui, system-ui, sans-serif);text-align:center;text-wrap:balance;cursor:pointer;
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);
  box-shadow:0 6px 18px #000c;animation:dmCapIn .2s ease-out}
#dmCap[hidden]{display:none}
#dmCap:not(.placed){visibility:hidden}
#dmCap[data-cap="before"]{border-color:#7d878b;color:#d6ddd9}
body:not(.ptFlow3) #dmCap{display:none}
@media (max-height:360px){#dmCap{font-size:11.5px;padding:4px 9px}#dmToggle button{min-height:24px;padding:4px 7px;font-size:10px}}
@keyframes dmCapIn{from{opacity:0}to{opacity:1}}

#dmLayer{position:fixed;inset:0;z-index:60;pointer-events:none}

 
body.dmOn .chip.dmBlank{opacity:1;color:#7d878b}
body.dmOn .chip.dmBlank svg.dmGray{width:72%;height:72%}
 
body.dmOn.lesson.lv3 .leader .chip.dmBlank svg.dmGray{visibility:visible}
 
html body.dmOn.lesson.lv3 .leader.foe .chip svg:has(> use[href="#g-shard"]),
html body.dmOn.lesson.lv3 .leader.foe .chip svg > use[href="#g-shard"]{visibility:visible !important}

 
body.dmOn.lesson.lv3 #callout.theirs:has(use[href="#g-shard"]){display:grid !important}

 
body.dmOn #callout .eb, #dmLayer .dmCard .eb{color:#c9a46a}
#dmLayer .dmCard{pointer-events:none}

 
#dmLayer .dmTumble{position:fixed;display:grid;place-items:center;box-sizing:border-box;background:#11181b;border:2px solid #d9b25f;color:#efe4cc;
  clip-path:polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%);animation:dmTumble .6s ease-out}
#dmLayer .dmTumble svg{width:70%;height:70%}
#dmLayer .dmTumble.landed{animation:dmLandPop .26s cubic-bezier(.3,1.6,.5,1)}
@keyframes dmTumble{0%{transform:rotate(0) scale(1)}40%{transform:rotate(-200deg) scale(1.3)}75%{transform:rotate(-330deg) scale(1.2)}100%{transform:rotate(-360deg) scale(1)}}
@keyframes dmLandPop{from{transform:scale(1.35)}to{transform:scale(1)}}

 
#dmLayer .dmLand{position:fixed;width:56px;height:56px;margin:-28px 0 0 -28px;border:3px solid #f0c86a;box-sizing:border-box;
  clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);animation:dmRing .8s ease-out forwards}
@keyframes dmRing{from{opacity:.95;transform:scale(.6)}to{opacity:0;transform:scale(1.6)}}

 
body.dmOn :is(.fxSumChip, .fxSumEq) .dmSym{width:1em;height:1em;margin-left:.2em;vertical-align:-.12em;color:#f0c86a}
#dmLayer svg.dmThread{position:fixed;left:0;top:0;overflow:visible}
#dmLayer svg.dmThread path{fill:none;stroke:#f0c86a;stroke-width:3;stroke-linecap:round;stroke-dasharray:9 7;filter:drop-shadow(0 0 3px #000);
  animation:dmFlow .6s linear infinite}
#dmLayer svg.dmThread.fade{transition:opacity .5s;opacity:0}
@keyframes dmFlow{to{stroke-dashoffset:-16}}
@media (prefers-reduced-motion: reduce){#dmLayer .dmTumble, #dmLayer .dmLand, #dmLayer svg.dmThread path, #dmCap{animation:none}}