body {
	margin: 0; 
	overflow: hidden;
	user-select:none; /* CSS3 */
	-moz-user-select:none; /* Firefox */
	-webkit-user-select:none; /* Google Chrome , Safari */
	-o-user-select:none; /* Opera */
	-ms-user-select:none; /* Internet Explorer */
}
button{font-size:28px; padding:10px 8px; background:#FFFFFF; border:0px; cursor:pointer;}

.ms-loader{position:fixed;inset:0;z-index:99999;background:#0b0f14;display:flex;align-items:center;justify-content:center}
.ms-loader__inner{display:flex;flex-direction:column;gap:14px;align-items:center}
.ms-loader__bar{width:min(420px,80vw);height:8px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden}
.ms-loader__bar-fill{height:100%;width:0%;transition:width .2s ease;will-change:width;background:linear-gradient(90deg,#00cbff,#0060fc)}
.ms-loader__text{color:#cfe9ff;font:600 13px/1.2 system-ui,Segoe UI,Roboto}
.ms-loader.--done{opacity:0;pointer-events:none;transition:opacity .4s ease .2s}

.material-symbols-sharp{
	font-size:32px;color:#1D7DC0;
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 48
}
.fa-solid{font-size:24px;color:#1D7DC0; margin-top:3px;}
#dice0{color:#cccccc;}
#magnet_off{color:#cccccc;}
#surface_off{color:#cccccc;}
#edgeSelect_off{color:#cccccc;}
#redo_off{color:#cccccc;}
#shadow_off{color:#cccccc;}
.off{color:#cccccc;}
.fill{
	font-variation-settings:
	'FILL' 1,
	'wght' 400,
	'GRAD' 0,
	'opsz' 48
}
ul{display: flex;}
li{list-style: none; margin: 0px 2px 0px 2px;}

.color{margin-left:30px;}
.color td:nth-of-type(1){width:70px;}
.color td:nth-of-type(2){width:100px;}

#WebGL-output{width:80%; height:80%; border:0px solid #EEEEEE; margin:10px auto; background:#FFFFFF;}

#WebGL-output { cursor: default; }
#WebGL-output.is-over-edge { cursor: pointer; }
#WebGL-output.is-grabbing{
  cursor: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">\
  <g fill="none" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\
    <path d="M12 1 L12 23 M12 1 L9 4 M12 1 L15 4"/>\
    <path d="M12 23 L9 20 M12 23 L15 20"/>\
    <path d="M1 12 L23 12 M1 12 L4 9 M1 12 L4 15"/>\
    <path d="M23 12 L20 9 M23 12 L20 15"/>\
  </g></svg>') 12 12, all-scroll; /* 12 12 はホットスポット(中心) */
}
#WebGL-output canvas { cursor: inherit; }


#plus{color:#0075FF;font-size:20px;cursor:pointer;vertical-align: middle;}
#minus{color:#0075FF;font-size:20px;cursor:pointer;vertical-align: middle;}
#init{color:#0075FF;font-size:14px;cursor:pointer;vertical-align: middle;margin-top:2px;}

.shadow_val{
	display:inline-block;padding:0px 0px 2px 0px;font-size:14px;width:45px;text-align:center;font-weight:bold;vertical-align: middle;
}

/* Overlay base */
.help-overlay{position:fixed; inset:0; z-index:99998; pointer-events:none}
.help-overlay[aria-hidden="true"]{display:block}
.help-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.25); opacity:0; transition:opacity .25s ease}

/* Panel */
.help-panel{
  position:absolute; top:0; right:0; height:100dvh;
  width:min(480px, 92vw); max-width:100%;
  background-color:rgba(0,25,40,0.9); color:#e8f2ff;
  box-shadow:0 10px 40px rgba(0,0,0,.35);
  transform:translateX(100%); transition:transform .28s ease;
  display:flex; flex-direction:column;
}
.help-header{display:flex; align-items:center; justify-content:space-between;padding:14px 26px; border-bottom:1px solid rgba(255,255,255,.08)}
.help-close{font-size:26px; line-height:1; background:transparent; color:#cfe9ff;border:0; cursor:pointer}
.help-body{padding:14px 26px; overflow:auto;margin-top:100px;}
.help-body section{margin-top:20px;}
.help-body section h3{color:#FFFFFF;font-weight:bold;}
.help-img{width:100%; height:auto; border-radius:10px; display:block; margin:8px 0 12px}

.help-overlay .help-body ul.help-list{
  display:flex !important;
  flex-direction:column !important; 
  gap:8px;
  margin:6px 0 0;
  padding:0;
  list-style:none; 
}

/* 各LIは中でアイコン＋テキストを横並び＆縦中央 */
.help-overlay .help-body ul.help-list > li{
  display:flex !important;
  align-items:center;
  gap:8px;
  margin:0px 0px 0px 24px;
  float:none !important; /* 古いfloat指定を無効化 */
}

/* アイコンの縦ブレ防止 */
.help-list .material-symbols-sharp{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  font-size:24px;
  line-height:1;
  display:inline-flex;
  align-items:center;
}

.help-list .mouse_icon{
  color:#ffffff; !important;
}

.help-list i.fa-solid{
  font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24;
  font-size:18px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  margin:0px 5px 0px 4px;
}

.help-list .label::before{
  content:'：';
  margin-right:2px;
}

/* Open state */
.help-overlay.--open{pointer-events:auto}
.help-overlay.--open .help-backdrop{opacity:1}
.help-overlay.--open .help-panel{transform:translateX(0)}

/* アニメ苦手な方に配慮 */
@media (prefers-reduced-motion: reduce){
  .help-backdrop,.help-panel{transition:none}
}

.mode_field1{
	cursor:pointer;float:left;margin-top:10px;padding:3px 6px 3px 12px;background-color:#1D7DC0;border:1px solid #1D7DC0; border-radius:50px 0px 0px 50px;
}

.mode_field1 button{all: initial;cursor:pointer;}
.mode_field1 button span{font-size:20px;margin:3px 0px 0px 0px;color:#ffffff;}

.mode_field2{
	cursor:pointer;float:right;margin-top:10px;padding:3px 12px 3px 6px;background-color:#f5f5f5;border:1px solid #1D7DC0; border-radius:0px 50px 50px 0px;
}

.mode_field2 button{all: initial;cursor:pointer;}
.mode_field2 button span{font-size:20px;margin:3px 0px 0px 0px;}