.nvm-root, .nvm-root * { box-sizing: border-box; }

.nvm-root {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "BIZ UDGothic", "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  background: #f5f7fa;
  color: #2C3E50;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 9999;
}/* ===== フルスクリーンcanvas領域 ===== */


.nvm-root #nvm-canvas-wrap {
  position: fixed;
  top: 52px; left: 0;
  width: 100vw;
  height: calc(100vh - 52px);
  background: #e8edf4;
}
.nvm-root #nvm-canvas-wrap canvas { display: block; }/* ===== 常設コントロールパネル（間かく・スライス） ===== */


.nvm-root .nvm-control-panel {
  position: fixed;
  left: 16px; top: 64px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  padding: 10px 16px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 10;
}
.nvm-root .nvm-ctrl-row { display: flex; align-items: center; gap: 10px; }
.nvm-root .nvm-ctrl-label { font-size: 12px; font-weight: bold; color: #1e3a5f; flex-shrink: 0; width: 52px; }
.nvm-root .nvm-ctrl-row input[type="range"] { width: 120px; }
.nvm-root .nvm-ctrl-val { font-size: 12px; font-weight: bold; color: #1e3a5f; width: 24px; text-align: right; flex-shrink: 0; }/* ===== 右下ツールバー ===== *//* ⚙設定 / 📦入れ物 / 💧中身 / 🎨色分け / 🔲格子線 の5個構成 */



.nvm-root .nvm-toolbar {
  position: fixed;
  right: 16px; bottom: 20px;
  display: flex; flex-direction: column;
  gap: 12px;
  z-index: 10;
}
.nvm-root .nvm-btn {
  width: 60px; height: 60px;
  border-radius: 999px;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  background: #fff;
  color: #7F8C8D;
  border: 2px solid #c8d4e8;
}
.nvm-root .nvm-btn:active { transform: scale(0.92); }
.nvm-root .nvm-btn-setting { background: #fff; color: #1e3a5f; border: 2px solid #1e3a5f; }
.nvm-root .nvm-btn.nvm-on  { background: #1e3a5f; color: #fff; border-color: #1e3a5f; }
.nvm-root .nvm-btn.nvm-accent { background: #d4af37; color: #fff; border-color: #d4af37; }
.nvm-root .nvm-btn:disabled { opacity: 0.35; cursor: default; }
.nvm-root .nvm-btn:disabled:active { transform: none; }/* 🎨色分けボタンの状態バッジ */


.nvm-root .nvm-mode-badge {
  position: absolute;
  top: -6px; right: -6px;
  background: #d4af37;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.nvm-root .nvm-mode-badge.hidden { display: none; }/* ===== ステップ画面（オーバーレイ） ===== */


.nvm-root .nvm-overlay {
  position: fixed; inset: 0;
  background: rgba(30,58,95,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 12px;
  touch-action: pan-y;
}
.nvm-root .nvm-overlay.hidden { display: none; }
.nvm-root .nvm-dialog {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 24px 24px 22px;
  width: min(92vw, 420px);
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  text-align: center;
}
.nvm-root .nvm-dialog h2 { color: #1e3a5f; font-size: 19px; margin: 0 0 6px; }
.nvm-root .nvm-step-label {
  display: inline-block;
  background: #d4af37;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  border-radius: 999px;
  padding: 3px 14px;
  margin-bottom: 10px;
}
.nvm-root .nvm-hint { font-size: 13px; color: #5a708a; margin: 0 0 18px; }

.nvm-root .nvm-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: none;
  background: #eef2f6;
  color: #5a708a;
  font-size: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nvm-root .nvm-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; text-align: left; }
.nvm-root .nvm-dimension-row { display: flex; align-items: center; gap: 10px; }
.nvm-root .nvm-dimension-label { width: 52px; flex-shrink: 0; font-size: 13px; font-weight: bold; color: #1e3a5f; }

.nvm-root .nvm-decide-btn {
  width: 100%;
  padding: 14px 0;
  border-radius: 999px;
  border: none;
  background: #d4af37;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nvm-root .nvm-decide-btn:active { transform: scale(0.97); }

.nvm-root .hidden { display: none !important; }/* Source JSON: Material Symbols Outlined, 24px. */


.nvm-root .ms-app-icon{display:inline-block;width:24px;height:24px;min-width:24px;vertical-align:middle;fill:currentColor;pointer-events:none;flex-shrink:0}
.nvm-root span.ms-app-icon{background-color:currentColor;-webkit-mask:var(--ms-icon) center/contain no-repeat;mask:var(--ms-icon) center/contain no-repeat}
.nvm-root button:has(.ms-app-icon){display:inline-flex;align-items:center;justify-content:center;gap:6px}/* 移動・可変の道具BOX */


.vtb-host .atb-toolbox{display:flex;position:absolute;right:16px;bottom:84px;width:244px;height:380px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 64px);padding:0;gap:0;align-items:stretch;flex-direction:column;background:#f5f7fc;border:2px solid #c8d3e3;border-radius:16px;box-shadow:0 6px 24px #13274240;overflow:hidden;z-index:25;box-sizing:border-box;container-type:inline-size}
.vtb-host .atb-toolbox-head{display:flex;flex-shrink:0;height:44px;background:var(--navy,#1e3a5f);color:white;align-items:center}
.vtb-host .atb-toolbox-head button{border:0;background:transparent;color:white;height:44px;margin:0;padding:0 12px;font-family:inherit;font-size:16px;font-weight:bold;box-shadow:none;border-radius:0}
.vtb-host .atb-toolbox-grip{flex:1;text-align:left;cursor:move;touch-action:none;user-select:none}
.vtb-host .atb-toolbox-fold{width:40px;font-size:24px!important;cursor:pointer}
.vtb-host .atb-toolbox-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));align-content:start;gap:8px;padding:10px 10px 24px;overflow:auto;min-height:0;flex:1}
.vtb-host .atb-toolbox-body button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;height:68px;min-height:48px;margin:0;padding:6px;border:1px solid #d7dfeb;border-radius:12px;background:white;color:var(--navy,#1e3a5f);box-shadow:0 2px 4px #13274212;cursor:pointer;font-family:inherit}
.vtb-host .atb-toolbox-body button:disabled{opacity:.35;cursor:default}
.vtb-host .atb-toolbox-body .atb-tool-label{font-size:13px;font-weight:bold;line-height:1.2;white-space:normal;text-align:center}
.vtb-host .atb-toolbox-resize{position:absolute;right:0;bottom:0;width:26px;height:24px;border:0;background:#e4eaf4;color:var(--navy,#1e3a5f);font-size:20px;cursor:nwse-resize;touch-action:none;padding:0;margin:0}
.vtb-host .atb-toolbox.atb-toolbox-compact .atb-toolbox-body{grid-template-columns:repeat(auto-fit,minmax(44px,1fr));padding:6px 6px 24px}
.vtb-host .atb-toolbox.atb-toolbox-compact .atb-toolbox-body button{width:44px;height:44px;min-height:44px;border-radius:50%;justify-self:center;gap:0}
.vtb-host .atb-toolbox.atb-toolbox-compact .atb-tool-label{display:none}
.vtb-host .atb-toolbox.atb-toolbox-compact button:has(img[hidden]) .atb-tool-label{display:block;font-size:10px}
.vtb-host .atb-toolbox-closed{height:44px!important;min-height:44px}
.vtb-host .atb-toolbox-closed .atb-toolbox-body,
.vtb-host .atb-toolbox-closed .atb-toolbox-resize{display:none}
.vtb-host .atb-toolbox button:focus-visible{outline:3px solid #4d97ff;outline-offset:-3px}

.vtb-host .atb-toolbox-layouts{display:flex;flex-shrink:0;gap:4px;padding:5px;background:#e7edf6}
.vtb-host .atb-toolbox-layouts button{flex:1;min-width:0;height:32px;margin:0;padding:2px;border:1px solid #c7d2e3;border-radius:7px;background:white;color:var(--navy,#1e3a5f);font-family:inherit;font-size:12px;font-weight:bold;cursor:pointer}
.vtb-host .atb-toolbox-layouts button[aria-pressed="true"]{background:var(--gold,#d4af37);border-color:var(--gold,#d4af37)}
.vtb-host .atb-toolbox[data-layout] .atb-toolbox-body{grid-template-columns:repeat(var(--atb-tool-columns),minmax(0,1fr))}
.vtb-host .atb-toolbox-closed .atb-toolbox-layouts{display:none}/* 役割ごとの固定色。丸形・文字付きで共通。 */


.vtb-host .atb-toolbox-body button{--tool-bg:#eef1f5;--tool-border:#cbd2dc;--tool-ink:#394657;--tool-active:#465568;background:var(--tool-bg);border-color:var(--tool-border);color:var(--tool-ink)}
.vtb-host .atb-toolbox-body button[data-color="blue"]{--tool-bg:#e0edff;--tool-border:#9abce9;--tool-ink:#184d91;--tool-active:#245fa8}
.vtb-host .atb-toolbox-body button[data-color="orange"]{--tool-bg:#ffead4;--tool-border:#e6b07a;--tool-ink:#8b420c;--tool-active:#a64c10}
.vtb-host .atb-toolbox-body button[data-color="green"]{--tool-bg:#dcf2e5;--tool-border:#91c7a8;--tool-ink:#1d6342;--tool-active:#24734d}
.vtb-host .atb-toolbox-body button[data-color="purple"]{--tool-bg:#ede4fb;--tool-border:#bda2df;--tool-ink:#654091;--tool-active:#7045a1}
.vtb-host .atb-toolbox-body button[data-color="navy"]{--tool-bg:#e3eaf4;--tool-border:#9eafc7;--tool-ink:#1e3a5f;--tool-active:#1e3a5f}
.vtb-host .atb-toolbox-body button:hover:not(:disabled){box-shadow:0 0 0 2px var(--tool-border)}.vtb-host .atb-toolbox-settings svg{fill:currentColor}

.vtb-host .atb-toolbox-body button .ms-app-icon{width:26px;height:26px;min-width:26px}
.vtb-host .atb-toolbox .atb-toolbox-head button{position:static;width:auto;min-width:40px;display:flex;align-items:center;justify-content:center}
.vtb-host .atb-toolbox .atb-toolbox-head .atb-toolbox-grip{justify-content:flex-start}
.vtb-host .atb-toolbox-body button.active,.vtb-host .atb-toolbox-body button.cube3d-active,.vtb-host .atb-toolbox-body button.nvm-active{background:var(--tool-active);color:white;border-color:var(--tool-active)}
.vtb-host .atb-toolbox-compact .atb-toolbox-body button>span:not(.ms-app-icon):not([class*="badge"]){display:none}
.vtb-host .atb-toolbox-body button .atb-tool-label{display:block}
.vtb-host .atb-toolbox-head svg{fill:currentColor}/* 明るい道具BOX：白＋水色、選択状態は淡色と色枠 */


.vtb-host .atb-toolbox{background:#fff;border-color:#bdd9f0;box-shadow:0 5px 20px #2672a822}
.vtb-host .atb-toolbox-head{background:#e0f2fe;color:#164e75}
.vtb-host .atb-toolbox .atb-toolbox-head button{background:transparent;color:#164e75}
.vtb-host .atb-toolbox-layouts{background:#f0f9ff}
.vtb-host .atb-toolbox-layouts button{background:white;border-color:#c5dff2;color:#164e75}
.vtb-host .atb-toolbox-layouts button[aria-pressed="true"]{background:#dbeafe;border:2px solid #2563eb;color:#1d4ed8}
.vtb-host .atb-toolbox-body button{background:white;border-color:var(--tool-border);color:var(--tool-ink);box-shadow:0 2px 5px #2563eb0b}
.vtb-host .atb-toolbox-body button[data-color="blue"]{--tool-bg:#e8f2ff;--tool-border:#9fc3f5;--tool-ink:#1d4ed8;--tool-active:#2563eb}
.vtb-host .atb-toolbox-body button[data-color="orange"]{--tool-bg:#fff0df;--tool-border:#f5bf86;--tool-ink:#9a4311;--tool-active:#c65a13;background:#fff7ed}
.vtb-host .atb-toolbox-body button[data-color="green"]{--tool-bg:#e4f7ed;--tool-border:#99d8b9;--tool-ink:#147449;--tool-active:#168653}
.vtb-host .atb-toolbox-body button[data-color="purple"]{--tool-bg:#f1eaff;--tool-border:#cab0ef;--tool-ink:#7540b6;--tool-active:#854bcb}
.vtb-host .atb-toolbox-body button[data-color="navy"]{--tool-bg:#e8f2ff;--tool-border:#b6cdeb;--tool-ink:#285b89;--tool-active:#3275ac}.vtb-host .atb-toolbox-body button.active,.vtb-host .atb-toolbox-body button.cube3d-active,.vtb-host .atb-toolbox-body button.nvm-active{background:var(--tool-bg);color:var(--tool-ink);border:2px solid var(--tool-active);box-shadow:0 0 0 1px var(--tool-active)}
.vtb-host .atb-toolbox-resize{background:#e0f2fe;color:#0369a1}

.nvm-root .atb-toolbox .volume-toolbox-adjust{position:static;inset:auto;transform:none;display:flex;flex-direction:column;flex-shrink:0;width:100%;height:auto;min-width:0;max-width:none;margin:0;padding:10px 10px 28px;background:#f0f9ff;border:0;border-top:1px solid #c5dff2;border-radius:0;gap:8px;box-sizing:border-box;color:#164e75}
.nvm-root .atb-toolbox .volume-toolbox-adjust input[type=range]{writing-mode:horizontal-tb;direction:ltr;appearance:auto;-webkit-appearance:auto;transform:none;width:100%;height:26px;min-width:0;margin:0;accent-color:#2563eb;touch-action:pan-y}
.nvm-root .atb-toolbox .volume-toolbox-adjust .nvm-ctrl-row{display:grid;grid-template-columns:48px minmax(0,1fr) 24px;width:100%;gap:6px}
.nvm-root .atb-toolbox-closed .volume-toolbox-adjust{display:none!important}
.nvm-root .atb-toolbox .atb-toolbox-body button{background:#fff!important;color:var(--tool-ink)!important;border:1px solid var(--tool-border)!important}
.nvm-root .atb-toolbox .atb-toolbox-body button[data-color=orange]{background:#fff7ed!important}
.nvm-root .atb-toolbox .atb-toolbox-body button.active,.nvm-root .atb-toolbox .atb-toolbox-body button.cube3d-active,.nvm-root .atb-toolbox .atb-toolbox-body button.nvm-active{background:var(--tool-bg)!important;color:var(--tool-ink)!important;border:2px solid var(--tool-active)!important;box-shadow:0 0 0 1px var(--tool-active)}
.nvm-root .atb-toolbox .atb-toolbox-head{background:#e0f2fe!important;color:#164e75!important}
.nvm-root .atb-toolbox .atb-toolbox-head button{background:transparent!important;color:#164e75!important}

.nvm-root .atb-toolbox .atb-toolbox-body .volume-toolbox-adjust{grid-column:1/-1;position:static;inset:auto;width:100%;min-width:0;padding:10px;background:#f0f9ff;box-shadow:none;border:1px solid #c5dff2;border-radius:10px;display:flex;flex-direction:column;gap:6px}
.nvm-root .atb-toolbox .volume-toolbox-adjust input[type=range]{position:static!important;inset:auto!important;transform:none!important;grid-column:auto;grid-row:auto}
.nvm-root .atb-toolbox .volume-toolbox-adjust input[type=range]{width:100%!important;max-width:100%;margin:0;height:28px;touch-action:none}
.nvm-root .atb-toolbox-grip{white-space:normal;overflow-wrap:anywhere;font-size:13px;line-height:1.35;min-width:0}
 .nvm-root #nvm-canvas-wrap{top:0;height:100vh;height:100dvh}

.nvm-root .volume-length-stepper{display:grid;grid-template-columns:44px minmax(64px,1fr) 44px;gap:6px;flex:1;min-width:0;width:100%;align-items:stretch}
.nvm-root .volume-length-stepper button{border:1px solid #a8cee8;border-radius:10px;background:#e0f2fe;color:#164e75;font:inherit;min-height:48px;padding:4px;font-size:24px;touch-action:manipulation;user-select:none}
.nvm-root .volume-length-stepper .volume-length-current{display:flex;flex-direction:column;align-items:center;justify-content:center;background:white}
.nvm-root .volume-length-current strong{font-size:28px;line-height:1.1}
.nvm-root .volume-length-current small{font-size:10px;line-height:1.5}
.nvm-root .volume-length-stepper button:disabled{opacity:.45;cursor:default}
.nvm-root .volume-length-stepper button:focus-visible{outline:3px solid #3686df;outline-offset:2px}
.nvm-root input[hidden]{display:none!important}