*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}
:root {
  /* --bitplaneViewerTransition: 3s cubic-bezier( 0.33, 0, 0.31, 1 ) 0s;
  --bitplaneViewerTransition2: 2s cubic-bezier( 0.33, 0, 0.31, 1 ) 3s; */
  --bitplaneViewerTransition: 3s cubic-bezier( 0.31, 0, 0, 1 );
  --bitplaneViewerTransition2: 3s cubic-bezier( 0.99, 0, 0.34, 1 );
  --bp0bg: 0;
  --bp0fg: 255;
  --textColor: rgba(248, 248, 248, 1);
  --textColorTransparent: rgba(248, 248, 248, 0);

  /* more accurate... */
  /* --superPurple: rgb(123,91,174);
  --superBlue: rgb(194,189,235);
  --superLightGray: rgb(200,200,200);
  --superGray: rgb(165,165,165);
  --superDarkGray: rgb(86,86,86); */


  /* --superPurple: rgb(33, 24, 46); */
  --superPurple: rgb(36, 27, 51);
  --superBlue: rgb(194,189,235);
  --superLightGray: rgb(200,200,200);
  --superGray: rgb(125, 125, 125);
  --superDarkGray: rgb(21, 21, 21);

  --navbarHeight: 2em;
  --panelHeaderHeight: 2em;
  --panelBorderWidth: 2px;
  /* if we were retaining borders when maximized: */
  /* --maximizedPanelContent: calc(calc(calc(calc(100vh - var(--panelHeaderHeight)) - var(--navbarHeight)) - var(--panelBorderWidth)) - var(--panelBorderWidth)); */
  /* but since we're not (currently): */
  --maximizedPanelContent: calc(calc(100vh - var(--panelHeaderHeight)) - var(--navbarHeight)); 
}

body{

  /* background: rgb(35, 35, 35); */
  background: var(--superDarkGray);
  /*background: linear-gradient(#aaaa11, #aa11aa); */

  /* background: linear-gradient(yellow, magenta); */
  /* color: rgb(59, 172, 98); */
  color: var(--superBlue);
  font-family: monospace;
  overflow: hidden;
  position: relative;
}

h3{
  margin:1ch;

  font-size: 1.2em;;
}

h4{
  margin:0.5ch;
  /* font-size: 1.2em;; */
}


a{text-align: center;}
g{overflow: visible}
input{
  cursor:pointer;

}
button{
  /* margin: 1ch;
  padding: 3px; */
  /*
  background-color: rgb(50,50,50); */

  background-color: var(--superDarkGray);

  color: var(--superBlue);
  border:none;
  border-radius: 5px;
  cursor:pointer;
}

#main{
  position:absolute;
    display: flex;
    flex-grow: 1;
    justify-items: stretch;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    /* perspective is useful if we're moving around stuff (workspaces) in 3D */
    perspective: 50px;
}
#animationBottom{
  position: relative;
  width: 100vw;
  height:100vh;
}
#animationTop{
  pointer-events: none;
  position: relative;
  width: 100vw;
  height:100vh;
  perspective: 100vw;
  perspective-origin:50% 200%;
  z-index: 100;
}

/* should only be one navbar in this app? */
#navbar{
    height: var(--navbarHeight);
    width: 100%;
    background-color: black;
    display: flex;
    flex-shrink: 0;
    overflow: hidden;
    z-index: 200; /* arbitrary... */
}

.workspace{
  position: absolute;
  padding-top: var(--navbarHeight);
  width: 0;
  height: 0;
  font-size: 1em;
  /* display: grid;
  grid-template-columns: repeat(32, 1fr);
  grid-template-rows: repeat(28, 1fr);
  grid-auto-flow: row; */

  overflow: visible;

    /* position: absolute;
    
    transform-origin: center center; */
}
/* if we want to "hide" a workspace, could do something like this: */
.workspace_sent_to_background{
  transform: translateZ(-30px);
  filter: brightness(0.5) opacity(0.5);
}

.panelgrid{
  /* old settings*/
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(32, 1fr);
    grid-template-rows: repeat(28, 1fr);
    grid-auto-flow: row;
    /* overflow: hidden; */

      /* position: absolute;
      overflow: visible;
      left: 50%;
      top: 50%; */
    /* margin-left:-50%;
    margin-top:-50%; */

}


.checker{
    background-color: rgb(66, 12, 12);
    z-index: -7;
}

/* grid version... */
/* .panel_outer{
    display: flex;
    grid-row-start: 1;
    grid-row-end: 14;
    background: none;
    border-radius: 7px;
    overflow: hidden;
    overflow-x: visible;
    overflow: visible;
    justify-content: center;

} */
/* draggable version... */
.panel_outer{
    --edge: 10px;
    position: absolute;
    display: grid;
    /* grid-template-columns: 0.5em auto 0.5em;
    grid-template-rows: 0.5em auto 0.5em; */
    grid-template-columns: var(--edge) auto var(--edge);
    grid-template-rows: var(--edge) auto var(--edge);
    background: none;
    /* border: 1px solid blue; */
    border-radius: 7px;
    overflow: hidden;
    overflow-x: visible;
    overflow: visible;
    justify-content: center;
    /* overflow-y: scroll; */
    /* max-height: 20em; */
}

.panel_edge{
  /* background-color: rgba(255,0,0,0.5); */
}

/* Global classes used by all panels */

.panel_inner{

    /* background-color: rgba(7, 7, 80, 0.5); */
    border: var(--panelBorderWidth) solid var(--superDarkGray);
    /* background-color:rgb(17, 11, 15); */
    background-color: var(--superPurple);
    border-radius: 8px;
    justify-self: center;
    overflow: hidden;
    grid-column: 1 / -1;
    grid-row: 1 / -1;

    /* display: grid;
    align-items: stretch;
    grid-template-rows: 3em 1.5em 1fr;
    grid-template-rows: 3em 1fr; */

    /* grid-template-columns: 2fr 16fr 0fr;
    transition:  var(--bitplaneViewerTransition); */
    /* box-shadow: 1em 1em black; */
    transition: grid-template-rows 2s ease;
    /* height: minmax(max-content, 20em); */
    /* max-height: 800px; */
    height: max-content;

    display: grid;
    grid-template-columns: 1fr;
    /* rows might be different for some panel types */
    grid-template-rows: var(--panelHeaderHeight)px 1fr;
}
.panel_inner_maximized{  
  border: 0px solid var(--superDarkGray);
  border-radius: 0px;
}
/* when we look "under the hood" to see the underlysing data, settings, and function definitions
(if we ever implement that... */
.panel_inner_lifted_hood{
  transition: 3s;
  transform: rotateX(90deg);
  transform-origin: center top 0px;
}
/* .panel_inner::after{
  background-color: yellow;
  margin-left: 20px;
  width: 500px;
  height: 300px;
  display: block;
} */


.collapser{
  cursor:pointer;
  text-align: center;
}
.collapser_collapsed{
  transform: rotateX(180deg);
  transition: transform 1s ease 0s;;
}

.panel_menu{
  /* display: grid; */
  grid-row: 2;
  grid-column: 1;
  z-index: 1;
  /* background-color: rgba(12, 12, 59, 0.8); */

  background-color: var(--superGray);
  display: flex;
  /* margin and padding cause weird overflow issues...? */
  /* margin-top: 2em;
  margin-bottom: 2em; */
  overflow-y: auto;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;


  /* initial, unopened */
  z-index: -1;
  opacity: 0;
  height: 0;
  pointer-events: none;
}

.panel_menu_opened{
  z-index: 10;
  opacity: 1;
  height: max-content;
  pointer-events: all;
}

.panel_menu_button{
  cursor:pointer;
  text-align: center;

}
.panel_menu_button_opened{
  /* border-left: 2px solid white;
  border-top: 2px solid white; */
  z-index: 10;
  border-radius: 6px 6px 0px 0px;
  /* background-color: rgba(12, 12, 59, 0.8);
   */
  background-color: var(--superGray);
}

.panel_header{
    /* height: 2em; */
    height: var(--panelHeaderHeight);
    /* background-color: rgb(5, 20, 5); */
    display: grid;
    grid-template-columns: auto 2ch 1ch;
    /* flex-direction: row; */
    /* justify-content: space-between; */
    align-items: center;
    grid-area: 1 / 1 / 2 / -1;
    overflow: hidden;
    cursor: move;
    /* transition:  var(--bitplaneViewerTransition); */
}
.panel_header > div{

  height: 100%;
  align-content: center;
}

.panel_content{

  display: grid;
  /* grid-template-columns: 2fr repeat(16, 1fr);
  grid-area: 2 / 1 / 3 / -1; */
  grid-column: 1 / -1;
  grid-row: 2 / 3;
  /* allows scrolling */
  /* overflow-y: auto;  */
  overflow-y: hidden;
  overflow-x: hidden;
}
/* for when the menu is open */
.panel_content_disabled{
  /* pointer-events: none; */
  filter:blur(1px);
}
.panel_header_title{

  margin:0.5ch;
  /* margin-right: 2ch; */
  font-size: 0.9em;;
  font-family:Arial, Helvetica, sans-serif;
  /* note: using nowrap and overflow:hidden so the title doesn't
    wrap and increase the height of the header,
    which causes issues with maximizing panels. */
  text-wrap-mode: nowrap;
  overflow: hidden;
}


/* panel type -specific classes */


.bitplane_header{
    /* height: 2em; */
    /* background-color: rgb(20, 40, 20); */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    grid-area: 1 / 1 / 2 / -1;
    transition:  var(--bitplaneViewerTransition);
}

.panel_inner_bitplane{
  /* grid-template-columns: 2fr 16fr 0fr; */
}



.panel_inner_tileset{

  /* grid-template-rows: 3em 1fr; */
  grid-template-columns: 1fr;
  /* overflow: hidden; */
}

.tileset_content{
  display: flex;
  /* display: grid;
  place-content: stretch; */
  display: grid;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  overflow-y: scroll;
  /* align-content: stretch; */
  scroll-snap-type: both proximity;
}
.levelMap_content{
  display: grid;
  /* display: grid;
  place-content: stretch; */
  grid-auto-flow: column;
  grid-template-rows: repeat(16, 8ch);
  flex-wrap: wrap;
  height: 100%;;
  overflow-x: auto;
  overflow-y: auto;
  /* align-content: stretch; */
  scroll-snap-type: both proximity;
}
/* for wrapper of <canvas> element */
.tile_wrapper{
  flex-grow: 1;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  /* width: 6.25%; 
  width: 25%; */
}
/* for actual <canvas> element */
.tile_item{
  /* max-width: 100%;
  min-height: 100%; */
  aspect-ratio: 1 / 1;
  image-rendering: pixelated;
  border: 1px solid rgba(255,0,0,0.25);
}

.tile_item_selected{
  border: 2px solid rgba(0, 0, 255, 0.75);
}

.metatile_wrapper{

  flex-grow: 1;
  aspect-ratio: 1 / 1;
  /* width: 10ch; */
  /* height: 10ch;  */
  /* display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  place-items: stretch;
  grid-gap: 0; */
  aspect-ratio: 1 / 1;
  image-rendering: pixelated;
  border: 1px solid rgba(0,255,0,0.5);

}
.metatile_wrapper_viewer{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  place-items: stretch;
  grid-auto-flow: row;
  grid-gap: 0;
}
.metatile_subtile_overlay{
  border: 1px solid rgba(127,127,127,0.5);
}
.level_metatile_wrapper{
  flex-grow: 1;
  aspect-ratio: 1 / 1;
  width: 8ch;
  height: 8ch;
  aspect-ratio: 1 / 1;
  image-rendering: pixelated;
  border: 1px solid rgba(0,255,0,0.5);
}

.panel_inner_palette{
  /* grid-template-rows: 3em 1fr; */
  grid-template-columns: 1fr;

}
.palette_content{
  /* display: flex; */
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  /* width: 20em; */
  /* overflow-y: scroll; */
  align-content: stretch;
  place-content: stretch;
  scroll-snap-type: both proximity;
}
.color_item{
  flex-grow: 1;
  /* aspect-ratio: 1 / 1; */
  /* width: 5ch; */
  background-color: rgba(0,0,0,0);

  box-sizing: border-box;
  /* width: 2ch; */
}
/* when we select this palette */
.color_item_selected{
  box-sizing: border-box;
  border-top: dashed 3px rgba(255, 255, 0, 0.75);
  border-bottom: dashed 3px rgba(255, 255, 0, 0.75);
}

.color_label{
  text-shadow: 1px 1px 0px black, -1px -1px 0px black;
  color: rgba(255, 255, 255, 0.75);;
  pointer-events: none;
}


.fileButton{}
.byteWidthButton{}

.seekButtons{
  background-color: rgba(0,0,0,0.5);
}
.seekTileUpButton{}
.seekTileDownButton{}



.hex_header{
  
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 100%;  
  grid-column: 2 / -2;
  font-weight: 900;
  overflow: hidden;
}

.hex_header_bitplane{
  
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 1fr;  
  grid-column: 1 / -1;
  font-weight: 900;
  overflow: hidden;
}

.hex_header > div{
  text-align: center;
}

/* labels across the top header:  */
.hex_header_offset{
  display: grid;
  place-items: stretch;
  grid-row: 1 / 2;

}

.hex_content{

    /* background-color: rgba(23, 23, 23, 1); */
    display: grid;
    /* position: relative; */
    /* grid-area: 3 / 1 / 4 / 5;

    grid-auto-flow: row;
    grid-template-columns: 18fr 0fr; */
    grid-column: 1 / -1;
    /* grid-row: 3 / 4; */
    grid-template-columns: subgrid;
    /* grid-template-rows: 100%; /*HACK: assumes viewing only 32 bytes */
    /* grid-template-rows: 1fr; */
    /* grid-template-columns: subgrid; */
    scrollbar-gutter: stable;

    /* transition: var(--bitplaneViewerTransition); */

    /* scroll-snap-type: mandatory; */
    scroll-snap-points-y: repeat(100%);
    scroll-snap-type: both proximity;

    overflow-y: auto;
    overflow-x: hidden;

    /* transition: grid-template-rows 1s ease; */
}
.hex_content_bitplane{
  grid-column: 1 / -1;
  grid-template-rows: 100%; /*HACK: assumes viewing only 32 bytes */
  font-size: 0.8em;
  scrollbar-gutter: unset;
}

.byte_group{
  /* position:absolute; */
  /* width: 100%; */
  display:grid;  
  
  grid-auto-flow: row;
  grid-auto-rows: 1fr;

  grid-template-columns: subgrid; 
  /* grid-column: 1 / -1; */
  grid-column: 2 / -2;

}
.right_group{
  grid-column: -1;
}
.right_group > div{
  width:100%;
}
.byte_container{
  align-content: center;
}
.byte_container > div{
  place-items: center;
}

.g32_plain{
  display:grid;
  grid-template-columns: 2fr repeat(16, 1fr) 0fr 0fr;
  grid-template-rows: 2em 2em;
  height: 4em;
}

.g32l{
    scroll-snap-align: start;
    display: grid;
    grid-column: 1 / 2;
    grid-row: 1;
    grid-template-columns: subgrid;
    grid-auto-flow: row;
    align-items: start;
    justify-items: center;
  min-width:fit-content;
    /* position: relative; */
}

.g32r{
    scroll-snap-align: start;
    display: grid;
    grid-column: 2 / 3;
    grid-row: 1;
    grid-template-columns: subgrid; 
    grid-auto-flow: row; 
    align-items: start;
    justify-items: center;
  min-width:fit-content;
    /* position: relative; */
}
.g32_item{
  /* position:absolute;
  transform-origin: center;
  transform: translate(-50%,-50%); */
}
.g32l_offset_sometimes{}
.g32l_offset_sometimes_b16{opacity:0;}
.g32l_offset_sometimes_b1{opacity:1;}

.g32b{
    scroll-snap-align: start;
    display: grid;
    grid-column: 3 / 4;
    grid-row: 1;
    grid-template-columns: subgrid;
    grid-auto-flow: row;
    align-items: start;
    justify-items: center;
    overflow: hidden;
    /* position: relative; */
}

.g32bg{
  display: grid;
  grid-column: 1 / 4;
  grid-row: 1;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(32, 1fr);
  grid-auto-flow: row;
}
.g32bg_row{
  width: 100%;
  height:100%;
}
.g32bg_b16{
  opacity:0;
}
.g32bg_b1{
  opacity:1;
}

/* .g32b{
  display: grid;
  grid-column: 3 / 4;
  grid-template-rows: repeat(32, 1fr);
  grid-template-columns: 1fr;
  grid-template-columns: subgrid;
  overflow: hidden;
  min-height: 0;
  align-items: center;
} */

.g32s{
    grid-column: -1;
    grid-template-columns: subgrid;
    overflow: hidden;
    /* overflow: visible; */
    /* keep this; somehow prevents weird unnecessary scrollbar: */
    /* content-visibility: auto;  */
    /* margin-left: -1ch; */
}
.g32s_b16{
  opacity:0;
}
.g32s_b1{
  opacity:1;
}




.bpsvg{
  height:100%;
  /* width: 100%; */
  overflow: visible;
  /* width: 0; */
}



.byteHex{
  direction: ltr;
  align-items: center;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.25);
  width: 100%;
  height: 100%;
  /* transition: var(--bitplaneViewerTransition2); */
}



.hex_header_labels_left{
  display: grid;
  /* place-items: stretch; */
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: 1fr;
  /* place-self: stretch; */
  opacity: 1;
  /* transition: var(--bitplaneViewerTransition2) */
}


.hex_header_labels_right{
  display: grid;
  /* place-items: stretch; */
  grid-row: 1 / 2;
  grid-column: 3 / 4;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  /* place-self: stretch; */
  min-width: 0;
  overflow: hidden;

}
/* .hex_header_labels_right_b16{

  width: 0%;
  opacity: 0;
}
.hex_header_labels_right_b1{

  width: 100%;
  opacity: 1;
} */
/*
.hex_base_labels{
  display: grid;
  place-items: stretch;
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  grid-template-columns:2fr 4fr;
  place-self: stretch;

  opacity: 0;

}
.hex_header_base_label_b16{

  width: 0%;
  opacity: 0;
}
.hex_header_base_label_b1{

  width: 100%;
  opacity: 1;
}
*/
/*

.byteBin{
  direction: ltr;
  opacity: 0;
  align-items: center;
  text-align: right;
  width: 0%;
  overflow: hidden;
}
.byteBin_b16{
  width: 0%;
  opacity: 0;
}
.byteBin_b1{
  width: 100%;
  opacity: 1;
}

*/

/*

classes for bitplane animation
(in order of expanding from 16-wide to 1-wide)

*/

/* 0 */
.g32{
  display: grid;
  grid-column: 1 / -1;
  grid-template-rows: 1fr;

}
.g32_b16{
  grid-template-columns: subgrid;
  /* height: 4em; */
}
.g32_b1{
  grid-template-columns: subgrid;
  height: 100%;
}


/* 1 */
.hex_header_offset_label{
  /* width:0; */
  overflow: hidden;
}
.hex_header_offset_label_b16{
  opacity: 1;
}
.hex_header_offset_label_b1{
  opacity: 0;
}


/* 2 */
.g32r_b16{
  grid-column: 2 / -1;
}
.g32r_b1{
  grid-column: 2 / 3;
}

/* 3 */
.byteOffsetPrefix{
  direction: rtl; /* doing weird stuff so it overflows to the left */
  color: white;
  opacity: 0;
  width: 0;
  /* transition: var(--bitplaneViewerTransition2); */
}
.byteOffsetPrefix_b16{
  opacity: 0;
}
.byteOffsetPrefix_b1{
  opacity: 1;
}


/* 4    and   6  */
/* panel_content goes here */
.panel_content_b16{
  grid-template-rows: 1.5em 1fr; /* this attr is the only one custom to bitplane viewer */
  grid-template-columns: 7ch 16fr 0fr 0fr;
}
.panel_content_intermediate{
  grid-template-rows: 3em 1.5em 1fr; /* this attr is the only one custom to bitplane viewer */
  grid-template-columns: 3fr 1fr 3fr 0fr;
}
.panel_content_b1{
  grid-template-rows: 2em 1fr; /* this attr is the only one custom to bitplane viewer */
  grid-template-columns: 8ch 4ch 11ch 1fr;
}
/* also 4 */
.hex_header_base_label_b16{
  /* width: 0%; */
  opacity: 0;
}
.hex_header_base_label_b1{
  /* width: 100%; */
  opacity: 1;
}
/* also 4 */
.byteBin{
  /* direction: ltr;
  opacity: 0;
  align-items: center;
  text-align: right;
  width: 0%;
  overflow: hidden; */
  min-width: 0;
  min-height: 0;
}
.byteBin_b16{
  opacity: 0;
  width: 0%;
  /* width: 0;
  height: 0;
  overflow: hidden; */
}
.byteBin_b1{
  width: 100%;
  opacity: 1;
}

/* 5 */

.byte_b16{

}
.byte_b1{

}
.byte_by16RowEven{
  background-color: rgba(86, 86, 86, 0.35);
}
.byte_by16RowOdd{
  background-color: rgba(0,0,0,0.35);
}
/* here we would have all 64 .byte_valueXX classes...? */
.fg_bp0{
  --bg: 0;
  --fg: 255;
  /* background-color: rgb(  var(--bg), var(--bg), var(--bg)  ); */
  color: rgb(  var(--fg), var(--fg), var(--fg) );
}
.fg_bp1{
  --bg: 85;
  --fg: 255;
  /* background-color: rgb(  var(--bg), var(--bg), var(--bg)  ); */
  color: rgb(  var(--fg), var(--fg), var(--fg) );
}
.fg_bp2{
  --bg: 170;
  --fg: 0;
  /* background-color: rgb(  var(--bg), var(--bg), var(--bg)  ); */
  color: rgb(  var(--fg), var(--fg), var(--fg) );
}
.fg_bp3{
  --bg: 255;
  --fg: 0;
  /* background-color: rgb(  var(--bg), var(--bg), var(--bg)  ); */
  color: rgb(  var(--fg), var(--fg), var(--fg) );
}
.bg_bp0{
  --bg: 0;
  --fg: 255;
  background-color: rgb(  var(--bg), var(--bg), var(--bg)  );
  color: rgb(  var(--fg), var(--fg), var(--fg) );
}
.bg_bp1{
  --bg: 85;
  --fg: 255;
  background-color: rgb(  var(--bg), var(--bg), var(--bg)  );
  color: rgb(  var(--fg), var(--fg), var(--fg) );
}
.bg_bp2{
  --bg: 170;
  --fg: 0;
  background-color: rgb(  var(--bg), var(--bg), var(--bg)  );
  color: rgb(  var(--fg), var(--fg), var(--fg) );
}
.bg_bp3{
  --bg: 255;
  --fg: 0;
  background-color: rgb(  var(--bg), var(--bg), var(--bg)  );
  color: rgb(  var(--fg), var(--fg), var(--fg) );
}


/*
end of animation classes
 */




.panel_inner_text{
  /* grid-template-rows: 3em 1fr; */
  grid-template-columns: 1fr;
  max-height: 100px;
}
.text_content{
  width: 100%;
  height: 100%;
  /* max-height: 15em; */
  /* height: 20em;  */
  /* font-size: 0.8em; */
  overflow-y:auto;
  overflow-x:hidden;
  font-family:Arial, Helvetica, sans-serif;
  line-height: 1.5em;
  padding: 1ch;

}
p{
  text-indent: 4ch;
  text-indent: 1em;
}
ul{
  margin-left: 3ch;
}
ol{
  margin-left: 3ch;
}



.byte{
  grid-column: span 9;
  place-content: center;
  place-items: center;
  text-align: center;
}

/* NEW simplified hex viewer classes */
.hex_panel_content{
  grid-template-rows: 1.5em 1fr;
  grid-template-columns: 2fr repeat(16, 1fr) 0fr;
  /* scrollbar-gutter: stable; */
}
.hex_panel_content_32wide{
  grid-template-columns: 2fr repeat(16, 1fr) 0fr repeat(16, 1fr) 0fr;
}
.hex_header_new{
  display: grid;
  grid-template-columns: subgrid;
  /* grid-template-rows: subgrid;   */
  grid-column: 1 / -1;
  font-weight: 900;

}
.hex_new_top_labels{
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-template-rows: 100%;
  grid-column: 2 / -2;
  overflow: hidden;
  user-select: none;

}
.hex_g4096{
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  height: max-content;
}
.hex_g256{
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  height: 512em;
  /* This doesn't work very well, makes columns weird */
  /* content-visibility: auto; */

  height: max-content;
}
.hex_g32{
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;

  height: max-content;
}
.hex_g32l{
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 1;
}
.hex_g32lr{
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -2;
}

.hex_g32r{
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 2 / -2;
}
.hex_cell{
  /* place-self: center;   */
  /* height: 2em; */
  align-content: center;
  text-align: center;

}
.hex_byte{
  /* place-self: center;
  height: 2em;
  align-content: center; */
}
.new_offset{
  min-width: 0;
  user-select: none;
}
.new_offet_middle{
  width: 100%;
  overflow: hidden;
}


.decomp_animation_details{
  display: grid;
  grid-template-rows: 1fr;
  position: absolute;
  place-items:center;
  place-content: center;
  border-radius: 2ch;
  transform-origin: right;
  right: 100%;
  z-index: 100;
  white-space: nowrap;
  /* border: 2px solid white; */
}

.decomp_animation_details_item{
  /* min-width: 0;
  min-height: 0; */
  overflow: hidden;
  height: 100%;
  width: 100%;
  text-align: center;
  align-content: center;
  /* box-sizing: border-box; */
  /* font-family: Arial, serif; */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /* justify-content: stretch; */
}
.notBubble{
  /* padding-left:1ch;
  padding-right:1ch; */
  text-align: center;
  height: 100%;
  align-content: center;
}
.bubbleCell{
  border-radius: 2ch;
  border: 2px solid;
  /* padding-left:1ch;
  padding-right:1ch; */
  text-align: center;
  height: 100%;
  align-content: center;
  box-sizing: border-box;
}
.bubbleCellOne{
  border-radius: 2ch;
  border: 2px solid;
  width: 100%;
  height: 100%;
  text-align: center;
  align-content: center;
  box-sizing: border-box;
}
@keyframes bulge{
  0%{
    font-size: 100%;
  }
  25%{
    font-size: 240%;
  }
  66%{
    font-size: 90%;

  }
  100%{
    font-size:100%;
  }
}