.motion-stage-dialog{
  width:min(1680px,99.5vw);height:98vh;max-width:none;max-height:none;padding:0;border:1px solid #3d5f9a66;
  background:radial-gradient(120% 90% at 10% -10%,#1a2a55 0%,#0b1220 42%,#070b14 100%);
  color:#e8edf5;border-radius:14px;overflow:hidden;
  box-shadow:0 30px 90px #000c,0 0 0 1px #7eb6ff22,inset 0 1px 0 #ffffff14;
}
.motion-stage-dialog::backdrop{background:rgba(3,6,14,.78);backdrop-filter:blur(10px)}
.motion-stage-page{
  flex:1;min-height:0;height:auto;width:100%;box-sizing:border-box;
  border:1px solid #3d5f9a66;border-radius:14px;overflow:hidden;outline:none;
  background:radial-gradient(120% 90% at 10% -10%,#1a2a55 0%,#0b1220 42%,#070b14 100%);
  color:#e8edf5;box-shadow:0 18px 48px #0008,0 0 0 1px #7eb6ff18,inset 0 1px 0 #ffffff14;
}
/* studio.css の padding:0!important を打ち消し、窓下端にパネルが張り付かないようにする */
.living-storyboard[data-mode="motionstage"],
body.canvas-viewport-mode .living-storyboard[data-mode="motionstage"]{
  padding:10px 0 18px!important;
  margin:0!important;
  min-height:0!important;
  overflow:hidden;
  display:flex!important;
  flex-direction:column;
  box-sizing:border-box!important;
}
.living-storyboard[data-mode="motionstage"] > .studio-heading,
.living-storyboard[data-mode="motionstage"] > .living-message:empty{flex-shrink:0}
.living-storyboard[data-mode="motionstage"] > .motion-stage-page,
body.canvas-viewport-mode .living-storyboard[data-mode="motionstage"] > .motion-stage-page{
  flex:1 1 auto;min-height:0;height:auto;max-height:100%;
}
.motion-stage-shell{display:grid;grid-template-rows:auto 1fr auto;height:100%;min-height:0}
.motion-stage-top{
  display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;
  padding:.7rem 1rem;border-bottom:1px solid #4d79c233;
  background:linear-gradient(90deg,#152445cc,#0d1628e6 55%,#10182ad9);
}
.motion-stage-brand{display:flex;flex-direction:column;gap:.1rem;margin-right:.4rem;min-width:9rem}
.motion-stage-brand strong{font-size:1rem;letter-spacing:.04em;font-weight:700}
.motion-stage-brand small{font-size:.68rem;color:#8eabcf}
.motion-stage-top .ms-spacer{flex:1}
.motion-stage-top button,.motion-stage-side button,.motion-stage-bottom button,.motion-stage-inspector button{
  background:linear-gradient(180deg,#2a3d5fcc,#1a273ecc);color:#e8edf5;border:1px solid #5d87c455;
  border-radius:999px;padding:.42rem .85rem;cursor:pointer;font-size:.78rem;line-height:1.2;
  box-shadow:inset 0 1px 0 #ffffff18;
}
.motion-stage-top button:hover,.motion-stage-side button:hover,.motion-stage-bottom button:hover,.motion-stage-inspector button:hover{
  background:linear-gradient(180deg,#3a5a8fcc,#243a66cc);border-color:#8eb7ff88;
}
.motion-stage-top button.active,.motion-stage-tool.active{
  background:linear-gradient(115deg,#4a6dffcc,#2aa8e6cc)!important;border-color:#a8d4ffaa;color:#fff;font-weight:650;
  box-shadow:0 0 18px #4a8cff55,inset 0 1px 0 #ffffff33;
}
.motion-stage-body{display:grid;grid-template-columns:190px minmax(0,1fr) 300px;min-height:0;height:100%}
.motion-stage-side,.motion-stage-inspector{
  padding:.7rem .75rem;overflow:auto;display:flex;flex-direction:column;gap:.4rem;
  background:linear-gradient(180deg,#101929ee,#0c1320f2);
}
.motion-stage-side{border-right:1px solid #3d5f9a33}
.motion-stage-inspector{border-left:1px solid #3d5f9a33}
.motion-stage-side h3,.motion-stage-inspector h3{
  margin:.35rem 0 .15rem;font-size:.72rem;color:#7ea2d0;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.motion-stage-side button{width:100%;text-align:center;border-radius:12px}
.motion-stage-add-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.motion-stage-add-grid button{min-height:2.6rem}
.ms-preset-item{display:flex;flex-direction:column;gap:.12rem;margin:0 0 .4rem}
.ms-preset-item button{margin:0}
.ms-preset-blurb{
  margin:0;padding:0 .2rem .15rem;font-size:.65rem;line-height:1.4;color:#8eabcf;text-align:center;
}
.ms-cam-hint{
  margin:0;padding:.55rem .65rem;border-radius:10px;font-size:.72rem;line-height:1.55;color:#d7e7ff;
  background:linear-gradient(160deg,#1a3a6eaa,#12243fcc);border:1px solid #6ea8ff55;
}
.ms-shortcut-list{
  margin:0;white-space:pre-line;font-size:.65rem;line-height:1.55;color:#8eabcf;
}
.motion-stage-inspector button.ms-danger{
  background:linear-gradient(180deg,#5a2a2acc,#3a1818cc)!important;border-color:#c66!important;color:#ffd0d0!important;
}
.motion-stage-view{
  position:relative;min-width:0;min-height:0;
  background:
    radial-gradient(60% 50% at 70% 20%,#1b3a6e33,transparent 70%),
    linear-gradient(180deg,#0a101c,#070b12);
  overflow:hidden;
}
.motion-stage-view canvas{display:block;width:100%;height:100%}
.motion-stage-hud{
  position:absolute;left:.75rem;top:.75rem;z-index:3;display:flex;flex-direction:column;gap:.35rem;
  pointer-events:none;max-width:min(360px,70%);
}
.motion-stage-hud-pill{
  align-self:flex-start;padding:.3rem .65rem;border-radius:999px;font-size:.72rem;font-weight:650;
  color:#dcecff;background:#0b1528cc;border:1px solid #6ea8ff55;backdrop-filter:blur(8px);
  box-shadow:0 8px 24px #0006;
}
.motion-stage-axis-legend{
  display:flex;flex-direction:column;gap:.28rem;align-items:flex-start;pointer-events:none;
}
.motion-stage-axis-legend span{
  font-size:.68rem;padding:.18rem .45rem;border-radius:6px;background:#0b1528aa;border:1px solid #ffffff14;
}
.motion-stage-axis-legend .x{color:#ff8b8b}.motion-stage-axis-legend .y{color:#8dffb0}.motion-stage-axis-legend .z{color:#8bc7ff}
.motion-stage-guide{
  position:absolute;right:.75rem;top:.75rem;z-index:4;width:min(300px,46%);
  padding:.85rem;border-radius:14px;color:#e7f0ff;
  background:linear-gradient(160deg,#1a2f5cee,#0d1730f0);border:1px solid #6ea8ff55;
  box-shadow:0 16px 40px #0008,inset 0 1px 0 #ffffff18;backdrop-filter:blur(12px);
}
.motion-stage-guide[hidden]{display:none!important}
.motion-stage-guide header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.45rem}
.motion-stage-guide strong{font-size:.88rem}
.motion-stage-guide .ms-step{font-size:.68rem;color:#8eb6e8;letter-spacing:.04em}
.motion-stage-guide p{margin:0;font-size:.8rem;line-height:1.65;color:#d5e4f8}
.motion-stage-guide-actions{display:flex;gap:.35rem;margin-top:.65rem;flex-wrap:wrap}
.motion-stage-guide-actions button{font-size:.72rem!important;padding:.35rem .7rem}
.motion-stage-guide-dots{display:flex;gap:.3rem;margin-top:.55rem}
.motion-stage-guide-dots i{width:7px;height:7px;border-radius:50%;background:#3a5278;display:block}
.motion-stage-guide-dots i.on{background:#7ec8ff;box-shadow:0 0 8px #5aaeff}
.motion-stage-inspector label{display:flex;flex-direction:column;gap:.15rem;font-size:.7rem;color:#aebcd0;min-width:0}
.motion-stage-inspector input,.motion-stage-inspector select{
  background:#0b1320;border:1px solid #3d5678;border-radius:7px;color:#e8edf5;padding:.28rem .3rem;
  min-width:0;width:100%;box-sizing:border-box;font-size:.74rem;
}
.motion-stage-xyz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.28rem}
.motion-stage-xyz.label-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.motion-stage-xyz label span{font-size:.62rem;white-space:nowrap}
.motion-stage-xyz .ax-x span{color:#ff9a9a}.motion-stage-xyz .ax-y span{color:#9dffbb}.motion-stage-xyz .ax-z span{color:#9ec8ff}
.motion-stage-bottom{
  display:grid;grid-template-columns:1fr auto;gap:.85rem;align-items:center;
  /* 下も左右と同じ 1rem（以前は縦 .7rem で底が詰まって見えた） */
  padding:1rem;border-top:1px solid #4d79c233;
  background:linear-gradient(90deg,#10182ad9,#0d1628e6);
  box-sizing:border-box;
}
.motion-stage-timeline{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.motion-stage-timeline input[type=range]{width:100%;accent-color:#6ea8ff}
.motion-stage-tracks{display:flex;flex-direction:column;gap:.3rem;font-size:.72rem;color:#9fb0c8}
.motion-stage-track-row{display:grid;grid-template-columns:72px 1fr;gap:.4rem;align-items:center}
.motion-stage-track{height:11px;border-radius:999px;background:#1c2636;position:relative;overflow:hidden;border:1px solid #ffffff10}
.motion-stage-track span{position:absolute;top:0;bottom:0;width:3px;background:#7dd3fc;border-radius:2px}
.motion-stage-track.cam span{background:#fbbf24}
.motion-stage-status{font-size:.78rem;color:#9fb0c8;min-height:1.2em}
.motion-stage-actions{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.motion-stage-actions .ms-primary{
  background:linear-gradient(110deg,#7656d9,#5a6fe6 45%,#257eae)!important;border:0!important;color:#fff!important;font-weight:700;
  box-shadow:0 8px 26px rgba(98,92,232,.4);
}
.ms-curve-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:.3rem;margin:.15rem 0 .35rem;padding:.4rem;border-radius:10px;background:#0b152288;border:1px solid #3d5f9a33;min-width:0}
.ms-curve-row label{min-width:0}
.ms-curve-row input,.ms-curve-row select{min-width:0;max-width:100%}
.motion-stage-hint-chip{
  position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);z-index:3;
  padding:.45rem .85rem;border-radius:999px;font-size:.75rem;color:#dcecff;
  background:#0d1730dd;border:1px solid #6ea8ff44;pointer-events:none;white-space:nowrap;
  box-shadow:0 10px 30px #0007;
}
@media (max-width:980px){
  .motion-stage-dialog{width:100vw;height:100vh;border-radius:0}
  .motion-stage-body{grid-template-columns:1fr;grid-template-rows:auto minmax(360px,1fr) auto}
  .motion-stage-side,.motion-stage-inspector{border:0;border-bottom:1px solid #3d5f9a33;max-height:160px}
  .motion-stage-guide{width:min(280px,88%);right:.5rem;top:.5rem}
}