#live2d-dock {
  position: fixed;
  z-index: 10;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  pointer-events: none;
}
/* Keep Butterfly's vertical row of reading controls clear as it slides in. */
body:has(#rightside.rightside-show) #live2d-dock {
  right: max(56px, calc(env(safe-area-inset-right) + 48px));
}
#live2d-stage {
  position: relative;
  width: clamp(148px, 14vw, 228px);
  height: min(35vh, 310px);
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}
#live2d-stage[hidden] { display: none; }
.kanban-frame, .kanban-frame canvas {
  display: block;
  width: 100%;
  height: 100%;
}
#live2d-stage canvas { animation: none; }
.kanban-placeholder {
  position: absolute;
  left: 50%;
  bottom: 21%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 5px;
  white-space: nowrap;
  color: #fff;
  font-size: 13px;
  text-shadow: 0 1px 5px #252439;
}
.kanban-placeholder img {
  box-sizing: border-box;
  border: 2px solid #f5e8ee;
  border-radius: 50%;
}
#live2d-stage[data-state=ready] .kanban-placeholder { display: none; }
.kanban-cheer {
  max-width: min(21ch, 64vw);
  padding: 7px 12px;
  border: 1px solid #d8b8c7;
  border-radius: 12px 12px 3px 12px;
  background: #fff4f6;
  color: #6e3653;
  box-shadow: 0 3px 12px #35244322;
  font: 600 13px/1.55 system-ui, sans-serif;
}
.kanban-cheer:empty { display: none; }
.kanban-cheer[data-game="2048"] { color: #54416b; background: #f5effb; border-color: #cdb8df; }
#live2d-toggle {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 3px 10px 3px 4px;
  border: 1px solid #e0cade88;
  border-radius: 20px;
  color: #fff4f5;
  background: #332e4bdc;
  font: 500 13px/1.25 system-ui, sans-serif;
  box-shadow: 0 2px 9px #35244333;
  cursor: pointer;
}
#live2d-toggle img { display: block; border-radius: 50%; }
#live2d-toggle[aria-expanded=true] svg { transform: rotate(180deg); }
#live2d-toggle:focus-visible { outline: 2px solid #ffd7e6; outline-offset: 2px; }
/* Leave the file controls and experiment results beside the floating character. */
@media (min-width: 960px) {
  body:has(#live2d-stage:not([hidden])) #content-inner:has(:is(#lab-notebook, #depix-lab, #polyglot-lab)) {
    --lab-margin: max(0px, calc((100% - 1020px) / 2));
    width: auto;
    margin-left: var(--lab-margin);
    margin-right: max(var(--lab-margin), calc(clamp(148px, 14vw, 228px) + 56px));
  }
}
@media (max-width: 959px) {
  #azumi-arcade > #live2d-dock {
    position: static;
    max-width: 660px;
    margin: 10px auto 0;
  }
  #live2d-toggle { min-height: 40px; }
  body.read-mode #live2d-dock { right: max(78px, env(safe-area-inset-right)); }
  #live2d-stage {
    width: min(31vw, 132px);
    height: min(27svh, 182px);
  }
}
@media print { #live2d-dock { display: none; } }