:root {
	 --grid-width:98vmin;
     --grid-height:98vmin;
	 --maxwidth:420px;
	 --maxbtnwidth:42px;
	 --w1dot5rem:1.5rem;
	 --w68px:68px;
	 --w500px:500px;
	 --w45px:45px;
	 --grid-width:min(98vmin,var(--maxwidth));
	 --grid-height:min(98vmin,var(--maxwidth));
	 --gridfontsize:calc(16px + ((var(--grid-height) - 320px) / 24));
  }
  * {
     box-sizing:border-box;
	 margin:0;
	 padding:0;
    }
  html {
     font-size:calc(16px + ((((1vmin + 1vh) / 2) - 4px) * 1.25));
     font-size:calc(16px + ((var(--grid-height) - 320px) / 24));
	 font-size:calc(14px + ((max(var(--grid-height),280px) - 320px) / 36) + ((((max(1vmin,4px) + max(1vh,7px)) / 2) - 4px) * 1.25));
    }	   
  .clearfloat {
     clear:both;
    }
  body {
     background-color:#fdfdea;
	 font-family:Verdana, sans-serif, Helvetica, Arial, Courier, Times New Roman;
	 }
  .topad {
  }
  .container {
	 margin:0 auto;
	 background-color:#fdfdea;
    }
   /* within container */	
   #hdr {
     display:-ms-grid;
     display:grid;
	 -ms-grid-columns:15% 40% 45%;
	 -ms-grid-rows:auto;
     grid-template-columns:15% 40% 45%;
     grid-template-rows:auto;
	 align-items:start;
	 margin-top:0.5rem;
    }	 
   #lyot {
	 margin:0.25rem auto 0;
	 position:relative;
   }
   #manualmain {
	 display:block;
	 margin:1.2rem auto 0;
	 width:95%;
	 width:min(95%,800px);
   }
   .vsp {
	  margin-top:3rem; 
   }   
   #adps { 
      margin:1.8rem auto;	
   }
   #adsp {
	  width:100%;
	  text-align:center;
   }
   #adbot {
	  width:100%;
	  margin-top:1rem;
	  text-align:center;
   }
   #desc {
	margin:1.5rem 0 0;
	padding-bottom:1.5rem;
  }
  .mintro {
	margin:0 0 3rem;
	width:100%;
  }
  .mintro h3 {
	 font-size:0.88rem;
	 padding: 0.8rem 1rem 0;
  }
  .mintro p {
	 font-size:0.83rem;
	 padding: 0.6rem 1.5rem 0;
	 line-height:1.7;
	 text-align:justify;
  }
  /* within header 1x4 */
    .logo {
      object-fit:contain;
	  flex-shrink:0;
	  max-width:100%;
	  max-height:100%;
    }
	.dlogo {
	  -ms-grid-row:1;
	  -ms-grid-row-span:1;
	  -ms-grid-column:2;
	  -ms-grid-column-span:1;
	  grid-area:1/2/2/3;
	  align-self:start;
	  width:8rem;
	  height:calc(0.24 * 8rem);	
	}
   	#nvb {
 	  -ms-grid-row:1;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:1;
	  grid-area:1/1/2/2;
    }
    #navborder {	
	  width: 2rem;
	  height: 1.8rem;
	  margin: 0.2rem 0 0 0.5rem;
	  border: 1px solid #338866;
	  border-radius: 5px;
	  cursor:pointer;
	  position:relative;
	  z-index:1;  
	}
    .navimg {
	  width: 1.1rem;
	  margin:calc((1.8rem - 11px) / 4) auto 0 auto;
      height:3px;
      background-color: #338866;
      border:1px solid #338866;  
	  border-radius:3px/2px;
	} 
    #navcntwrap {
      position:relative;
	  margin-top:0.3rem;
    } 
    #navcontent {
      position:absolute;
	  box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	  top:0;
	  left:0;
	  height:0px;
	  transition:height 0.1s linear;
	  overflow:hidden;	 
      z-index:3;
    }
    #navdetail {
    }
    .mainnav {
      display:block;
	  width:auto;
	  height:2.1rem;
	  padding:0 1rem;
      font-size:0.82rem;
      color: #777755; 
	  font-weight:bold;
      text-decoration: none;
	  line-height:2.05rem;
	  text-align:left;
      border-right: 1px solid #90b490;
      border-bottom: 1px solid #90b490;
      border-left: 1px solid #90b490;
	  background-color:#f3f3e0;
	  cursor:pointer;
	  position:relative;
    }
    #navdetail a:nth-of-type(1) {
	   border-top: 1px solid #90b490;
    }
    .mainnav:hover {
      background-color:#f2f2d4; 
	  color: #000000;
    }
    #active {
      background-color:#fbfbe5;
      color:#555550;
    } 
    #levelnav {
 	  -ms-grid-row:1;
	  -ms-grid-row-span:1;
	  -ms-grid-column:3;
	  -ms-grid-column-span:1;
	  grid-area:1/3/2/4;  
      position:relative;
	  display:flex;
	  flex-flow:column nowrap;
	  align-items:flex-end;
	  justify-self:end;
	  margin-top:0.8rem;
	  -ms-grid-row-align:end;
    }
   #lvldisplay {
	display:flex;
	flex-flow:row nowrap;
	padding:0.1rem 0.5rem;
    font-size:0.8rem;
	font-weight:bold;
	color:#338866;   
	cursor:pointer;
	position:relative;
    }
  #lvldisplay:hover {
	color:#333333;
   }   
  #inlinearrowdiv {
     width:0.4rem;
     height:0.4rem;
     border-left:2px solid #338866;
     border-bottom:2px solid #338866;
	 margin:0.6rem 0 0 0.6rem;
	 transform:translateY(-85%) rotate(-45deg);
  }
  .lvlcntwrap {
     position:relative;	
	 margin-top:0.3rem;
  }  
  #lvlcontent {
	 position:absolute;
	 top:0;
	 right:0;
	 height:0px;
	 z-index:2;
	 overflow:hidden;
	 transition:height 0.1s linear;
	 box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    }
  .lvllist {
    display:block;
	width:8.5rem;
	height:1.8rem;
	padding:0 5px;
    font-size:0.8rem;
    color: #555555; 
	font-weight:bold;
    text-decoration: none;
	line-height:1.76rem;
	text-align:center;
    border: 1px solid #90b490;
	border-top:none;
	background-color:#ffffff;
	cursor:pointer;
	position:relative;
   }
  .lvllist:hover {
    background-color:#f5f5e0; 
   }	
  .lvlcurrent {
	display:inline-block;  
	position:absolute;
	left:3%;
   }
  #lvldetail a:nth-of-type(1) {
	  border-top: 1px solid #90b490;
  }
   /* within main */
  #itf {
     display:-ms-grid;
	 display:grid;
	 -ms-grid-columns:88% 12%;
	 -ms-grid-rows:auto auto auto auto auto auto auto auto auto auto;
     grid-template-columns:88% 12%;	 
     grid-template-rows:repeat(10,auto);
	 font-size:20px;
     font-size:calc(16px + ((var(--grid-height) - 320px) / 24));
  }
  .gameno {
 	  -ms-grid-row:2;
 	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:2;
	 grid-area:2/1/3/span 2;
     justify-self:center;
	 text-align:center;
 	 -ms-grid-column-align:center;
  }  
  .gameno h4 {
	 font-size:0.75em;
     display:inline;	 
     color:#a0522d;
  }
  .gameno p {
	display:inline;
    color:#3a2a8d;
	font-size:0.7em;
	font-weight:400;
  }   
   #cdmsg {
	  font-size:0.7em;
	  color:#a85a35;
   }   
  #bcmsg {
 	  -ms-grid-row:3;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:2;
	grid-area:3/1/4/3;
	margin:5px 0 0;
	padding-left:1%;
	padding-left:calc((100% - var(--grid-width)) / 2);
	height:1.1em; 
	font-size: 0.8em; 
	line-height:1.05em;
	font-weight:500;
	color:#d5452a;
	font-family:Verdana, sans-serif, Helvetica, Arial, Courier, Times New Roman;
    }
  #playtable {
 	  -ms-grid-row:4;
	  -ms-grid-row-span:3;
	  -ms-grid-column:1;
	  -ms-grid-column-span:2;
    grid-area:4/1/7/3;
	position:relative;
  }
  #playarea {
	margin:0 auto;
	position:relative;
	height:95vmin;
	width:98%;
	height:var(--grid-height);
	width:var(--grid-width);
	background-color:#696969;
 	border: 3px solid #696969;
  }	
  .grid3x3o, .grid3x3i { 
     display:-ms-grid;
     display:grid;
     grid-template-columns: repeat(3,1fr);
	 grid-template-rows: repeat(3,1fr);
     padding: 0px;
	 position:relative;
   }
  .grid3x3o {
	 -ms-grid-columns:1fr 3px 1fr 3px 1fr;
	 -ms-grid-rows:1fr 3px 1fr 3px 1fr;
     grid-gap:3px;
	 box-shadow: 0 1px 6px rgba(0,0,0,0.5);
   }
  .grid3x3i {
	 -ms-grid-columns:1fr 1px 1fr 1px 1fr;
	 -ms-grid-rows:1fr 1px 1fr 1px 1fr;
	 grid-gap:1px;
   }	 
  .cbdr {
     background-color: #fffff0;
	 position:relative;
	 border:2px solid transparent;
	 touch-action:manipulation;
	 cursor:default;
   }	 
  .bc {
   background-color:#e3e3e3;
   }   
  .rp1 {
     position:absolute;
	 top: 50%;
	 left: 50%;
	 transform:translate(-50%,-50%);
	 font-family: Verdana, Helvetica, Courier, Arial, Times New Roman ; 
	 font-size:1.28em;
   }
  .rp2 {
     position:absolute;
	 top: 10%;
	 left: 10%;
	 transform:translate(-50%,-50%);
	 font-family: Verdana, Helvetica, Courier, Arial, Times New Roman ; 
	 font-size:0.85em;
	 transition:opacity 0.3s linear, font-size 0.3s linear, top 0.3s linear, left 0.3s linear;
	 opacity:0;
   }
   .rp1o {
	 display:none; 
   }
   .pmcellbx {
	 width:100%;
	 height:100%;
	 position:absolute;
	 top:0;
	 left:0;
	 display:-ms-grid;
	 display:grid;
	 -ms-grid-columns:1fr 1fr 1fr;
	 -ms-grid-rows:1fr 1fr 1fr;
     grid-template-columns: repeat(3,1fr);
	 grid-template-rows: repeat(3,1fr);
	 touch-action:manipulation;
   }
   .pmdp1, .pmdp2, .pmdp3, .pmdp4, .pmdp5, .pmdp6, .pmdp7, .pmdp8, .pmdp9 {
	 display:none;
	 font-size:0.55em;
	 font-weight:bold;
	 justify-content:center;
	 align-content:center;
	 flex-wrap:wrap;
	 line-height:1.0;
	 background-color:transparent;
	 color:#000000;
	 touch-action:manipulation;
   }
   .pmdp1 {
 	-ms-grid-row:1;
	-ms-grid-column:1;
    grid-area:1/1/span 1/span 1;	  	   
   }
   .pmdp2 {
	-ms-grid-row:1;
	-ms-grid-column:2;
     grid-area:1/2/span 1/span 1;	  	   
   }
   .pmdp3 {
 	-ms-grid-row:1;
	-ms-grid-column:3;
    grid-area:1/3/span 1/span 1;	  	   
   }
   .pmdp4 {
	-ms-grid-row:2;
	-ms-grid-column:1;
     grid-area:2/1/span 1/span 1;	  	   
   }
   .pmdp5 {
	-ms-grid-row:2;
	-ms-grid-column:2;
     grid-area:2/2/span 1/span 1;	  	   
   }
   .pmdp6 {
	-ms-grid-row:2;
	-ms-grid-column:3;
     grid-area:2/3/span 1/span 1;	  	   
   }
   .pmdp7 {
	-ms-grid-row:3;
	-ms-grid-column:1;
     grid-area:3/1/span 1/span 1;	  	   
   }
   .pmdp8 {
	-ms-grid-row:3;
	-ms-grid-column:2;
     grid-area:3/2/span 1/span 1;	  	   
   }
   .pmdp9 {
	-ms-grid-row:3;
	-ms-grid-column:3;
     grid-area:3/3/span 1/span 1;	  	   
   }
  .msgrid1 {
	-ms-grid-row:1;
	-ms-grid-column:1;
    }	   
  .msgrid2 {
	-ms-grid-row:1;
	-ms-grid-column:3;
   }	   
  .msgrid3 {
	-ms-grid-row:1;
	-ms-grid-column:5;
   }	   
  .msgrid4 {
	-ms-grid-row:3;
	-ms-grid-column:1;
    }	   
  .msgrid5 {
	-ms-grid-row:3;
	-ms-grid-column:3;
   }	   
  .msgrid6 {
	-ms-grid-row:3;
	-ms-grid-column:5;
   }	   
  .msgrid7 {
	-ms-grid-row:5;
	-ms-grid-column:1;
    }	   
  .msgrid8 {
	-ms-grid-row:5;
	-ms-grid-column:3;
   }	   
  .msgrid9 {
	-ms-grid-row:5;
	-ms-grid-column:5;
   }	   
   #rsltbox {
    background-color:#aaaaaa;
    opacity: 0.95;
	position:absolute;
	top:50%;
	left:50%;
    width:65%;
	z-index:-1;
	padding:0.5em;
	transform:translate(-50%,-50%);
   } 
   #rsltmsg {
    background-color:#eeeeee;
    padding:1.5em 0;
    text-align:center;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
   }
   #rsltmsg p {
    font-size:1em;
    font-weight:bold;
    color:#555533;
    padding:0.3em 1em;
   }   
   #numberoption {
 	  -ms-grid-row:7;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:1;
	grid-area:7/1/8/2;
	height:9vmin;
    height:min(9vmin,var(--maxbtnwidth));
    width:98%;
    width:calc(100% - (113.636% - min(111.363%,var(--grid-width))) / 2);
	margin:0.8em auto 0 auto;
	display:flex;
	flex-flow:row nowrap;
	justify-self:end;
   }
   #snumberoption {
 	  -ms-grid-row:7;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:2;
	grid-area:7/1/8/3;
	height:9vmin;
    height:min(9vmin,var(--maxbtnwidth));
    width:98%;
    width:var(--grid-width);
	margin:0.8em auto 0 auto;
	display:flex;
	flex-flow:row nowrap;
	justify-self:center;
   }
  .picknumber {
    border:1px solid #886655;
    background-color:#f0f6f0;
    flex:1;
    margin-right:3px;
    cursor:pointer;
    position:relative;
    border-radius:3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
   }    
   #numberoption div:nth-last-of-type(1), #snumberoption div:nth-last-of-type(1) {
	  margin-right:0;
   }
   .picknumber p{
    color:#000000;
    font-family: Verdana, Helvetica, Courier, Arial, Times New Roman ; 
    font-weight:normal;
   }
   .pnopm {
	  background-color:#eeff88;
   }
   .nmtxt {
    font-size:1.28em;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
   }
   .nmleft {
    font-size:0.73em; 
    color:#006600;
    position:absolute;
    bottom:0px;
    right:0px;   
   }
   #pencilwrap {
 	  -ms-grid-row:7;
	  -ms-grid-row-span:1;
	  -ms-grid-column:2;
	  -ms-grid-column-span:1;
	 grid-area:7/2/8/3;
	 margin-top:0.8rem;
     display:flex;
     justify-content:center;
     align-items:center;	 
   }
   #pencil {
     width:9vmin;
	 height:9vmin;
	 height:min(9.5vmin,var(--maxbtnwidth));
	 width:min(9.5vmin,var(--maxbtnwidth));
	 border-radius:50%;
	 background-image:radial-gradient(#eeeeee,#eeeeee);
	 opacity:0.9;
	 cursor:pointer;
	 display:flex;
	 flex-flow:row nowrap;
	 justify-content:center;
	 align-items:center;
	 align-self:center;
	 justify-self:center;
	 transition:transform 0.2s linear,background-image 0.5s linear;;
   }
   .ptailwrap {
	 width:20%;
	 height:20%;
	 position:relative;
   }	
   .ptail {
	 width:100%;
	 height:100%;
	 background-repeat:no-repeat;
	 background-image:linear-gradient(to right bottom,rgba(255,255,255,0) 50%,#f0d076 50%),linear-gradient(to right top,rgba(255,255,255,0) 50%,#f0d076 50%);
	 background-size:100% 50%;
	 background-position:top left, bottom left;
	 position:absolute;
	 top:0;
	 left:0;
   }
   .ptail2 {
	 width:23%;
	 height:23%;
	 background-repeat:no-repeat;
	 background-image:linear-gradient(to right bottom,rgba(255,255,255,0) 50%,#555555 50%),linear-gradient(to right top,rgba(255,255,255,0) 50%,#555555 50%);
	 background-size:100% 50%;
	 background-position:top left, bottom left;
	 position:absolute;
	 top:50%;
	 left:0;
	 transform:translate(0,-50%);
   }
   .pmiddle {
	 border-right:1px solid #cccccc;
	 width:50%;
	 height:20%;
	 background-image:linear-gradient(to top,#ffb600 0%,#ffdc00 70%,#ffcc00 100%);
   }
   .ptop {
	 width:12%;
	 height:20%;
	 background-image:linear-gradient(to top,#e41b7c 0%,#f83aa0 70%,#ed2583 100%);
	 border-radius:0 35% 35% 0;	
   }
   #pencil.disable {
	 opacity:0.3;  
   }
   #pctrl1 {
 	  -ms-grid-row:8;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:1;
     grid-area:8/1/9/2;
     display:flex;
     flex-flow:row nowrap;
     margin:1em 2% 0 0;
     width:96%;
     width:calc(98% - (113.636% - min(111.363%,var(--grid-width))) / 2);
     justify-content:space-between;
     justify-self:end;
	 -ms-grid-column-align:end;
     align-self:end;
   }
   #spctrl1 {
 	  -ms-grid-row:8;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:2;
     grid-area:8/1/9/3;
     display:flex;
     flex-flow:row nowrap;
     margin:1em auto 0 auto;
     width:98%;
	 width:var(--grid-width);
     justify-content:space-between;
     justify-self:center;
     align-self:end;
   }
   .idone {
	 height:1.8em;
     padding:0;
	 font-weight:bold;
	 font-family: Verdana, Helvetica, Arial, Courier;  
     background-color: #efefef;
	 color:#333333;
	 border: 1px solid #969696;
	 cursor:pointer;
     border-radius: 3px;
	 box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	 display:flex;
	 justify-content:center;
	 align-items:center;
   }
   #btimer {
     width:22%;
	 order:4;
   }
   #time2 {
	 font-size:0.95em;	 
   }
   #undoredo {
	 margin:0 0.4rem;
	 width:25%;
     display:-ms-grid;
	 display:grid;
	 -ms-grid-columns:1fr 0.5rem 1fr;
     grid-template-columns:1fr 1fr;
	 grid-column-gap:0.5rem;
	 order:3;
   }   
   #sundoredo {
	 margin:0 0.2rem;
	 width:25%;
     display:-ms-grid;
	 display:grid;
	 -ms-grid-columns:1fr 0.5rem 1fr;
	 grid-template-columns:1fr 1fr;
	 grid-column-gap:0.3rem;
	 order:3;
   }   
   #bundo, #mbundo {
	 position:relative;
	 cursor:pointer;
	 touch-action:manipulation;
 	  -ms-grid-row:1;
	  -ms-grid-column:1;
   }
   #bredo, #mbredo {
	 position:relative;
	 cursor:pointer;
	 touch-action:manipulation;
 	  -ms-grid-row:1;
	  -ms-grid-column:3;
   }
   #mbundo, #mbredo, .msave {
	  cursor:default;
   }
   .sundo, .sredo {
	  height:2rem; 
   }   
   .undotail {
	 height:60%;
     width:50%;
     border-right:0.18rem solid #333333;
     border-top:0.18rem solid #333333;
	 border-radius:50% 50% 20% 0/40% 60% 30% 0;
	 position:absolute;
	 top:20%;
	 left:25%;
   }
   .undoarrow {
	 width:20%;
	 height:20%;
	 background-image:linear-gradient(45deg,#333333 0%,#333333 50%,transparent 50%,transparent 100%);
	 position:absolute;
	 top:23%;
	 left:23%;
   }  
   .redotail {
	 height:60%;
     width:50%;
     border-left:0.18rem solid #333333;
     border-top:0.18rem solid #333333;
	 border-radius:50% 50% 0 20%/60% 40% 0 30%;
	 position:absolute;
	 top:20%;
	 right:25%;
   }
   .redoarrow {
	 width:20%;
	 height:20%;
	 background-image:linear-gradient(315deg,#333333 50%,transparent 50%);
	 position:absolute;
	 top:23%;
	 right:23%;
   } 
   #reset {
     width:11%;
     display:flex;
     justify-content:center;
	 order:1;
   }	
   #sreset {
     width:11%;
     display:flex;
     justify-content:center;
	 order:1;
	 height:2rem;
   }	
   .restart {
     width:1.5em;
	 width:min(70%,1.5em);
	 height:0.6em;
	 border-left:2px solid #666666;
	 position:relative;
   }
   .restart::before {
	  content:"";
      position:absolute;
	  width:0.4em;
	  height:0.4em;
	  top:50%;
	  left:0.1em;
	  border-left:2px solid #666666;
	  border-bottom:2px solid #666666;
	  transform:translate(0,-50%) rotate(45deg);
      transform-origin:50% 50%;	  
   }
   .restart::after {
	  content:"";
      position:absolute;
	  width:calc(100% - 2px - 0.15em);
	  height:0.2em;
	  top:50%;
	  left:0.2em;
	  border-top:2px solid #666666;
	  border-bottom:2px solid #666666;
	  transform:translate(0,-50%);	  
   }
   #current_status {
     width:13%;
     position:relative;
	 order:2;
   }
   #csicon {
	   width:100%;
	   height:100%;
	   position:absolute;
	   top:0;
	   left:0;
   }
   #cschoicewrap {
	   width:350%;
	   height:380%;
	   position:absolute;
	   top:-220%;
	   left:-50%;
	   display:none;
	   flex-flow:row nowrap;
	   justify-content:space-between;
	   align-items:center;
	   background-color:#f5f5ff
   }
   #cschoice {
	   width:85%;
	   height:100%;
	   padding:4% 0;
	   display:flex;
	   flex-flow:column nowrap;
	   justify-content:space-around;
	   align-items:flex-end;
	   font-size:0.8em;
    }
	#cschoice p {
	   align-self:flex-start;
	   padding-left:8%;
	}
	#clschoice {
		width:16px;
		height:16px;
		border:1px solid #666666;
		align-self:flex-start;
		font-size:15px;
		color:#666666;
		margin:5px 5px 0 0;
		line-height:1;
		text-align:center;
		font-weight:400;
		position:relative;
	}
   #clschoice::before {
	 content:"";
	 position:absolute;
	 top:0;
	 left:0;
	 width:100%;
	 height:100%;
     background-image:linear-gradient(to right bottom, transparent 47%, #000000 47%, #000000 53%, transparent 53%);	 
   }   
   #clschoice::after {
	 content:"";
	 position:absolute;
	 top:0;
	 left:0;
	 width:100%;
	 height:100%;
     background-image:linear-gradient(to right top, transparent 47%, #000000 47%, #000000 53%, transparent 53%);	 
   }   
   .csoption {
	   width:80%;
	   height:30%;
	   display:flex;
	   justify-content:center;
	   align-items:center;
	   font-weight:700;
	   border:1px solid #888888;
	   border-radius:25px;
	   background-color:#e5e5f0
   }
   #csicon::after, .mcstatus::after {
     content:"?";
     width:calc(1.45em / 0.9);
     height:calc(1.45em / 0.9);
     border:3px solid #666666;
     border-radius:50%;
     background-color:#fffff0;
     position:absolute;
     top:50%;
     left:50%;
     transform:translate(-50%,-50%);
     display:flex;
     justify-content:center;
     align-items:center;
     font-size:0.9em;
     font-weight:bold;
     font-family: Helvetica, sans-serif, Arial, Courier, Times New Roman;
     color:#ff0000;
     margin:0;
     padding:0;
     box-sizing:border-box;
   }
   #csicon::before, .mcstatus::before {
	 content:"";
	 width:1.15em;
	 height:5px;
	 border-radius:0 30% 30% 0;
	 background-color:#666666;
	 position:absolute;
	 top:50%;
	 left:50%;
	 transform:translate(0,-50%) rotate(35deg); 
	 transform-origin:0 50%;
   }  
   .chkpic {
     width:1.45em;
     height:1.45em;
     border:3px solid #666666;
     border-radius:50%;
     background-color:#fffff0;
     position:absolute;
     top:50%;
     left:50%;
     transform:translate(-50%,-50%);
     font-size:0.9em;
     font-weight:bold;
     text-align:center;
     line-height:0.9em;
     font-family: Helvetica, sans-serif, Arial, Courier, Times New Roman;
     color:#ff0000;
   }
   #fillall {
     width:16%;
     display:flex;
     justify-content:center;
     align-items:center;
	 order:5;
   } 
   .fillgrid1 {
     width:1.5em;
     height:1.5em;
     border:1px solid #888888;
     background-color:#fffff0; 
     overflow:hidden; 
     position:relative;  
   }   
   .pmdp1s, .pmdp2s, .pmdp3s, .pmdp4s, .pmdp5s, .pmdp6s, .pmdp7s, .pmdp8s, .pmdp9s {
     font-size:0.46em; 
     font-weight:bold;
     line-height:1;
     color:#666666;
   }	   
   .pmdp1s {
     position:absolute;  
     top:0px;
     left:0px;	  	   
   }
   .pmdp2s {
     position:absolute;  
     top:0px;
     left:50%;	
     transform:translate(-50%,0);	 
   }
   .pmdp3s {
     position:absolute;  
     top:0px;
     right:0px;	  	   
   }
   .pmdp4s {
     position:absolute;  
     top:50%;
     left:0px;	
     transform:translate(0,-50%);	 
   }
   .pmdp5s {
     position:absolute;  
     top:50%;
     left:50%;	
     transform:translate(-50%,-50%);	 
   }
   .pmdp6s {
     position:absolute;  
     top:50%;
     right:0px;	
     transform:translate(0,-50%);	 
   }
   .pmdp7s {
     position:absolute;  
     bottom:0px;
     left:0px;	  	   
   }
   .pmdp8s {
     position:absolute;  
     bottom:0px;
     left:50%;	
     transform:translate(-50%,0);	 
   }
   .pmdp9s {
     position:absolute;  
     bottom:0px;
     right:0px;	  	   
   }
   .fillgrid2 {
     transform:translate(-1px,0) rotate(-10deg);
     font-size:0.6em; 
     font-weight:bold;
     color:#666666;
   }
   #cpuzz {
     width:26%;
	 order:1;
   }
   #cpuzz p {
	 font-size:0.75em;	   
   }
   #saveclues {
     width:45%;
	 order:5;
   }
   #saveclues p {
	 font-size:0.75em;
   }
   #s2solver {
	 width:32%;
	 order:7;
   }
   #s2solver input{
	 font-size:0.71rem;
	 width:100%;
     height:2rem;
     white-space:normal;	 
   }
   #ssltn {
	 font-size:0.71rem;
     width:22%;
     height:2rem;
     text-align:center;	 
	 order:6;
   }
   #eptlt {
 	  -ms-grid-row:1;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:2;
     grid-area:1/1/2/3; 
	 margin-top:0.1rem;
     font-size:0.75rem;
	 display:flex;
	 flex-flow:column nowrap;
	 align-items:center;
   }
   #archive select {
	  text-align:center;
   }
   #archive p{
	 display:inline;
     font-size:0.7rem;	 
   }   
   #exep {
 	  -ms-grid-row:1;
	  -ms-grid-row-span:1;
	  -ms-grid-column:3;
	  -ms-grid-column-span:1;
     grid-area:1/3/2/4;  
     font-size:0.65rem;
	 margin-right:0.5rem;
	 align-self:center;
	 justify-self:end;
 	 -ms-grid-column-align:end;
 	 -ms-grid-row-align:center;
   }	
   #digitcellwrap {
 	  -ms-grid-row:8;
	  -ms-grid-row-span:1;
	  -ms-grid-column:2;
 	  -ms-grid-column-span:1;
     grid-area:8/2/9/3;
     margin:0.8em 0 0 0;
     display:flex;
     justify-content:center;
     align-items:center;	 
   }	
  .box {
     width:9vmin;
	 height:9vmin;
     width:min(9.5vmin,var(--maxbtnwidth));
     height:min(9.5vmin,var(--maxbtnwidth)); 
     border:1px solid gray;
     border-radius:3px;
     box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     overflow:hidden;
     cursor:pointer;
     position:relative;
     background-image:linear-gradient(210deg,#09ffa4 55%,#cde6f5 100%);
	 display:flex;
	 flex-flow:row wrap;
	 justify-content:center;
	 align-items:center;
   }
   .box:active, #bundo:active, #bredo:active, #sundo:active, #sredo:active, #reset:active, #fillall:active, #convp:active, #relatecells:active, #colorpic:active, #cpencilpic:active, #ccolorpic:active, .keynum:active {
	 transform:scale(0.97,0.97);
   }
   #dcbxtp, #dcbxbm, #mdcbxtp, #mdcbxbm {
	 width:100%;
     font-family: Helvetica, sans-serif, Arial, Courier, Times New Roman;
     font-size:0.58em;
  	 font-weight:700;
	 color:#969666;
	 text-shadow:0px 0px 1px #cccccc;
	 padding:0;
	 margin:0;
     box-sizing:border-box;	   
	 line-height:1;
   }
   #dcbxtp {
	 text-align:left;
	 padding-left:1px;
   }
   #mdcbxtp {
	 text-align:left;
	 padding-left:1px;
	 font-size:0.55rem;
   }
   #dcbxbm {
	 text-align:right;
	 padding-right:1px;
   }
   #mdcbxbm {
	 text-align:right;
	 padding-right:1px;
	 font-size:0.55rem;
   }
   #dcdgbx, #mdcdgbx, #mdccellbx {
     color:#868633;  
     font-family:Verdana, sans-serif, Helvetica, Arial, Courier, Times New Roman;
     font-size:0.62em;	
     font-weight:700;
	 font-style:italic;
     white-space:nowrap;
	 text-align:center;
	 line-height:1;
   }
   #mdcdgbx, #mdccellbx {
	 font-size:0.55rem;
   }	 
   #mdccellbx {
	 font-size:0.55rem;
     color:#0000ff;
   }	 
   .dcacell {
     width:50%;	
   }
   #tools {
 	  -ms-grid-row:9;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:1;
     grid-area:9/1/10/2; 
     margin:0.5em 0 0 0;
     font-size:0.8em;
     font-weight:bold;
	 width:auto;
     transition:font-size 0.15s linear;
   }
   .toolstxt {
     padding:2px 1em;
     cursor:pointer;
   }
   #tarrow {
	 font-size:0.75em;
   }
   #pctrl2 {
 	  -ms-grid-row:10;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:2;
     grid-area:10/1/11/span 2;
     margin:0.2em auto 0 auto;
	 width:98%;
     width:calc(min(98%,var(--grid-width)) + 0px);
     height:0;
     overflow:hidden;
     transition:height 0.15s linear;
   }	
   #pctrl2dtl {
     width:100%;
     display:flex;
     flex-flow:row nowrap;
     justify-content:space-between;
   }   
   #relatecells, .mrltclls {
	 border:1px solid #888888;
	 position:relative;
   }
   #relatedpic {
	  width:38%;
	  height:62%;
	  border:1px solid #888888;
	  position:absolute;
	  top:50%;
	  left:50%;
	  transform:translate(-50%,-50%);
   }
   #relatecells::before, .mrltclls::before {
	  content:"";
	  width:61%;
	  height:19%;
	  border-top:1px solid #888888;
	  border-bottom:1px solid #888888;
	  position:absolute;
	  top:50%;
	  left:50%;
	  transform:translate(-50%,-50%);
   }
   #relatecells::after, .mrltclls::after {
	  content:"";
	  width:12%;
	  height:82%;
	  border-left:1px solid #888888;
	  border-right:1px solid #888888;
	  position:absolute;
	  top:50%;
	  left:50%;
	  transform:translate(-50%,-50%);
   }
   .toolpic {
     width:3.5em;
	 width:min(15vmin,var(--w68px));
	 height:1.8em;
     box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     cursor:pointer;
	 border:1px solid #888888;
	 overflow:hidden;	
   }
   #colorbox {
	 position:relative;	
   }	 
   #colorpic, #ccolorpic, .mclrpic {
	 -ms-grid-columns:1fr 1px 1fr 1px 1fr 1px 1fr;
	 -ms-grid-rows:1fr 1px 1fr;
	 grid-template-columns:repeat(4,1fr);
	 grid-template-rows:repeat(2,1fr);
	 background-color:#888888;
     display:-ms-grid;
	 display:grid;
	 grid-gap:1px;
   }
   #chgcolorbox {
	 position:absolute;
	 top:1.8em;
	 left:-2.3em;
	 width:7.8em;
	 height:0px;
	 overflow:hidden;
	 z-index:1;
	 transition:height 0.2s linear;
   }
   #chgcolorwrap {
   }
   #ccleft {
	 float:left;
	 width:3.3em;
	 height:7px;
	 border-right:1px solid #888888;
	 border-bottom:1px solid #888888;
   }   
   #ccright {
	 float:right;
	 width:3.3em;
	 height:7px;
	 border-left:1px solid #888888;
	 border-bottom:1px solid #888888;
   }   
   #chgcolor {
	 clear:both;
	 width:100%;
	 height:1.7em;
	 border:1px solid #888888;
	 border-top:none;
	 display:flex;
	 flex-flow:row nowrap;
	 justify-content:space-around;
	 align-items:center;
   }
   .cboxclr {
	 width:0.85rem;
	 height:0.85rem;
	 cursor:pointer;
	 border:1px solid dimgray;
	 box-shadow: 0 1px 2px rgba(0,0,0,0.5);
   }
   #cbox1 {
	 background-color:#9aff67;
   }	
   #cbox2 {
	 background-color:#ffff77;
   }	
   #cbox3 {
	 background-color:#ff8945;
   }	
   #cbox4 {
	 background-color:#45bfff;
   }	
   #cbox5 {
	 background-color:#fffff0;
   }	
   #cpencilpic, .mcpmpic {
	 background-color:#888888;
     display:-ms-grid;
	 display:grid;
	 -ms-grid-columns:1fr 1px 1fr;
	 -ms-grid-rows:1fr;
	 grid-template-columns:repeat(2,1fr);
	 grid-gap:1px;
   }   
   .cbxt {
	 display:flex;
	 justify-content:center;
	 align-items:center;
	 font-size:0.55em;
	 font-weight:bold;
   }   
   #cbx1, #cbx1c{
     background-color:#ffff77;
 	  -ms-grid-row:1;
	  -ms-grid-column:1;
   }   
   #cbx2, #cbx2c {
     background-color:#fffff0;
 	  -ms-grid-row:1;
	  -ms-grid-column:3;
   }   
   #cbx3, #cbx3c {
     background-color:#45bfff;
 	  -ms-grid-row:1;
	  -ms-grid-column:5;
   }   
   #cbx4, #cbx4c {
     background-color:#fffff0;
 	  -ms-grid-row:1;
	  -ms-grid-column:7;
   }   
   #cbx5, #cbx5c {
     background-color:#fffff0;
 	  -ms-grid-row:3;
	  -ms-grid-column:1;
   }   
   #cbx6, #cbx6c {
     background-color:#ff8945;
 	  -ms-grid-row:3;
	  -ms-grid-column:3;
   }   
   #cbx7, #cbx7c {
     background-color:#fffff0;
 	  -ms-grid-row:3;
	  -ms-grid-column:5;
   }   
   #cbx8, #cbx8c {
     background-color:#9aff67;
 	  -ms-grid-row:3;
	  -ms-grid-column:7;
   }   
   #cptext1 {
	  -ms-grid-row:1;
	  -ms-grid-column:1;
   }
   #cptext2 {
	  -ms-grid-row:1;
	  -ms-grid-column:3;
   }
   .cptxt {
	 font-size:0.7em;	
	 font-weight:bold;
     background-color:#fffff0;
	 text-align:center;
	 position:relative;
   } 
   .cptxt::after {
	 content:"";
	 width:90%;
	 height:2px;
	 background-color:#222222;
	 position:absolute;
	 top:33%;
	 left:9%;
	 transform:rotate(-13deg);
	 transform-origin:bottom left;
   } 
   #convbox {
   }
   #convp {
	 float:left;
	 display:flex;
	 justify-content:center;
	 align-items:center;
     background-color:#fffff0;
	 font-weight:bold;
   }
   .sm2big0 {
	 font-size:0.65em;
   } 
   .sm2big1 {
	 font-size:0.4em;
   } 
   .sm2big2 {
	 font-size:0.5em;
   } 
   .sm2big3 {
	 font-size:0.6em;
   } 
   .sm2big4 {
	 font-size:1.0em;
   } 
   #autoconv {
     float:left;
     height:1.8em;
     width:2.2em;
     display:flex;
     flex-flow:column nowrap;
     justify-content:center;
     align-items:center;
     border:1px solid #cccccc;
     padding-left:3px;
     cursor:pointer;
   } 
   #actxt {
     font-size:0.6em;
     font-weight:bold;
     color:#333333;
   }
   #acbx {
	 height:0.9em;
	 width:100%;
	 position:relative;
   }
   .swbar {
	 width:38%;
     height:3px;
     border-radius:2px;
     background-color:#cccccc;	
     position:absolute;
     top:50%;
     left:50%;	
 	 transform:translate(-50%,-50%);
   }	 
   #swbut {
	 width:0.6em;
	 height:0.6em;
	 border-radius:50%;
	 background-color:#aaaaaa;	
     position:absolute;
	 left:calc(31% - 0.3em);
	 top:50%;
	 transform:translate(0,-50%);
   }
   #itfbm, #itfbm2 {
      display:block;
	  margin:3.2rem auto 0;
      color:#693838;
      font-size:0.85rem;
	  position:relative;
   }
   #itfbm ul, #itfbm2 ul {
     padding-left:1.5rem;
     list-style:circle outside;
   }
   #itfbm li {
     padding:0.8rem 0 0 0;
   }   
   #itfbm a, #itfbm2 a {
     text-decoration:none;
     color:#693838;
   }
   #itfbm a:hover, #itfbm2 a:hover, .h2s:hover {
     color:#000000;
   }
   .h2s {
	 display:block;
	 margin:0 auto 1rem;
	 padding:0.3rem 0;
	 width:85%;
	 font-size:0.9rem;
	 font-size:min(0.9rem,var(--gridfontsize));
	 font-weight:bold;
     color:#693838;
	 background-color:#ffcc00;
	 border:1px solid #cc9900;
     border-radius: 1rem/45%;
     box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	 cursor:pointer;
   } 
   .npuzz {
	 position:relative;
   }
   .npzlk, .npzlk2, .nbglk {
	 display:block;
	 margin:0.5rem auto 0.2rem;
	 width:85%;
	 padding:0.3rem 0;
	 text-align:center;
	 font-size:0.9rem;
	 font-size:min(0.9rem,var(--gridfontsize));
	 font-weight:bold;
	 background-color:#ccccff;
	 border:1px solid #cc9900;
     border-radius: 1rem/45%;
     box-shadow: 0 1px 3px rgba(0,0,0,0.5);	   
   }
   .nbglk {
	 margin-bottom:1rem;
	 background-color:#ccffcc;
   }	 
   .npzlk2 {
	 margin-top:2.5rem;
   }	 
   .pptwrap {
	 display:block;  
     margin:0.7rem 0;
	 text-align:center;
   }
   #pickpuzz {
	 display:inline-block;
     width:9.5rem;
     height:1.1rem;
     font-size:0.65rem;
     text-align:center;
     background-color:#ffffff;
     font-style:italic;
     color:#666666;
     line-height:1.03rem;
     border:1px solid #666666;
     box-shadow: 1px 1px 1px 0 #999999 inset;
	 vertical-align:top;
   }   
   .ppt {
	 display:inline-block;
	 height:1.1rem;
	 line-height:1.1rem;
     font-size:0.7rem;
	 color:purple;
	 vertical-align:top;
   }
   .npuzz p {
	 display:inline;
     margin:0.5rem 0 0 0.5rem; 
     font-size:0.7rem;
	 color:purple;
   }
   .puzzleno {
     width:4.5rem;
	 font-size:0.7rem;
	 height:0.9rem;
   }
   #enterbox {
	 display:none;
     position:absolute;
     top:-15rem;
     right:3%;
     padding:1.2rem 1.2rem;
	 width:93%;
     width:min(var(--w500px),93%);
     background-color:#f8f8fa;
     border:1px solid #999999;
     color:#333333;
     z-index:-1;
   }
   #enterbox p  {
     font-size:0.8rem;
   }
   #xbox {
    float:right;
    padding:0;
	margin-left:1rem;
    width:1rem;
    height:1rem;
    font-size:0.75rem;
    line-height:calc(1rem - 2px);
    text-align:center;
    border:1px solid black;
	position:relative;
   } 
   #xbox::before {
	 content:"";
	 position:absolute;
	 top:0;
	 left:0;
	 width:100%;
	 height:100%;
     background-image:linear-gradient(to right bottom, transparent 48%, #000000 48%, #000000 52%, transparent 52%);	 
   }   
   #xbox::after {
	 content:"";
	 position:absolute;
	 top:0;
	 left:0;
	 width:100%;
	 height:100%;
     background-image:linear-gradient(to right top, transparent 48%, #000000 48%, #000000 52%, transparent 52%);	 
   }   
   #keypad {
     margin:10px auto 0;
	 width:60%;
	 display:flex;
	 flex-flow:row wrap;
   }   
   .keynum {
     width:30%;
     height:2rem;
     font-size:1rem;
     line-height:1.45rem;
	 display:flex;
	 justify-content:center;
	 align-items:center;
     margin:0.3rem 3% 0 0;
     border:1px solid #969696;
     background-color:#fefefe;
   }
   .keynum:active {
	 transform:scale(0.95,0.95);
	 background-color:#f0f0e0;
   }
   #keyc {
	 width:63%;
   }
   #pickgame {
	 float:right;
     margin:1rem 8% 0 0;
     width:5.5rem;
	 height:2rem;
	 font-size:0.9rem;
	 font-weight:bold;
	 border-radius:0.9rem;
    -webkit-appearance: none;
   }
  #pop {
	  display:none;
	  position:absolute;
	  padding:1.8rem 2rem;
	  margin:0 auto;
	  top:-7rem;
	  left:50%;
	  transform:translate(-50%,0);
	  width:93%;
	  border:1px solid #888888;
      box-shadow: 1px 1px 15px rgba(0,0,0,0.5);
	  background-color:#ffffff;
	  z-index:-1;
  }
  #pop p {
	  display:inline-block;
	  font-size:0.85rem;
	  line-height:1.5;
	  color:#333333;
	  font-weight:bold;
	  margin:0 0 1.5rem;
	  text-align:justify;
  }
  #pop .btn, #pop .btny {
	  margin:0.8rem auto 0;
	  background-color:#ff5555;
	  color:#ffffff;
	  width:100px;
	  height:38px;
	  display:flex;
	  justify-content:center;
	  align-items:center;
	  font-size:0.8rem;
	  font-weight:bold;
	  border:1px solid #555555;
      box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
	  border-radius:18px;
	  cursor:pointer;
  }
  #pop .btny {
	  background-color:#5555ff;
  }  
  #pop .btn:hover {
	  background-color:#ff2222;
  }
  #pop .btny:hover {
	  background-color:#2222ff;
	  color:#ffffff !important;
  }
   .buffer2, .buffer2a {
	  text-align:center;
	  padding:2rem 0 0;
   }
   #h2use {
	  font-size:0.78rem;
   }
   #h2use2 {
	  font-size:0.78rem;
	  margin-top:1rem;
   }
   .notetxt, .notetxt2 {
	 font-size:0.75rem;
	 line-height:1.5;
	 margin:0 auto;
	 padding:1rem 1.2rem 0;
	 text-align:justify;
	 max-width:600px;
   }
   #bmsg {
	  font-size:0.75rem;
	  line-height:1.38;
	  width:80%;
	  width:calc(min(80%,calc(1.6 * var(--grid-width))) + 0px);
	  margin:1rem  auto;
	  text-align:left;
   }
   #gmopt, #gmopt2{
	 margin:2rem 0 0;
   }
   #savep {
	 float:left;
	 padding: 0;
	 margin-left:0.5rem;
	 font-size:0.85rem;
	 color:#3a2a8d;
   }
   #print {
	 float:left;
	 padding: 0;
	 margin-left:3rem;
	 font-size:0.85rem;
	 color:#3a2a8d;
   }
   #savegame {
	 display:none;
     margin:0.8rem 0 0 0.15rem;
	 padding:0 0.7rem;
	 font-size:0.7rem;
	 color:#3a2a8d;
   }   
   #savegame p{
	  font-size:0.6rem;
   }
   .pad1 {
	  padding-left:0.7rem;
   }   
   #flink {
     float:right;
     margin-right:0.5rem;
     font-size:0.85rem;
   }
   #cpy {
     margin-top:0.5rem;
     text-align:center;
     color:#333333;
     font-size:0.75rem;
   }
   .footlink {
	  display:flex;
	  width:85%;
	  width:min(85%,500px);
	  margin:3rem auto 2rem auto;
	  flex-flow:row nowrap;
	  justify-content:space-between;
   }
   .footlink a {
	  text-decoration:none;
	  color:#333333;
   }	  
   .footlink a:visited {
	  color:#333333;
   }	  
   .footlink a:hover {
	  color:#000000;
   }	  
   .bold {
	 font-weight:bold;
   }
   .mnotetxt {
	 font-size:0.75rem;
	 line-height:1.3;
   }
   .mlist {
     list-style:disc inside;
	 font-size:0.75rem;
   }
   .mlist li {
	 padding: 1.2rem 0 0 0;
	 line-height:1.5;
   }
   .mlist h4 {
	 font-size:0.8rem;
	 display:inline-block;
   } 
   .mlist h5 {
	 font-size:0.76rem;
     margin-top:1rem;
   } 
   .mpara {
	 margin:0.9rem 0.2rem 0 1rem;
	 display:flex;
	 flex-flow:row nowrap;
	 text-align:justify;
   }   
   .mpara2 {
	 margin:0.3rem 0.2rem 0 0;
   }   
   .mlist2 {
     padding:0.2rem 0 0 0;
     list-style:decimal inside;
   }
   .mlist2 li {
	 padding-top: 0.5rem;
   } 
   .miconwrap {
	 margin:0 0.5rem 0.1rem 0;
	 font-size:1rem;
   }   
   .miconwrap2 {
	 float:left;
	 margin:0 0.5rem 0.1rem 0;
	 font-size:1rem;
   }   
   .mtxt {
	 padding: 0;
	 text-align:justify;
   }   
   .mpencil, .mdcbx {
     width:2rem;
	 height:2rem;
   }
    .mpencil {
	 border-radius:50%;
	 background-image:radial-gradient(#eeeeee,#eeeeee);
	 opacity:0.9;
	 display:flex;
	 flex-flow:row nowrap;
	 justify-content:center;
	 align-items:center;
   }  
   .mpencil2 {
	 background-image:radial-gradient(#ffffbb 18%,#ccff00);
	 transform:rotate(-55deg);
   }
   .mdcbx {
     border:1px solid gray;
     border-radius:3px;
     box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     overflow:hidden;
     position:relative;
     background-image:linear-gradient(210deg,#09ffa4 55%,#cde6f5 100%);	 
     cursor:default;	 
	 display:flex;
	 flex-flow:row wrap;
	 justify-content:center;
	 align-items:center;
   }
   .mdcbx2 {
     background-image:linear-gradient(150deg,#cde6f5 55%,#09ffa4 100%);	   
   }
   .mnumberopt {
    width:18.5rem;
	margin:0.9rem 0 0 1rem;
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-between;
	font-size:0.9rem;
	cursor:default;
   }
  .mpknumber {
	height:1.7rem;
	width:1.7rem;
    border:1px solid #886655;
    background-color:#f0f6f0;
    position:relative;
    border-radius:3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
   }    
   .mfllall {
     width:3.8rem;
     display:flex;
     justify-content:center;
     align-items:center;
	 font-weight:bold;
	 cursor:default;
   } 
   .mundoredo {
	 width:3.8rem;
     display:-ms-grid;
	 display:grid;
	 -ms-grid-columns:1fr 0.5rem 1fr;
     grid-template-columns:1fr 1fr;
	 grid-column-gap:0.2rem;
   }   
   .mcstatus {
	 width:3.8rem;
     position:relative;
	 cursor:default;
   }
   .mtoolpic {
     width:3.8rem;
	 height:1.8rem;
	 position:relative;
     box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	 border:1px solid #888888;
	 cursor:default;
   }
   .mconvp {
	 display:flex;
	 justify-content:center;
	 align-items:center;
     background-color:#fffff0;
	 font-weight:bold;
   }
   .mautoconv {
     height:1.8rem;
     width:2.6rem;
     display:flex;
     flex-flow:column nowrap;
     justify-content:center;
     align-items:center;
     border:1px solid #cccccc;
     padding-left:3px;
	 cursor:default;
   } 
   .mh2s {
 	 margin:0.9rem 0 0 1rem;
	 padding:0.3rem  0;
	 width:16.5rem;
	 font-size:0.9rem;
	 font-weight:bold;
     color:#693838;
	 text-align:center;
	 background-color:#ffcc00;
	 border:1px solid #cc9900;
     border-radius: 1rem/45%;
     box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	 cursor:default;
   }
  #manualmain h1 {
	font-size:0.9rem;
    text-align:center;	
	margin-bottom:1rem;
  }
  #manualmain h2 {
	font-size:0.9rem;
    text-align:center;	
  }
  #manualmain h3 {
	font-size:0.8rem;
    text-align:center;	
  }
  .dcnote {
	font-size:0.65rem;
	font-weight:bold;
	text-align:center;
  }
  .pmnth {
	 display:flex;
	 flex-flow:row nowrap;
	 justify-content:flex-end;
	 margin:0.2rem 0 0.5rem
  }
  .champs {
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-between;
	margin-top:0.5rem;
  }  
  .chprptlink  {
    font-size:0.7rem;
	color:#cccccc;
  }
  .chprptlink  a{
    color:#0000ff;
    text-decoration:none;
  }
  .chprptlink  a:visited{
    color:#0000ff;
  }
  .dcmlst, .t10lst {
	display:flex;
	flex-flow:row nowrap;
	margin-top:0.5rem;
  }
  .t10lst:nth-of-type(1) {
	margin-top:0;
  }
  .mlstdt, .mlstlvl, .mlsttm, .mlstip, .tlstrk, .tlsttm, .tlstip {
	text-align:center;
    font-size:0.7rem;
  }
  .mlstdt {
	width:29%;
  }
  .mlstlvl {
	width:23%;
  }
  .mlsttm {
	width:21%;
  }
  .mlstip {
	flex:1;
  }
  .tlstrk {
	flex:3;
  }
  .tlsttm {
	flex:4;
  }
  .tlstip {
	flex:5;
  }
  .lfont {
   font-family:Arial Unicode MS, Arial;
   font-size:0.8rem;
  }
  .top10 {
    text-align:center;
  }
  .t10lstwrap {
	border:1px solid #333333;
	padding:1rem 0;
	margin:0.5rem 0.5rem 2rem;
  }
  #dcstp {
	display:block;
	width:95%;
	margin:0 auto;
  }
  #dcstp h3{
	font-size:0.9rem;
    margin:3rem 0 1.5rem;
	text-align:center;
  }
  #dcstp p{
	padding:2rem 7% 3rem;
	font-size:0.85rem;
	line-height:1.9;
	text-align:justify;
  }	
  #dcstp #itfbm{
	margin-bottom:3rem;
  }
  .cttxt {
	margin:1rem auto 0;
	font-size:0.78rem;
	line-height:1.7;
	text-align:justify;
  }  
  .cttxt img {
	 width:12rem;
     object-fit:contain;
  }
  .dcrc {
	width:95%;
	max-width:800px;
	margin:0 auto;
  }
  p.alignc {
    text-align:center;
	padding-top:0.3rem;
  }
  .abhd {
	  text-align:left !important;
	  font-size:0.9rem !important;
	  padding:1.1rem 0 0;
  }
  .abhd4 {
	  font-size:0.8rem;
	  padding:1rem 0 0;
  }
  .ablst {
	  list-style-type:decimal;
	  list-style-position:outside;
	  padding:0.8rem 0 0 1.2rem;
	  font-size:0.78rem;
  }
  .ablst li {
	  line-height:1.6;
	  text-align:justify;
  }
  .abulst {
	  list-style-type:disc;
	  list-style-position:outside;
	  padding:0.7rem 0 0 1.2rem;
	  font-size:0.75rem;
  }
  .abulst li {
	  line-height:1.6;
	  text-align:justify;
  }
@media (min-aspect-ratio:3517/3833) and (max-aspect-ratio:3833/3137) and (max-width:469px) {
   :root {
      --grid-height:82vmin;
      --grid-height:min(82vmin,var(--maxwidth));
   }
}
@media (max-aspect-ratio:3833/3137) and (min-width:470px) {
   :root {
	  --grid-width:84vmin;
      --grid-height:84vmin;
	  --grid-width:min(84vmin,var(--maxwidth));
      --grid-height:min(84vmin,var(--maxwidth));
   }
   html {
   }
   #itf {
	 -ms-grid-columns:1fr auto auto 1fr;
	 -ms-grid-column-align:center;
	 -ms-flex-pack:center;
     grid-template-columns:auto auto;
	 justify-content:center;
     margin-top:1rem;	 
	 font-size:19px;
     font-size:calc(16px + ((var(--grid-height) - 320px) / 24));
   }
   .gameno {
 	  -ms-grid-row:2;
	  -ms-grid-row-span:1;
	  -ms-grid-column:2;
	  -ms-grid-column-span:1;
	 grid-area:2/1/3/2;
   } 
   #bcmsg {
 	  -ms-grid-row:3;
	  -ms-grid-row-span:1;
	  -ms-grid-column:2;
	  -ms-grid-column-span:1;
	 grid-area:3/1/4/2;
   }
   #playtable {
 	  -ms-grid-row:4;
	  -ms-grid-row-span:3;
	  -ms-grid-column:2;
	  -ms-grid-column-span:1;
     grid-area:4/1/7/2;
   }
   #playarea {
	 width:400px;
	 height:400px;
	 width:var(--grid-width);
 	 height:var(--grid-height);
	 margin:0;
  }	
   #numberoption, #snumberoption {
 	  -ms-grid-row:4;
	  -ms-grid-row-span:3;
	  -ms-grid-column:3;
	  -ms-grid-column-span:1;
	 grid-area:4/2/7/3;
	 width:42px;
     width:calc(min(9vmin,45px) + 0px);
	 height:400px;
 	 height:var(--grid-height);
	 margin:0 0 0 0.8em;
	 flex-flow:column nowrap;
	 justify-self:start;
   }
   .picknumber {
     margin-right:0;
     margin-bottom:2px;
   }    
   #numberoption div:nth-last-of-type(1), #snumberoption div:nth-last-of-type(1) {
	  margin-bottom:0;
   }
   #pencilwrap{
 	  -ms-grid-row:2;
	  -ms-grid-row-span:2;
	  -ms-grid-column:3;
	  -ms-grid-column-span:1;
	 grid-area:2/2/4/3;
	 margin-top:0;
	 margin-bottom:0.3rem;
	 margin-left:0.8rem;	   
   }
   #pencil {
	 height:42px;
	 width:42px;
	 height:min(9vmin,var(--w45px));
	 width:min(9vmin,var(--w45px));
	 align-self:end;
	 justify-self:start;
   }
   #pctrl1, #spctrl1 {
 	  -ms-grid-row:7;
	  -ms-grid-row-span:1;
	  -ms-grid-column:2;
	  -ms-grid-column-span:1;
     grid-area:7/1/8/2;
	 width:400px;
	 width:var(--grid-width);
     display:flex;
     flex-flow:row nowrap;
     margin:1em 0 0 0;
     justify-self:start;
   }
   #digitcellwrap {
 	  -ms-grid-row:7;
	  -ms-grid-row-span:1;
	  -ms-grid-column:3;
	  -ms-grid-column-span:1;
     grid-area:7/2/8/3;	
     justify-self:start;
     margin:0.7em 0 0 0.8em;
  }	
   .box {
	 width:42px;
	 height:42px;
     width:min(9vmin,var(--w45px));
     height:min(9vmin,var(--w45px)); 
   }
   #tools {
 	  -ms-grid-row:8;
	  -ms-grid-row-span:1;
	  -ms-grid-column:2;
	  -ms-grid-column-span:1;
     grid-area:8/1/9/2;   
   }
   #eptlt {
 	  -ms-grid-row:1;
	  -ms-grid-row-span:1;
	  -ms-grid-column:2;
	  -ms-grid-column-span:2;
     grid-area:1/1/2/3; 
   }
   #pctrl2 {
 	  -ms-grid-row:9;
	  -ms-grid-row-span:1;
	  -ms-grid-column:2;
	  -ms-grid-column-span:2;
     grid-area:9/1/10/3;
     margin:0.2em 0 0 0;
	 width:430px;
     width:min(90vmin,var(--maxwidth));
     justify-self:start;   
   }	
   #itfbm, #itfbm2 {
	 width:450px;
	 width:min(95%,var(--grid-width)); 
   }   
  #dcstp {
	width:460px;
	width:min(95%,calc(1.3 * var(--grid-width)));
  }
}

@media (max-aspect-ratio:3833/3137) and (min-width:680px) { 
   :root {
	  --grid-width:58vmin;
      --grid-height:58vmin;
	  --grid-width:min(58vmin,var(--maxwidth));
      --grid-height:min(58vmin,var(--maxwidth));
   }
   html {
   }
   #hdr {
	 -ms-grid-rows:auto auto; 
	 grid-template-rows:auto auto;  
   }
   .dlogo {
 	  -ms-grid-row:2;
	  -ms-grid-column:1;
	  -ms-grid-column-span:2;
	  grid-area:2/1/3/3;
	  margin:0.9rem 5px 0;
   }
   #navborder {
      display:none;
   }
   #nvb {
 	  -ms-grid-row:1;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:4;
	 grid-area:1/1/2/5;
   } 
   #navcntwrap {
	  margin-top:0;
    } 
   #navcontent {
     position:relative;
	 height:auto;
	 overflow:visible;	
	 box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
   }
   #navdetail {
	 display:flex;
     flex-flow:row nowrap;
   }
   .mainnav {
     display:inline-block;
	 width:auto;
	 padding:0;
	 text-align:center;
	 border-right:none;
     border-left: 1px solid #cccccc;
     border-top: 1px solid #cccccc;
	 flex:1 0 auto;
   }
   #navdetail a:nth-of-type(1) {
	  border-top: 1px solid #cccccc;
	  border-left:none;
   }
   #levelnav {
  	  -ms-grid-row:2;
	  -ms-grid-row-span:1;
	  -ms-grid-column:3;
	  -ms-grid-column-span:1;
	 grid-area:2/3/3/4; 
     margin-top:1.2rem;	 
  }
   #lvlcontent {
	 right:1px;
   } 
   #exep {
 	  -ms-grid-row:2;
	  -ms-grid-row-span:1;
	  -ms-grid-column:3;
	  -ms-grid-column-span:1;
     grid-area:2/3/3/4; 
     justify-self:end;	 
   }	 
}

@media (min-aspect-ratio:3833/3137) {
    :root {
	  --grid-width:70vmin;
      --grid-height:70vmin;
	  --grid-width:min(70vmin,var(--maxwidth));
      --grid-height:min(70vmin,var(--maxwidth));
      --rsbwidth:calc(var(--grid-width) / 8.6);
	  --lsbwidth:calc(var(--grid-width) / 6);
	  --lsbheight:calc(var(--grid-height) / 11);	  
	}
   #itf {
	 -ms-grid-columns:1fr auto 60vmin auto auto 1fr;
	 -ms-grid-rows:auto auto auto 1.2rem calc(7vmin - 1.2rem) auto auto auto auto auto; 
     grid-template-columns:auto var(--grid-width) auto auto;
	 grid-template-rows:repeat(3,auto) 1.2rem calc(var(--rsbwidth) - 1.2rem) repeat(5,auto);  	   
	 justify-content:center;
	 font-size:17px;
     font-size:calc(16px + ((var(--grid-height) - 320px) / 24));
   }
   #itfbm, #itfbm2 {
	 width:420px;
	 width:calc(1.1 * var(--grid-width)); 
	 margin-top:2rem;
   } 
   .h2s {
   }   
  #eptlt {
 	  -ms-grid-row:1;
	  -ms-grid-row-span:1;
	  -ms-grid-column:2;
	  -ms-grid-column-span:4;
     grid-area:1/1/2/5; 
	 padding-right:1rem;
   }
  .gameno {
 	  -ms-grid-row:2;
	  -ms-grid-row-span:1;
	  -ms-grid-column:3;
	  -ms-grid-column-span:1;
	 grid-area:2/2/3/3; 
   }  
   #bcmsg {
 	  -ms-grid-row:3;
	  -ms-grid-row-span:1;
	  -ms-grid-column:3;
	  -ms-grid-column-span:1;
	 grid-area:3/2/4/3; 
   }  
   #playtable {
 	  -ms-grid-row:4;
	  -ms-grid-row-span:4;
	  -ms-grid-column:3;
	  -ms-grid-column-span:1;
     grid-area:4/2/8/3;
   }	 
   #playarea {
	 height:60vmin;
	 width:60vmin;
	 height:var(--grid-height);
	 width:var(--grid-width);
   }	
   #numberoption {
 	  -ms-grid-row:6;
	  -ms-grid-row-span:1;
      -ms-grid-column:4;
	  -ms-grid-column-span:2;
	 grid-area:6/3/7/5;
     height:calc(48vmin - 2em);	 
	 height:calc(var(--grid-height) - (2 * var(--rsbwidth)) - 1.6em);
	 width:calc(12vmin + 0.5em);
	 width:calc(2 * var(--rsbwidth) + 0.5em);
	 margin:0.8em 0 0.8em 0.5em;
     display:-ms-grid;
	 display:grid;
	 -ms-grid-columns:1fr 0.5em 1fr;
	 -ms-grid-rows:1fr 0.8em 1fr 0.8em 1fr 0.8em 1fr 0.8em 1fr;
	 grid-template-columns:1fr 1fr;
	 grid-template-rows:repeat(5,1fr);
	 grid-gap:0.5em;
	 align-self:start;
 	 max-height:none;
   }
   #snumberoption {
 	  -ms-grid-row:4;
	  -ms-grid-row-span:3;
	  -ms-grid-column:4;
	  -ms-grid-column-span:2;
	 grid-area:4/3/7/5;  
     height:50vmin;	 	 
	 height:calc(var(--grid-height) - (1.6 * var(--rsbwidth)));
	 width:calc(12vmin + 0.5em);
	 width:calc(2 * var(--rsbwidth) + 0.5em);
	 margin:0 0 0 0.5em;
     display:-ms-grid;
	 display:grid;
	 -ms-grid-columns:1fr 0.5em 1fr;
	 -ms-grid-rows:1fr 3.15vmin 1fr 3.15vmin 1fr 3.15vmin 1fr 3.15vmin 1fr;
	 grid-template-columns:1fr 1fr;
	 grid-template-rows:repeat(5,1fr);
	 grid-column-gap:0.5em;
	 grid-row-gap:calc(0.45 * var(--rsbwidth));
	 align-self:start;
 	 max-height:none;
   }
   .picknumber {
	 margin:0;  
   }
   #b1 {
 	  -ms-grid-row:1;
	  -ms-grid-column:1;	   
   }
   #b2 {
 	  -ms-grid-row:1;
	  -ms-grid-column:3;	   
   }
   #b3 {
 	  -ms-grid-row:3;
	  -ms-grid-column:1;	   
   }
   #b4 {
 	  -ms-grid-row:3;
	  -ms-grid-column:3;	   
   }
   #b5 {
 	  -ms-grid-row:5;
	  -ms-grid-column:1;	   
   }
   #b6 {
 	  -ms-grid-row:5;
	  -ms-grid-column:3;	   
   }
   #b7 {
 	  -ms-grid-row:7;
	  -ms-grid-column:1;	   
   }
   #b8 {
 	  -ms-grid-row:7;
	  -ms-grid-column:3;	   
   }
   #b9 {
 	  -ms-grid-row:9;
	  -ms-grid-column:1;	   
   }
   #b10 {
 	  -ms-grid-row:9;
	  -ms-grid-column:3;	   
   }
   #pencilwrap {
 	  -ms-grid-row:4;
	  -ms-grid-row-span:2;
	  -ms-grid-column:4;
	  -ms-grid-column-span:1;
	 grid-area:4/3/6/4;
	 margin:0 0 0 0.5em;
	 justify-self:start;
	 -ms-grid-column-align:start;
	 align-self:start;
   }   
   #digitcellwrap {
 	  -ms-grid-row:4;
	  -ms-grid-row-span:2;
	  -ms-grid-column:5;
	  -ms-grid-column-span:1;
     grid-area:4/4/6/5;	
	 margin:0 0 0 0;
	 justify-self:end;
	 -ms-grid-column-align:end;
	 align-self:start;
   }
   #pencil {
	 width:6vmin;
	 height:6vmin;
	 width:var(--rsbwidth);
     height:var(--rsbwidth);	 
   }
   #digitcell {
	 width:6vmin;
	 height:6vmin;
	 width:var(--rsbwidth);
     height:var(--rsbwidth);	 
   }
   #pctrl1, #spctrl1 {
  	  -ms-grid-row:8;
	  -ms-grid-row-span:1;
	  -ms-grid-column:3;
	  -ms-grid-column-span:3;
	 grid-area:8/2/9/5;
     width:calc(72vmin + 1em);	 
	 width:calc(var(--grid-width) + 1em + (2 * var(--rsbwidth)));
	 height:1.8em;
	 margin:0.5em 0 0 0;
	 display:flex; 
     flex-flow:row nowrap;
	 align-items:end;
   }
   #reset {
	 order:1; 	 
	 flex:3;
	 width:13%;
   }
   #sreset {
	 order:1; 	 
	 width:9%;
	 height:1.8rem;
   }
   #current_status {
	 order:2;  
	 margin-left:0.5em;
	 width:16%;
	 flex:3;
   }
   #btimer {
	 order:3;  
	 margin-left:0.5em;
	 width:calc(60vmin - 1.5em - 50%);
	 width:calc(var(--grid-width) - 1.5em - 50%);
	 flex:6;
   }
   #fillall {
	 order:4; 
	 margin-left:0.5rem;
	 width:21%;
	 flex:5;
   }
   #saveclues {
     margin-left:1.5rem;
	 width:calc(60vmin - 1.5rem - 26%);
     width:calc(var(--grid-width) - 1.5rem - 26%);
   }	 
   #undoredo {
	 order:5; 
	 width:calc(12vmin + 0.5rem);
	 width:calc(2 * var(--rsbwidth) + 0.5rem);
	 margin:calc(-1 * (6vmin + 0.5rem)) 0 0 0.5rem;
	 margin:calc(-1 * (var(--rsbwidth) + 0.6rem)) 0 0 0.5rem;
	 flex:0 0 calc(12vmin + 0.5rem);
	 flex:0 0 calc(2 * var(--rsbwidth) + 0.5rem);
	 align-self:start;
   }
   #sundoredo {
	 order:5; 
	 width:calc(12vmin + 0.5rem);
	 width:calc(2 * var(--rsbwidth) + 0.5rem);
	 margin:calc(-1 * (6vmin + 0.7rem)) 0 0 0.5rem;
	 margin:calc(-1 * (var(--rsbwidth) + 0.7rem)) 0 0 0.5rem;
	 flex:0 0 calc(12vmin + 0.5rem);
	 flex:0 0 calc(2 * var(--rsbwidth) + 0.5rem);
	 align-self:start;
   }
   #s2solver {
	 order:4;
	 width:calc(60vmin - 1rem - 35%);
	 width:calc(var(--grid-width) - 1rem - 35%);
	 margin-left:0.5rem;
   }
   #s2solver input{
	 height:1.8rem;
   }	 
   #ssltn {
	 order:3;
	 width:26%;
	 height:1.8rem;
	 margin-left:0.5rem;
   }
   #bundo, #bredo {
	  height:6vmin;
	  height:var(--rsbwidth); 
   }
   #tools {
 	  -ms-grid-row:4;
	  -ms-grid-row-span:1;
	  -ms-grid-column:2;
	  -ms-grid-column-span:1;
     grid-area:4/1/5/2; 
     width:9vmin;	 
     width:var(--lsbwidth);	 
	 height:1.2em;
     margin:0 0.8em 0 0;
	 text-align:center;
   }
   .toolstxt {
	 padding:2px 0;  
   }
   #pctrl2 {
 	  -ms-grid-row:5;
	  -ms-grid-row-span:3;
	  -ms-grid-column:2;
	  -ms-grid-column-span:1;
     grid-area:5/1/8/2;
     margin:0 0.8em 0 0;
     width:auto;
	 justify-self:end;
   }	
   #pctrl2dtl {
     width:100%;
	 height:calc(60vmin - 1.2em);
	 height:calc(var(--grid-height) - 1.2em);
     flex-flow:column nowrap;
     justify-content:space-between;
	 align-items:center;
   }  
   #convp {
	 float:none;
   }
   #autoconv {
     float:none;
	 width:9vmin;
	 height:5vmin;
     width:var(--lsbwidth);	
     height:var(--lsbheight);	 
   } 
   #actxt {
     align-self:center;
   }
   #acbx {
   }
   #chgcolorbox {
	 position:relative;
	 top:0;
	 left:0;
	 width:9vmin;
     width:var(--lsbwidth);	 
   }
   #ccleft {
	 width:1em;
	 height:0.5em;
   }   
   #ccright {
	 width:1em;
	 height:0.5em;
   }
   .toolpic {
	 width:9vmin;
	 height:5vmin;
     width:var(--lsbwidth);	 
     height:var(--lsbheight);	 
   }   
   #chgcolor {
	 width:9vmin;
	 height:6.8vmin;
     width:var(--lsbwidth);	 
     height:calc(1.35 * var(--lsbheight));	 
	 padding:5%;
   }
   .cboxclr {
	 width:20%;
	 height:42%;
   }	 
   #cbox1 {
 	 align-self:flex-end;
   }	
   #cbox2 {
	 align-self:flex-start;
   }	
   #cbox3 {
	 align-self:flex-end;
   }	
   #cbox4 {
	 align-self:flex-start;
   }	
   #cbox5 {
	 align-self:flex-end;
   }
   #dcstp {
	 width:min(95%,calc(1.6 * var(--grid-width))); 	 
   }
}

@media (min-aspect-ratio:3833/3137) and (max-height:450px) and (min-width:729px) { 
    :root {
	  --adwidth:160px;	
	  --grid-width:75vmin;
	  --grid-width:min(min(82vmin,calc((97vw - var(--adwidth) - 160px - 2.1rem) / 1.4)),420px);
      --grid-height:75vmin;
      --grid-height:min(min(82vmin,calc(1.1 * var(--grid-width)),420px));
	}
    #itf {
	  font-size:15px;
     font-size:calc(16px + ((var(--grid-height) - 320px) / 24));
    }
}
@media (min-aspect-ratio:3833/3137) and (min-height:451px) and (max-height:600px) and (min-width:729px) {
    :root {
	  --adwidth:160px;
	  --grid-width:65vmin;
      --grid-height:65vmin;
	  --grid-width:min(min(72vmin,calc((97vw - var(--adwidth) - 160px - 2.1rem) / 1.4)),420px);
      --grid-height:min(min(72vmin,calc((97vw - var(--adwidth) - 160px - 2.1rem) / 1.4)),420px);
	}
    #itf {
	  font-size:16px;
     font-size:calc(16px + ((var(--grid-height) - 320px) / 24));
    }
}
@media (min-aspect-ratio:3833/3137) and (max-height:450px) and (min-width:729px),
       (min-aspect-ratio:3833/3137) and (min-height:451px) and (max-height:600px) and (min-width:729px) { 	
   .container {
       display:-ms-grid;
	   display:grid;
	   -ms-grid-columns:calc(100% - 170px) 170px;
	   -ms-grid-rows:auto auto auto auto auto auto auto;
	   grid-template-columns:calc(100% - var(--adwidth) - 10px) calc(var(--adwidth) + 10px);
	   grid-template-rows:repeat(7,auto);
	   align-items:start;
   }
   #hdr {
 	  -ms-grid-row:1;
 	  -ms-grid-row-span:1;
      -ms-grid-column:1;
	  -ms-grid-column-span:1;
     grid-area:1/1/2/2;
	 -ms-grid-columns:5rem 15% calc(85% - 5rem);
	 grid-template-columns:5rem 15% calc(85% - 5rem);
	 width:100%;
   }
   #navborder, #navcntwrap {
	  margin-left:1.5rem;
   }
   #levelnav {
 	   -ms-grid-row:1;
	   -ms-grid-row-span:1;
	   -ms-grid-column:3;
	   -ms-grid-column-span:1;
	   grid-area:1/3/2/4;
	   margin-right:1rem;
	   justify-self:end;
	   align-self:center;
	   margin-top:0;
   }
   #lyot {
 	  -ms-grid-row:2;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:1;
	 grid-area:2/1/3/2;
	 width:100%;
     display:-ms-grid;
	 display:grid;
	 -ms-grid-columns:5fr auto 1fr 150px;
	 -ms-grid-rows:auto auto auto auto;
	 grid-template-columns:1fr auto 1fr;
	 grid-template-rows:auto auto auto auto;
	 align-items:start;
	 margin-top:0;
   }
   .buffer2 {
 	  -ms-grid-row:4;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:4;
	  grid-area:4/1/5/4;
	  margin:0 10%;
   }
   .buffer2a {
 	  -ms-grid-row:2;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:4;
	  grid-area:2/1/3/4;
   }
   .buffer1 {
 	  -ms-grid-row:1;
	  -ms-grid-row-span:2;
	  -ms-grid-column:4;
	  -ms-grid-column-span:1;
	  grid-area:1/3/3/4; 
	  width:150px;
   }
   #itf {
 	  -ms-grid-row:1;
	  -ms-grid-row-span:1;
	  -ms-grid-column:2;
	  -ms-grid-column-span:1;
	  grid-area:1/2/2/3;  
   }
   #itfbm {
 	  -ms-grid-row:2;
	  -ms-grid-row-span:1;
	  -ms-grid-column:2;
	  -ms-grid-column-span:1;
	  grid-area:2/2/3/3;
   }
   #itfbm2 {
 	  -ms-grid-row:3;
	  -ms-grid-row-span:1;
	  -ms-grid-column:2;
	  -ms-grid-column-span:1;
	  grid-area:3/2/4/3;	   
   }
   #gmopt {
 	  -ms-grid-row:3;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:4;
	  grid-area:3/1/4/5; 
	  margin-left:2rem;
	  margin-right:1rem;
   }
   #gmopt2 {
 	  -ms-grid-row:4;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:4;
	  grid-area:4/1/5/5; 
	  margin-left:2rem;
	  margin-right:1rem;
   }
   #manualmain {
 	  -ms-grid-row:2;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:1;
	 grid-area:2/1/3/2;
   }
      #adps {
 	  -ms-grid-row:1;
	  -ms-grid-row-span:5;
	  -ms-grid-column:2;
	  -ms-grid-column-span:1;
	 grid-area:1/2/6/3;
	 margin:5px 0 0;
   }
   #adsp {
	 width:160px;
	 width:var(--adwidth);
	 margin:0 10px 0 0;	   
   }
   #desc {
 	  -ms-grid-row:5;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:1;
	 grid-area:5/1/6/2;
	 margin-left:2rem;
	 margin-right:1rem;
   }
   #dcstp {
	 width:72vmin;
	 width:min(85%,calc(1.6 * var(--grid-width))); 	 
   }
}

@media (min-aspect-ratio:3833/3137) and (min-height:601px) { 	
     :root {
	  --adwidth:160px;
	  --grid-width:60vmin;
      --grid-height:60vmin;
	  --grid-width:min(min(65vmin,calc((95vw - var(--adwidth) - 160px - 2.1rem) / 1.4)),var(--maxwidth));
      --grid-height:min(min(65vmin,calc((95vw - var(--adwidth) - 160px - 2.1rem) / 1.4)),var(--maxwidth));
	}
   .container {
       display:-ms-grid;
	   display:grid;
	   -ms-grid-columns:calc(100% - 170px) 170px;
	   -ms-grid-rows:auto auto auto auto auto auto auto;
	   grid-template-columns:auto auto;
	   grid-template-rows:repeat(7,auto);
	   justify-content:center;
   }
   #hdr {
 	  -ms-grid-row:1;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:2;
     grid-area:1/1/2/3;
	 -ms-grid-columns:16vw 1% calc(99% - 16vw);
	 -ms-grid-rows:auto 2rem;
     grid-template-columns:16vw 1% calc(99% - 16vw);
     grid-template-rows:auto minmax(1rem,auto);
	 align-items:start;
   }
   #lyot {
 	  -ms-grid-row:2;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:1;
	 grid-area:2/1/3/2;
     display:-ms-grid;
	 display:grid;
	 -ms-grid-columns:3fr auto 1fr 150px;
	 -ms-grid-rows:auto auto auto auto;
	 grid-template-columns:3fr auto 2fr;
	 grid-template-rows:auto auto auto auto;
	 align-items:start;
	 margin-top:0;
   }
   .buffer2 {
  	  -ms-grid-row:4;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:4;
	  grid-area:4/1/5/4;
	  width:80%;
	  max-width:800px;
	  justify-self:center;
   }
   .buffer2a {
  	  -ms-grid-row:2;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:4;
	  grid-area:2/1/3/4;
	  width:80%;
	  max-width:800px;
	  justify-self:center;
   }
   #bmsg {
	  padding:1.5rem 8% 0 8%; 
	  text-align:left;
   }
   .buffer1 {
 	  -ms-grid-row:1;
	  -ms-grid-row-span:2;
	  -ms-grid-column:4;
	  -ms-grid-column-span:1;
	  grid-area:1/3/3/4; 
	  width:150px;
	  height:10px;
   }
   #itf {
 	  -ms-grid-row:1;
	  -ms-grid-row-span:1;
	  -ms-grid-column:2;
	  -ms-grid-column-span:1;
	  grid-area:1/2/2/3;  
	  font-size:19px;
     font-size:calc(16px + ((var(--grid-height) - 320px) / 24));
   }
   #itfbm {
 	  -ms-grid-row:2;
	  -ms-grid-row-span:1;
	  -ms-grid-column:2;
	  -ms-grid-column-span:1;
	  grid-area:2/2/3/3;
   }
   #itfbm2 {
 	  -ms-grid-row:3;
	  -ms-grid-row-span:1;
	  -ms-grid-column:2;
	  -ms-grid-column-span:1;
	  grid-area:3/2/4/3;
   }
   #gmopt {
 	  -ms-grid-row:3;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:4;
	  grid-area:3/1/4/5; 
	  margin-left:5%;
	  margin-right:5%;
   }
   #gmopt2 {
 	  -ms-grid-row:4;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:4;
	  grid-area:4/1/5/5; 
	  margin-left:5%;
	  margin-right:5%;
   }
   #adps {
 	  -ms-grid-row:2;
	  -ms-grid-row-span:1;
	  -ms-grid-column:2;
	  -ms-grid-column-span:1;
	 grid-area:2/2/3/3;
	 width:170px;
	 width:calc(var(--adwidth) + 1.5vw);
	 margin:5px 0 0 0;
   }
   #adsp {
	  width:160px;
      margin:0 auto;	  
   }
  #desc {
 	  -ms-grid-row:3;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
 	  -ms-grid-column-span:1;
	 grid-area:3/1/4/2;
	 margin-left:5%;
	 margin-right:5%;
  }
   .dlogo {
 	  -ms-grid-row:1;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:1;
	  grid-area:1/1/2/2;
	  margin:0.05rem 0 0 0.15rem;
	  width:16vw;
	  height:calc(0.24 * 16vw);
	  max-width:8rem;
	  max-height:calc(0.24 * 8rem);
   }
   #navborder {
      display:none;
   }
   #nvb {
 	  -ms-grid-row:1;
	  -ms-grid-row-span:1;
	  -ms-grid-column:3;
	  -ms-grid-column-span:1;
	 grid-area:1/3/2/4;
   } 
   #navcntwrap {
	 margin-top:0;
    } 
   #navcontent {
     position:relative;
	 height:auto;
	 overflow:visible;	
	 box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
   }
   #navdetail {
	 display:flex;
     flex-flow:row nowrap;
   }
   .mainnav {
     display:inline-block;
	 width:auto;
	 height:1.8rem;
	 line-height:1.8rem;
	 padding:0;
	 text-align:center;
     border-top: 1px solid #cccccc;
     border-right: 1px solid #cccccc;
     border-bottom: 1px solid #cccccc;
     border-left:none;
	 flex:1 0 auto;
   }
   #navdetail a:nth-of-type(1) {
	  border-top: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
   }
   #levelnav {
 	  -ms-grid-row:2;
	  -ms-grid-row-span:1;
	  -ms-grid-column:3;
	  -ms-grid-column-span:1;
	 grid-area:2/3/3/4;  
	 margin:0.5rem 200px 0 0;
	 justify-self:end;
   }
   #exep {
 	  -ms-grid-row:2;
	  -ms-grid-row-span:1;
	  -ms-grid-column:3;
	  -ms-grid-column-span:1;
     grid-area:2/3/3/4;  
	 margin-top:0.5rem;
	 margin-right:200px;
	 justify-self:end;
   }
   #dcstp {
	 width:65vmin;
	 width:min(68%,calc(1.6 * var(--grid-width))); 	 
   }
   #manualmain {
 	  -ms-grid-row:2;
	  -ms-grid-row-span:1;
	  -ms-grid-column:1;
	  -ms-grid-column-span:1;
	 grid-area:2/1/3/2;
	 width:calc(96vw - var(--adwidth));
	 max-width:calc((1.4 * var(--maxwidth)) + 415px);
   }
   .mintro {
	 width:calc(88vw - var(--adwidth));
	 max-width:calc((1.4 * var(--maxwidth)) + 300px);
	 margin-left:auto;
	 margin-right:auto;
   }
}
@media (min-aspect-ratio:3833/3137) and (min-height:601px) and (min-width:1030px){
   .buffer2, .buffer2a {
  	  -ms-grid-row:1;
	  -ms-grid-row-span:2;
	  -ms-grid-column:1;
	  -ms-grid-column-span:1;
	  grid-area:1/1/3/2;
	  width:100%;
	  max-width:175px;
	  display:flex;
	  flex-flow:column wrap;
   }
   #h2use {
	  display:block;
	  width:5.5rem;
      margin:3rem auto 0;
	  padding-right:0.9rem;
   }
   .notetxt {
	  margin:0 auto;
	  padding:1rem 1.5rem 0 1rem;
	  text-align:left;
   }	
   #h2use2 {
	  display:block;
	  width:5.5rem;
      margin:1.5rem auto 0;
	  padding-right:0.9rem;
	  order:1;
   }
   .notetxt2 {
	  margin:0 auto;
	  padding:1rem 1.5rem 0 1rem;
	  order:2;
	  width:100%;
	  text-align:left;
   }	
}
@media (min-aspect-ratio:3833/3137) and (min-height:601px) and (max-resolution:150dpi) { 	
     :root {
	  --maxwidth:360px;
	}
}