html,body{margin:0;padding:0;background:#008080;color:#000;}
body{
  font-family:"MS Sans Serif","Tahoma",Verdana,Geneva,sans-serif;
  font-size:12px;
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 2px,transparent 2px 4px);
}
.page{width:860px;margin:14px auto 30px auto;}
.win{background:#c0c0c0;border:2px outset #fff;padding:0;margin-bottom:10px;}
.titlebar{
  background:#000080;color:#fff;font-weight:bold;padding:3px 5px;
  font-family:"MS Sans Serif",Tahoma,sans-serif;font-size:12px;
  display:flex;justify-content:space-between;
}
.titlebar .btns{letter-spacing:1px;}
.win .body{padding:8px;}
.win .body.intro{text-align:center;}
h1{
  font-family:"Times New Roman",Times,serif;
  font-size:30px;margin:2px 0 0 0;color:#000080;
  text-shadow:2px 2px 0 #808080;letter-spacing:1px;
}
h1 .sub{font-size:13px;color:#800000;letter-spacing:0;text-shadow:none;}
h2{font-family:"Times New Roman",serif;font-size:15px;margin:0 0 6px 0;color:#800000;}
hr{border:0;border-top:1px solid #808080;border-bottom:1px solid #fff;margin:6px 0;}
a{color:#0000ee;}
p{margin:0;}
.blink{animation:bl 1s steps(1,end) infinite;color:#ff0000;font-weight:bold;}
@keyframes bl{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){.blink{animation:none}}

/* 3D viewport */
#screen{background:#000;border:2px inset #fff;padding:2px;}
#gl{display:block;width:100%;height:520px;background:#6c9bd2;
    image-rendering:pixelated;image-rendering:-moz-crisp-edges;cursor:crosshair;}
#overlay{
  font-family:"Courier New",monospace;font-size:11px;color:#00ff66;
  background:#000;padding:2px 4px;border-top:1px solid #333;
}
#err{display:none;color:#800000;font-weight:bold;margin-top:6px;}
.viewport-help{margin-top:6px;}

/* panels and controls */
table.grid{border-collapse:collapse;width:100%;}
table.grid td,table.grid th{
  border:1px solid #808080;padding:2px 4px;font-size:11px;vertical-align:top;
}
table.grid th{background:#000080;color:#fff;text-align:left;}
.k{font-family:"Courier New",monospace;background:#e8e8e8;border:1px solid #808080;
   padding:0 3px;font-weight:bold;}
.mono{font-family:"Courier New",monospace;}
.note{font-size:11px;}
button{
  font-family:"MS Sans Serif",Tahoma,sans-serif;font-size:12px;
  background:#c0c0c0;border:2px outset #fff;padding:3px 8px;cursor:pointer;
}
button:active{border-style:inset;}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px dotted #000;outline-offset:1px;}
input[type=text],input[type=number],select{
  font-family:"Courier New",monospace;font-size:12px;
  border:2px inset #fff;background:#fff;padding:1px 3px;
}
input[type=range]{width:110px;}
.generate-row{margin-bottom:6px;}
#gen{font-weight:bold;}
#gridVal{color:#000080;}
.cols{display:flex;gap:10px;align-items:flex-start;}
.cols > div{flex:1;}
button.preset{font-size:10px;padding:1px 5px;margin:3px 2px 0 0;}

/* level palette */
.ramp{display:flex;border:2px inset #fff;height:28px;background:#000;}
.ramp div{flex:1 1 0;min-width:2px;}
#rampInfo{margin-top:6px;}
.ramp-help{margin-top:4px;}

/* footer */
.foot{margin:1em 0;text-align:center;color:#dfffff;font-size:11px;}
.counter{font-family:"Courier New",monospace;background:#000;color:#0f0;
         border:1px solid #fff;padding:1px 4px;letter-spacing:2px;}
ul.tight{margin:4px 0 4px 18px;padding:0;}