.charms-stage {
  position:absolute;
  z-index:3;
  top:0;
  left:clamp(230px,22vw,420px);
  width:clamp(320px,34vw,560px);
  height:clamp(185px,26vh,300px);
  margin:0;
  isolation:isolate;
  user-select:none;
  -webkit-user-select:none;
}
.charms-stage canvas {display:block;width:100%;height:100%;touch-action:pan-y;filter:drop-shadow(1px 3px 3px rgba(27,37,44,.12));}
.charm-target {
  position:absolute;transform:translate(-50%,-50%);width:58px;height:58px;
  padding:0;border:0;border-radius:14px;background:transparent;color:transparent;
  pointer-events:none;
}
.charm-target:focus-visible {outline:2px solid #d68a25;outline-offset:5px;}
.preview-message {
  position:fixed;right:0;bottom:72px;z-index:30;border:0;border-radius:30px 0 0 30px;
  background:#f6aa0e;color:#242722;padding:13px 22px;font:600 13px "PingFang SC",sans-serif;
}
@media (min-width:761px) and (max-width:1179px){
  body {min-width:0;}
  .about-copy {width:56vw;margin-left:4vw;}
  .statement {font-size:clamp(25px,2.6vw,31px);}
  .charms-stage {left:210px;width:350px;height:175px;}
  .tool-name {font-size:18px;}
}
@media (max-width:760px){
  .charms-stage {
    position:relative;left:auto;top:auto;width:100%;height:290px;
    margin:8px 0 16px;pointer-events:auto;
  }
  .charms-stage canvas {touch-action:pan-y;}
  .charm-target {width:64px;height:68px;pointer-events:auto;}
  .name-block {margin-bottom:0;}
  .preview-message {bottom:30px;padding:12px 18px;}
}