@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/FiraCode-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: bold;
  src: url("fonts/FiraCode-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Helvetica Neue";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/HelveticaNeue-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Helvetica Neue";
  font-style: normal;
  font-weight: bold;
  src: url("fonts/HelveticaNeue-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Source Code Pro";
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  src: url("fonts/SourceCodePro-Regular.otf.woff2") format("woff2");
}

@font-face {
  font-family: "Source Code Pro";
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  src: url("fonts/SourceCodePro-Bold.otf.woff2") format("woff2");
}

@font-face {
  font-family: "Source Code Pro";
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  src: url("fonts/SourceCodePro-Black.otf.woff2") format("woff2");
}

:root {
  --light-page-color: #fdf6e3;
  --light-text-color: #586e75;
  --top_bar_icon_fill: #c7b480;
  --top-bar-text: #a79f89;
  --test-panel-bkg: #f8ebc6;

  --code-emphasis: #ce9600;

  --err-color: red;
  --err-color-dark: #c00;

  --selection-color: #fae294;
  --selection-shadow-color: rosybrown;

  --hole-stroke-color: #dc322f;

  --cell-selected-accent: red;

  /* SORT COLORS */

  --nul-text-color: red;
  --nul-off-color: var(--nul-text-color);
  --nul-token-color: var(--nul-text-color);
  --nul-shadow-color: #ffa000;
  --nul-bg-color: #ffacac;
  --nul-bg-off-color: var(--nul-bg-color);

  --any-text-color: var(--nul-text-color);
  --any-off-color: var(--nul-off-color);
  --any-token-color: var(--nul-token-color);
  --any-shadow-color: var(--nul-shadow-color);
  --any-bg-color: var(--nul-bg-color);
  --any-bg-off-color: var(--nul-bg-off-color);

  --exp-text-color: var(--light-text-color);
  --exp-off-color: #b1a47f;
  --exp-token-color: var(--light-text-color);
  --exp-shadow-color: #c4b599;
  --exp-bg-color: #ebdfc5;
  --exp-bg-off-color: #feddb3;

  --pat-text-color: #169fdc;
  --pat-off-color: #13aed2;
  --pat-token-color: #a2dffb;
  --pat-shadow-color: var(--pat-off-color);
  --pat-bg-color: #b2e8ff;
  --pat-bg-off-color: #d7f3ff;

  --tpat-text-color: #16c8dc;
  --tpat-off-color: #13d2d2;
  --tpat-token-color: #a2fbf9;
  --tpat-shadow-color: var(--pat-off-color);
  --tpat-bg-color: #b2fbff;
  --tpat-bg-off-color: #d7fff7;

  --typ-text-color: #772cff;
  --typ-off-color: #975dff;
  --typ-token-color: #cfb5ff;
  --typ-shadow-color: var(--typ-off-color);
  --typ-bg-color: #f2ccff;
  --typ-bg-off-color: #f9e8ff;

  --rul-text-color: var(--exp-text-color);
  --rul-off-color: var(--exp-off-color);
  --rul-token-color: #ccc2af;
  --rul-shadow-color: var(--exp-shadow-color);
  --rul-bg-color: var(--exp-bg-color);
  --rul-bg-off-color: var(--exp-bg-off-color);

  /* END SORT COLORS */

  --string-lit-color: rgb(205 165 56);

  --bar-color: #dfdacc;

  --key-bg-color: var(--light-text-color);
  --key-text-color: whitesmoke;
  --action-text-color: var(--light-text-color);

  --err-flash-duration: 0.4s;
  --err-msg-duration: 5s;

  --disabled-action-table-opacity: 0.25;

  --line-height: 1.45;

  --step-hole-color: green;
  --selection-box-z: 1;
  --genie-z: 1;
  --empty-hole-z: 5;
  --tile-z: 4;
  --err-hole-z: 5;
  --code-text-z: 6;
  --code-text-shards-z: 7;
  --bar-z: 0;
  --inner-cousin-z: 9;
  --outer-cousin-caret-position-z: 9;
  --caret-position-z: 13;
  --current-caret-pos-z: 15;
  --caret-z: 14;
  --docs-highlight-z: 8;

  --type-inspector-z: 14;
  --top-bar-z: 15;

  --test-panel-z: 20;

  --result-z: 30;

  --modal-z: 10001;
  --modal-back-z: 10000;

  --shadow-color: 44deg 28% 59%;
  --shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    0.4px 0.8px 1px -1.2px hsl(var(--shadow-color) / 0.34),
    1px 2px 2.5px -2.5px hsl(var(--shadow-color) / 0.34);
  --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
  --shadow-elevation-high: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color) / 0.34),
    2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color) / 0.34),
    4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / 0.34),
    7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / 0.34),
    11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / 0.34),
    17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / 0.34),
    25px 50px 62.9px -2.5px hsl(var(--shadow-color) / 0.34);
}

/* BASE ELEMENTS */

svg {
  overflow: visible;
}

/* ANIMATIONS */

@keyframes jello {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes wobble {
  0%,
  100% {
    transform: translateX(0%);
    transform-origin: 50% 50%;
  }

  15% {
    transform: translateX(10%) rotate(-6deg);
  }

  30% {
    transform: translateX(5%) rotate(6deg);
  }

  45% {
    transform: translateX(5%) rotate(-3.6deg);
  }

  60% {
    transform: translateX(3%) rotate(2.4deg);
  }

  75% {
    transform: translateX(-2%) rotate(-1.2deg);
  }
}

body {
  /* Default UI font */
  font-family: "Helvetica Neue";
}

/* LOADING: This shows before the app is loaded */

#container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--light-page-color);
  color: var(--light-text-color);
  font-size: 1.75em;
  font-style: italic;
}

#container .loading {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#container .loading .spinner {
  display: flex;
  align-items: center;
  justify-content: center;
}

#container .loading .spinner .spinner-nut {
  position: fixed;
  transform: scale(0.25);
  filter: invert();
}

/* PAGE */

#page {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template: 2.75em minmax(0, 1fr) 2em / 1fr fit-content(18em);
  background-color: var(--light-page-color);
  color: var(--light-text-color);
  user-select: none;
}

:root {
  scrollbar-color: #dac898 #0000;
  scrollbar-width: thin;
}

:root::-webkit-scrollbar {
  width: 0.8em;
}
:root::-webkit-scrollbar:horizontal {
  height: 0.8em;
}
:root::-webkit-scrollbar-track {
  background-color: #fdf6e300;
}
:root::-webkit-scrollbar-thumb {
  background-color: #e1d1a6;
  border-radius: 1em;
  border: 0.2em solid #fdf6e3;
}
/* set button(top and bottom of the scrollbar) */
:root::-webkit-scrollbar-button,
:root::-webkit-scrollbar-corner {
  display: none;
}


#main {
  grid-row: 2;
  grid-column: 1 / span 1;
  overflow: auto;
  
}

#main.Scratch,
#main.Documentation {
  padding: 0.8em;
}
#main.Exercises {
  padding: 1.2em 0.8em 1.2em 0.8em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.2em;
}
#main.Exercises .editor {
  /* TODO deprecate */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.2em;
}
#main.Scratch .cell,
#main.Documentation .cell {
  min-width: 30em;
}
#main.Exercises .cell {
  width: auto;
}

#main .code-container {
  cursor: text;
}

select {
  cursor: pointer;
}

#font-specimen {
  position: fixed;
  left: 100%;
}

#font-specimen,
.code-container,
.DHCode,
.context-entry,
.typ-view,
.code {
  line-height: var(--line-height);
  white-space: pre;
  font-family: "Source Code Pro", monospace;
  font-weight: normal;
  font-size: 13pt;
}

#editor-mode,
.cell-caption,
.cell-prompt,
.test-panel,
.test-reports,
.test-summary,
.title-bar {
  font-size: 0.9rem;
}

/* TOP BAR */

#top-bar {
  grid-row: 1 / span 1;
  grid-column: 1 / span 2;
  z-index: var(--top-bar-z);
  display: flex;
  align-items: center;
  gap: 1em;
  border-bottom: 0.6px solid #c7b480;
}

#top-bar #title {
  color: #a69460;
}

#top-bar .nut-menu {
  display: flex;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.07s ease;
  position: fixed;
  top: 2.75em;
  left: 0;
  width: 2.75em;
  /*padding-top: 1em;
  padding-bottom: 1em;
  gap: 1em;*/
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #a69461;
}

#top-bar .nut-menu .submenu {
  display: none;
  transition: transform 0.07s ease;
  position: absolute;
  width: max-content;
  top: 0em;
  left: 2.75em;
  flex-direction: column;
  justify-content: center;
  background-color: #bba874;
  border-radius: 0 0 1.3em 0;
}
#top-bar .nut-menu .submenu-icon:hover + .submenu,
#top-bar .nut-menu .submenu-icon + .submenu:hover {
  display: flex;
}

#top-bar .nut-menu .submenu-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.75em;
  height: 2.75em;
}

#top-bar .nut-menu .named-menu-item {
  height: 2.75em;
  display: flex;
  align-items: center;
  color: antiquewhite;
  cursor: pointer;
  padding-right: 1em;
}
#top-bar .nut-menu .named-menu-item:last-child {
  border-radius: 0 0 1.3em 0;
}
#top-bar .nut-menu .named-menu-item:hover {
  background-color: #c7b480;
  color: white;
}
#top-bar .nut-menu .named-menu-item .toggle-switch {
  margin-left: 0.5em;
  margin-right: 0.5em;
}

#top-bar .nut-menu .top-menu-item:hover,
#top-bar .nut-menu .top-menu-item:has(+ .submenu:hover) {
  background-color: #bba874; /*c7b480*/
}
#top-bar .nut-menu .top-menu-item:hover svg,
#top-bar .nut-menu .top-menu-item:has(+ .submenu:hover) svg {
  fill: var(--light-page-color);
}

#top-bar .nut-menu:hover,
#top-bar .nut-icon:hover + .nut-menu {
  transform: scaleY(1);
  display: flex;
  border-radius: 0 0 1.3em 0;
}

#top-bar .nut-menu .top-menu-item {
  position: relative;
}
#top-bar .nut-menu .icon,
#top-bar .nut-menu .link {
  display: flex;
  height: 2.75em;
  width: 2.75em;
  align-items: center;
  justify-content: center;
}
#top-bar .nut-menu .top-menu-item:last-child {
  border-radius: 0 0 1.3em 0;
}
#top-bar .nut-menu .top-menu-item:hover {
  background-color: #bba874;
  color: white;
}

#top-bar .nut-icon {
  width: 2.75em;
  min-width: 2.75em; /* Seems to be necessary at high zooms? */
  height: 2.75em;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--top_bar_icon_fill);
  cursor: pointer;
  color: white;
  /*border-radius: 0 0 1.1em 0;*/
  transition: all 0.1s ease-in;
}

#top-bar .nut-icon:hover {
  border-radius: 0;
}

#top-bar .nut-icon svg {
  fill: var(--light-page-color);
}

#top-bar .nut-icon:hover svg,
#top-bar .nut-icon svg:hover {
  height: 1.6em;
  width: 1.6em;
  animation: jello 0.6s ease 0s 1 normal forwards;
}

#top-bar .icon:hover svg {
  transform: scale(130%);
}

#top-bar .nut-menu .icon:hover svg {
  animation: wobble 0.6s ease 0s 1 normal forwards;
  filter: brightness(1.2);
}

#top-bar .nut-menu .toggle-switch:hover {
  filter: brightness(1.1);
}

#top-bar .icon {
  cursor: pointer;
  color: var(--top_bar_icon_fill);
  height: 20px;
}

#top-bar .icon svg {
  fill: var(--top_bar_icon_fill);
}

#top-bar .icon.disabled {
  opacity: 0.35;
}

#top-bar .icon.disabled:hover svg {
  transform: scale(100%);
  cursor: not-allowed;
}

#top-bar .nut-menu .toggle-switch.active {
  background-color: #4fad66;
  border: solid 1px transparent;
}
#top-bar .nut-menu .toggle-switch.active .toggle-knob {
  color: #4fad66;
}

#top-bar #editor-mode {
  color: #fdf6e3;
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  background-color: #c7b480;
  border-radius: 0.4em 1em 1em 0.4em;
  transition: width 0.1s ease-in;
  font-size: 0.7em;
  white-space: nowrap;
}

#top-bar #editor-mode .icon {
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
}

#top-bar #editor-mode .icon:hover {
  filter: brightness(0.45) sepia(1) hue-rotate(15deg) saturate(50);
}

#top-bar #editor-mode .icon svg {
  fill: var(--light-page-color);
}

#top-bar #editor-mode .toggle-switch {
  background-color: #99854a;
}

#top-bar #editor-mode .mode-name {
  border-radius: 0.4em 1em 1em 0.4em;
  padding: 0 0.5em 0 0.5em;
  background-color: #a69460;
  border-bottom: 0.7px solid #ebe0c2;
  color: #fdf6e3;
}

#top-bar #editor-mode .mode-name select:hover,
#top-bar #editor-mode select:hover {
  color: #fad56f;
}

#top-bar #editor-mode .icon svg {
  height: 15px;
}

#top-bar #editor-mode .toggle-switch.active .toggle-knob {
  filter: grayscale(1) sepia(1);
}

#top-bar #editor-mode .toggle-switch .toggle-knob {
  filter: grayscale(1) sepia(1) opacity(0.3);
}

#top-bar #editor-mode select {
  background-color: #0000;
  border: none;
  color: white;
  font-size: 1em;
  height: 1.7em;
}

#top-bar #editor-mode select:focus-visible {
  background-color: #0000 !important;
  color: #fad56f !important;
  outline: none;
}

#top-bar #editor-mode select:focus-visible option {
  color: white;
}

#top-bar #editor-mode select option {
  background-color: #a69460;
  color: #f8d36f;
}

/* CELL */

#mousedown-overlay {
  cursor: text;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: transparent;
  z-index: 9999;
}

.code-container {
  position: relative;
}

.code {
  /*white-space: nowrap;*/
}

.cell {
  width: fit-content;
  border-radius: 0.4em;
  border-left: 2px solid var(--top_bar_icon_fill);
}

.cell.selected {
  border-left: 2px solid var(--cell-selected-accent);
  background-color: #fffcf3;
}

.cell-item {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding-left: 1em;
  padding: 1em;
  padding-left: 1.2em;
}

.cell-item:first-child {
  border-top-left-radius: 0.4em;
  border-top-right-radius: 0.4em;
}

.cell-item:last-child {
  border-bottom-left-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
}

.title-cell {
  padding-left: 1em;
}

.title-cell .title-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--light-text-color);
}

.cell-prompt {
  padding: 1em;
  font-size: 1rem;
}

.cell-caption {
  color: var(--top-bar-text);
}

/* CODE EDITOR */

.code-text {
  position: relative;
  z-index: var(--code-text-z);
  white-space: pre;
}

/* NOTE(andrew): below 3 styles are part of
   a hack to display incomplete delims in
   selections */
.code-text-shards {
  /*position: absolute;*/
  z-index: var(--code-text-shards-z);
}

.code-text-shards span {
  color: #0000 !important;
}

.code-text-shards span.incomplete {
  color: var(--code-emphasis) !important;
}

.empty-hole {
  z-index: var(--empty-hole-z);
}

.empty-hole-path {
  fill: #f1e8cd;
  stroke: #dbcca7;
  stroke-width: 0.75px;
  vector-effect: non-scaling-stroke;
}

.selection {
  position: relative;
}

.selection-box {
  position: absolute;
  z-index: var(--selection-box-z);
  box-sizing: border-box;
  background-color: transparent;
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 3px;
}

.selection-box.unfocused {
  opacity: 50%;
}

.selection-box.moving {
  box-shadow: 0.5px 0.5px 2px var(--selection-shadow-color);
}

.restructuring {
  position: relative;
}

.placeholder {
  position: absolute;
}

.placeholder-mask {
  position: absolute;
  z-index: var(--placeholder-z);
  background-color: lightgray;
  box-sizing: border-box;
  box-shadow: inset 1px 1px 2px darkgray;
  border-radius: 4px;
}

.tile-indicated {
  z-index: var(--tile-z);
}

.current-caret-pos-container {
  z-index: var(--current-caret-pos-z);
}

.sibling {
  z-index: var(--caret-position-z);
}

.inner-cousin-container {
  z-index: var(--inner-cousin-z);
}

.outer-cousin-container {
  z-index: var(--outer-cousin-caret-position-z);
}

.restructuring-genie-path {
  stroke-width: 0;
  fill: var(--selection-color);
  vector-effect: non-scaling-stroke;
}

.child-line {
  stroke-width: 1;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.code .token.poly {
  font-weight: bold;
}

.code .token.mono.string-lit {
  color: var(--string-lit-color);
}

.code .token.in-buffer {
  color: #d7cdb2 !important;
}

.code .token.sort-inconsistent {
  /*color: var(--err-color) !important;*/
  /*TODO(andrew): less shouty for now*/
  color: #938870 !important;
}

.code .token.incomplete {
  color: var(--code-emphasis) !important;
}

.code .token.explicit-hole {
  color: #ffd04f !important;
  text-shadow: 1px 1px 0px rgb(45, 34, 6), -0.5px -0.5px 0 #ff9b00;
}

.child-backing {
  z-index: -1;
}

svg.tile-selected {
  z-index: var(--tile-z);
}

.tile-path.selected {
  fill: var(--selection-color);
}

.tile-path.selected-buffer {
  fill: #fbf3de;
}

/* TODO(andrew): hack important */
.tile-path.raised.selected {
  filter: url(#raised-drop-shadow-Nul) !important;
}

.caret-position-path {
  vector-effect: non-scaling-stroke;
  stroke-width: 0.1px;
}

.caret-position-path.outer-cousin {
  stroke: var(--bar-color);
  fill: var(--bar-color);
}

@property --color {
  syntax: "<color>";
  /* <- defined as type number for the transition to work */
  initial-value: #000000;
  inherits: false;
}

#caret-bar {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  width: 2px;
  transform: translate(-50%, 0%);
  z-index: var(--caret-bar-z);
}

/* TOKEN COLORS */

.code .token.Nul {
  color: var(--nul-text-color);
}
.code .token.Any {
  color: var(--any-text-color);
}
.code .token.Exp {
  color: var(--exp-text-color);
}
.code .token.Pat {
  color: var(--pat-text-color);
}
.code .token.Typ {
  color: var(--typ-text-color);
}
.code .token.Rul {
  color: var(--rul-text-color);
}
.code .token.TPat {
  color: var(--tpat-text-color);
}

.tile-path.Nul {
  filter: url(#drop-shadow-Nul);
}
.tile-path.Any {
  filter: url(#drop-shadow-Any);
}
.tile-path.Exp {
  filter: url(#drop-shadow-Exp);
}
.tile-path.Pat {
  filter: url(#drop-shadow-Pat);
}
.tile-path.Typ {
  filter: url(#drop-shadow-Typ);
}
.tile-path.Rul {
  filter: url(#drop-shadow-Rul);
}
.tile-path.TPat {
  filter: url(#drop-shadow-TPat);
}

.tile-path.Nul.indicated {
  fill: var(--nul-bg-color);
}
.tile-path.Any.indicated {
  fill: var(--any-bg-color);
}
.tile-path.Exp.indicated {
  fill: var(--exp-bg-color);
}
.tile-path.Pat.indicated {
  fill: var(--pat-bg-off-color);
}
.tile-path.Typ.indicated {
  fill: var(--typ-bg-off-color);
}
.tile-path.Rul.indicated {
  fill: var(--rul-bg-color);
}
.tile-path.TPat.indicated {
  fill: var(--tpat-bg-off-color);
}

.tile-path.Nul.indicated-caret {
  fill: var(--nul-bg-color);
}
.tile-path.Any.indicated-caret {
  fill: var(--any-bg-color);
}
.tile-path.Exp.indicated-caret {
  fill: var(--exp-bg-off-color);
}
.tile-path.Pat.indicated-caret {
  fill: var(--pat-bg-color);
}
.tile-path.Typ.indicated-caret {
  fill: var(--typ-bg-color);
}
.tile-path.Rul.indicated-caret {
  fill: var(--rul-bg-color);
}
.tile-path.TPat.indicated-caret {
  fill: var(--tpat-bg-color);
}

.tile-path.Nul.raised {
  filter: url(#raised-drop-shadow-Nul);
}
.tile-path.Any.raised {
  filter: url(#raised-drop-shadow-Any);
}
.tile-path.Exp.raised {
  filter: url(#raised-drop-shadow-Exp);
}
.tile-path.Pat.raised {
  filter: url(#raised-drop-shadow-Pat);
}
.tile-path.Typ.raised {
  filter: url(#raised-drop-shadow-Typ);
}
.tile-path.Rul.raised {
  filter: url(#raised-drop-shadow-Rul);
}
.tile-path.TPat.raised {
  filter: url(#raised-drop-shadow-TPat);
}

.child-line.Nul {
  stroke: var(--nul-shadow-color);
}
.child-line.Any {
  stroke: var(--any-shadow-color);
}
.child-line.Exp {
  stroke: var(--exp-shadow-color);
}
.child-line.Pat {
  stroke: var(--pat-shadow-color);
}
.child-line.Typ {
  stroke: var(--typ-shadow-color);
}
.child-line.Rul {
  stroke: var(--rul-shadow-color);
}
.child-line.TPat {
  stroke: var(--tpat-shadow-color);
}

#drop-shadow-Nul .tile-drop-shadow {
  flood-color: var(--nul-shadow-color);
}
#drop-shadow-Any .tile-drop-shadow {
  flood-color: var(--any-shadow-color);
}
#drop-shadow-Exp .tile-drop-shadow {
  flood-color: var(--exp-shadow-color);
}
#drop-shadow-Pat .tile-drop-shadow {
  flood-color: var(--pat-shadow-color);
}
#drop-shadow-Typ .tile-drop-shadow {
  flood-color: var(--typ-shadow-color);
}
#drop-shadow-Rul .tile-drop-shadow {
  flood-color: var(--rul-shadow-color);
}
#drop-shadow-TPat .tile-drop-shadow {
  flood-color: var(--tpat-shadow-color);
}

#raised-drop-shadow-Nul .tile-drop-shadow {
  flood-color: var(--nul-shadow-color);
}
#raised-drop-shadow-Any .tile-drop-shadow {
  flood-color: var(--any-shadow-color);
}
#raised-drop-shadow-Exp .tile-drop-shadow {
  flood-color: var(--exp-shadow-color);
}
#raised-drop-shadow-Pat .tile-drop-shadow {
  flood-color: var(--pat-shadow-color);
}
#raised-drop-shadow-Typ .tile-drop-shadow {
  flood-color: var(--typ-shadow-color);
}
#raised-drop-shadow-Rul .tile-drop-shadow {
  flood-color: var(--rul-shadow-color);
}
#raised-drop-shadow-TPat .tile-drop-shadow {
  flood-color: var(--tpat-shadow-color);
}

/* OTHER SORT COLORS */

.ci-header.Nul {
  background-color: var(--nul-bg-color);
  color: var(--nul-off-color);
}
.ci-header.Any {
  background-color: var(--any-bg-color);
  color: var(--any-off-color);
}
.ci-header.Exp {
  background-color: var(--exp-bg-color);
  color: var(--exp-off-color);
}
.ci-header.Pat {
  background-color: var(--pat-bg-color);
  color: var(--pat-off-color);
}
.ci-header.Typ {
  background-color: var(--typ-bg-color);
  color: var(--typ-off-color);
}
.ci-header.Rul {
  background-color: var(--rul-bg-color);
  color: var(--rul-off-color);
}
.ci-header.TPat {
  background-color: var(--tpat-bg-color);
  color: var(--tpat-off-color);
}

/* is this used? */
.caret-position-path.Exp.sibling,
.caret-position-path.Exp.inner-cousin {
  stroke: var(--exp-text-color);
  fill: var(--exp-text-color);
}
.caret-position-path.Pat.sibling,
.caret-position-path.Pat.inner-cousin {
  stroke: var(--pat-text-color);
  fill: var(--pat-text-color);
}
.caret-position-path.Typ.sibling,
.caret-position-path.Typ.inner-cousin {
  stroke: var(--typ-text-color);
  fill: var(--typ-text-color);
}

/* is this used? */
.caret-position-path.Exp.anchor,
.caret-position-path.Exp.current-caret-pos {
  stroke: var(--exp-shadow-color);
  fill: var(--exp-shadow-color);
}
.caret-position-path.Pat.anchor,
.caret-position-path.Pat.current-caret-pos {
  stroke: var(--pat-text-color);
  fill: var(--pat-text-color);
}
.caret-position-path.Typ.anchor,
.caret-position-path.Typ.current-caret-pos {
  stroke: var(--typ-text-color);
  fill: var(--typ-text-color);
}

/* END SORT COLORS */

.keyboard-arrow {
  position: relative;
  font-family: "Fira Code";
  top: 1px;
}

.delete-action-arrow {
  font-family: "Fira Code";
}

.secondary {
  color: rgb(126, 80, 0);
  opacity: 20%;
}

.linebreak {
  color: rgb(126, 80, 0);
  opacity: 20%;
  font-family: system-ui;
  vertical-align: middle;
  font-size: 0.59em;
}

#filters {
  position: fixed;
  height: 0;
  width: 0;
}

/* BACKPACK */

/* TODO(andrew): refactor to make this unnecessary */
.backpack .code-text {
  position: relative;
  z-index: 40;
  /* TODO: factor into var */
}

.backpack.cant-put-down {
  opacity: 40%;
}

.backpack-joiner {
  opacity: 40%;
}

.backpack-selection {
  white-space: nowrap;
  border-radius: 0.2em 0.2em 0.2em 0em;
  padding: 0 0.2em 0 0.2em;
  line-height: var(--line-height);
  width: fit-content;
  background-color: var(--selection-color);
  outline: 1px solid var(--light-page-color);
}

.backpack-joiner {
  border-radius: 2px;
  width: 2px;
  background-color: var(--selection-color);
}

/* BACKPACK END */

.Exp.caret-position-path.sibling {
  /*TODO(andrew): unhack*/
  stroke: var(--code-emphasis);
  fill: var(--code-emphasis);
}

#caret {
  z-index: var(--caret-z);
}

#caret.blink {
  animation: 1s blink step-end infinite;
}

.caret-path {
  fill: #f62116;
  stroke: none;
}

@keyframes blink {
  from,
  to {
    opacity: 100%;
  }

  50% {
    opacity: 0%;
  }
}

/* STATICS */

.code-container svg.err-hole {
  fill: #d001;
  stroke-dasharray: 1, 1;
  stroke: var(--err-color);
  stroke-width: 1.2px;
  /* mix-blend-mode: color; */
  z-index: var(--err-hole-z);
}

.code-container svg.err-hole path {
  vector-effect: non-scaling-stroke;
}

.typ-view {
  color: var(--typ-text-color);
  display: flex;
}

.kind-view {
  display: flex;
  gap: 0.5em;
}

.typ-view.atom {
  color: var(--typ-text-color);
  display: flex;
  gap: 0em;
}

.typ-view.atom.unknown {
  /* to advertise provenance display on-hover */
  cursor: help;
}
.typ-alias-view {
  color: var(--tpat-text-color);
  display: flex;
}

.typ-mod {
  vertical-align: super;
  font-size: 0.7em;
}

.ci-header {
  padding: 0em 0.6em 0em 0em;
  border-radius: 0 1.1em 0 0;
  display: flex;
  gap: 0.5em;
  color: #0006;
  align-items: center;
  white-space: nowrap;
}

.ci-header.error {
  background-color: var(--err-color);
  color: #830000 !important;
  /* HACK(andrew) */
}

.ci-header .toggle-switch {
  mix-blend-mode: luminosity;
  background-color: #ccc;
}

.term-tag {
  font-weight: bolder;
  text-transform: uppercase;
}

/* CURSOR INSPECTOR */

.cursor-inspector {
  display: flex;
  /*z-index: var(--type-inspector-z);
  gap: 0.5em;
  color: #8c795b;
  border-radius: 0 1.1em 0 0;
  padding-right: 0.6em;
  align-items: stretch;*/
}

.cursor-inspector.no-info {
  align-items: center;
}

.cursor-inspector.error {
  border-color: var(--err-color);
}

.cursor-inspector .gamma:hover + .context-inspector,
.context-inspector.visible {
  display: flex;
}

.cursor-inspector .info {
  display: flex;
  align-items: stretch;
  gap: 0.5em;
  color: #8c795b;
}

.cursor-inspector .error .code {
  background-color: #f3d890;
  padding: 0 0.3em 0 0.3em;
  border-radius: 0.3em;
  border-bottom: 1px dashed red;
}

.cursor-inspector .info .ok,
.cursor-inspector .info .error {
  display: flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
}

.cursor-inspector .info .error {
  color: var(--err-color);
}

/* CONTEXT INSPECTOR */
.context-inspector {
  /* below triggers chrome jank bug */
  /*scroll-snap-type: y mandatory;*/
  direction: rtl;
  position: absolute;
  z-index: 20;
  bottom: 2em;
  min-width: 10em;
  max-height: 11.26em;
  overflow: auto;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  padding-left: 0.1em;
  padding-right: 0.5em;
  white-space: nowrap;
  border-radius: 0 0.2em 0em 0;
  color: #586e75;
  border-top: 0.6px solid #e6ce8f;
  border-right: 0.6px solid #c7b480;
  border-bottom: 0.6px solid #c7b480;
  background-color: #f7ebc5;
  box-shadow: 0px 20px 20px #77580255;
  scrollbar-color: #c7b480 #e4d6a6;
  scrollbar-width: thin;
}
@supports (-moz-appearance: none) {
  .context-inspector {
    scroll-snap-type: y mandatory;
  }
}

.context-inspector::-webkit-scrollbar {
  background-color: #e4d6a6;
}

::-webkit-scrollbar-thumb {
  background-color: #c7b480;
  border-radius: 0 0.5em 0.5em 0em;
}

.context-entry {
  box-sizing: border-box;
  scroll-snap-align: end;
  direction: ltr;
  display: flex;
  gap: 0.5em;
  max-width: 17em;
  border-top: 0.5px solid #0000;
  border-bottom: 0.5px solid #e2d4a9;
  padding-left: 0.3em;
  padding-right: 0.3em;
}

.context-entry:hover {
  max-width: 400em;
  -webkit-mask-image: none;
  border-radius: 0.1em 0.6em 0.1em 0.6em;
  border-top: 0.5px solid #ffffff;
  border-bottom: 0.5px solid rgb(51 36 11);
}

.context-entry .name {
  cursor: pointer;
}

.context-entry .name:hover {
  filter: brightness(0);
}

.context-entry .typ-view:hover {
  /*filter: brightness(1.25) hue-rotate(10deg);*/
}

.context-entry .seperator {
  color: #c7b480;
}

/* END STATICS*/

#bottom-bar {
  grid-row: 3 / span 1;
  grid-column: 1 / span 2;
  display: flex;
  align-items: center;
  gap: 1em;
  justify-content: space-between;
  align-items: stretch;
  background-color: #f9e8bb;
  outline: 0.6px solid #c7b480;
}

#bottom-bar .icon {
  display: flex;
  padding: 0.2em;
  mix-blend-mode: luminosity;
}

#bottom-bar .id {
  display: flex;
  gap: 1em;
  font-size: 0.6em;
  align-items: center;
  padding-left: 1em;
  padding-right: 1em;
  white-space: nowrap;
}

.bottom-bar .id-and-class .syntax-class {
  color: var(--top_bar_icon_fill);
  color: #392f10; /*#fdf6e3;*/
}

.bottom-bar .id-and-class .id {
  text-transform: uppercase;
  color: #a69461;
}

#bottom-bar .syntax-class {
  display: flex;
  align-items: center;
}

#bottom-bar .cursor-inspector .gamma {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-family: math;
  font-weight: normal;
  background-color: #b69f79;
  border-radius: 0 1.1em 0 0;
  padding-left: 0.5em;
  padding-right: 0.7em;
  color: var(--light-page-color);
  height: 100%;
  mix-blend-mode: luminosity;
}

#bottom-bar .cursor-inspector .gamma:hover,
#bottom-bar .cursor-inspector .gamma.visible {
  color: gold;
  background-color: #907b5a;
  border-radius: 0;
}

#side-bar {
  grid-row: 2 / span 1;
  grid-column: 2 / span 1;
  border-left: 0.6px solid #c7b480;
  overflow-y: scroll;
  overflow-x: hidden;
  width: max-content;
}

.explain-this {
  display: flex;
  width: 20em;
  padding: 0.4em;
  /*white-space: nowrap;*/
  flex-direction: column;
  gap: 1em;
}

.comment {
  color: #a0c1aa;
}

.explain-this #examples {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.explain-this .example {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.explain-this .example + .example {
  border-top: 1px dotted #c7b480;
  padding-top: 0.75em;
}

.explain-this .example .cell {
  width: auto;
  background-color: #f7ebd3;
}

.explain-this .example .cell-result {
  background-color: #ede0c6;
}

.explain-this .explanation {
  white-space: normal;
}

.specificity-options-menu {
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.07s ease;
  background-color: #f1e5bf;
  border: 0.7px solid #e1c475;
  border-top: none;
}

.specificity-options-menu .selected {
  filter: brightness(0.9);
}

.explain-this-button {
  text-transform: none;
}

.explain-this .top-bar {
  display: flex;
  justify-content: flex-start;
  gap: 0.75em;
}

.explain-this .top-bar .close {
  cursor: pointer;
  color: var(--top_bar_icon_fill);
  display: flex;
  margin-left: auto;
  align-items: flex-start;
}

.explain-this .top-bar .close:hover {
  color: #f55c27;
  text-shadow: 0.3px 0.3px 0px black;
  border-radius: 0.2em;
  scale: 1.8;
}

.explain-this .section {
  display: flex;
  flex-direction: column;
  padding: 0 0.75em;
  gap: 0.5em;
}

.explain-this .section .explanation-contents .code {
  font-family: "Source Code Pro", monospace;
}

.explain-this .section .section-title {
  text-transform: uppercase;
  font-weight: bold;
  color: #a69460;
  font-size: 0.8em;
}

.explain-this .section .explanation-contents {
  white-space: normal;
}

.highlight-blue {
  background-color: rgb(255 0 255 / 20%);
}

.highlight-code-blue {
  fill: rgb(255 0 255 / 20%);
}

.highlight-pink {
  background-color: rgb(0 255 255 / 40%);
}

.highlight-code-pink {
  fill: rgb(0 255 255 / 40%);
}

.highlight-teal {
  background-color: rgb(0 255 0 / 20%);
}

.highlight-code-teal {
  fill: rgb(0 255 0 / 20%);
}

.highlight-orange {
  background-color: rgb(252, 186, 111);
}

.highlight-code-orange {
  fill: rgb(252, 186, 111);
}

.highlight-purple {
  background-color: rgb(212, 162, 252);
}

.highlight-code-purple {
  fill: rgb(212, 162, 252);
}

.highlight-yellow {
  background-color: rgb(247, 221, 134);
}

.highlight-code-yellow {
  fill: rgb(247, 221, 134);
}

div.expandable-target {
  cursor: pointer;
  z-index: 40;
}

.clickable {
  cursor: pointer;
}

/* https://css-tricks.com/snippets/css/css-triangle/ */
.arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--light-text-color);
}

svg.expandable {
  fill: rgb(199 180 128 / 0%);
  stroke-dasharray: 3, 3;
  stroke: #a69460;
  /* mix-blend-mode: color; */
  z-index: var(--err-hole-z);
}

svg.expandable path {
  vector-effect: non-scaling-stroke;
}

.feedback {
  display: flex;
  padding-top: 10px;
}

.feedback .message {
  font-size: smaller;
  font-style: italic;
}

.feedback .option {
  margin-left: 5px;
  cursor: pointer;
}

.feedback .option.active {
  background-color: var(--top_bar_icon_fill);
}

/* DYNAMICS */

.cell-result {
  display: flex;
  flex-direction: row;
  background-color: #efe7d6;
  gap: 0.5em;
  color: #7a6219;
  border-top: 1px dotted #d2c7ad;
  padding: 0.5em;
  padding-left: 1.2em;
}
.selected .cell-result {
  background-color: #efe7d6;
}

.cell-result .status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  white-space: nowrap;
  font-family: "Source Code Pro", monospace;
}
.cell-result .status .spinner {
  height: 50%;
  width: 60%;
  background: url("img/loading.gif");
  background-repeat: round;
  filter: sepia(1);
  opacity: 0;
  transition: opacity 0.2s linear;
}
.cell-result .status.pending .spinner {
  opacity: 0.5;
  transition: all 0.2s linear;
}
.cell-result .status .eq {
  position: absolute;
  opacity: 1;
  transition: opacity 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.cell-result .status.pending .eq {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.cell-result .result {
  padding-top: 0.1em;
  min-height: 1.6em;
  width: 100%;
  /* overflow-y: hidden;
  overflow-x: auto; */
  transition: opacity 0.2s linear;
}
.cell-result .result.pending {
  opacity: 0.3;
  transition: opacity 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.cell-result .result .exception {
  background-color: #ffa2a2;
  color: #7d0000;
  border-radius: 0.3em;
  font-family: "Helvetica Neue";
  font-size: 1rem;
  padding: 0.1em 0.4em 0.1em 0.4em;
}

.cell-result.hidden {
  background-color: #E8DCBF;
}

.cell-result .toggle-switch {
  mix-blend-mode: luminosity;
}
.cell-result .equiv {
  font-family: 'Source Code Pro';
}

.cell-report {
  padding: 1.2em;
  background-color: var(--test-panel-bkg);
  border-left: 1px solid rgba(0, 0, 0, 0);
}

.cell.selected + .cell-item {
  border-left: 1px solid var(--cell-selected-accent);
}

.result {
  width: 100%;
}
.cell.deselected + .cell-item {
  border-left: 1px solid var(--top_bar_icon_fill);
}

.cell-item.cell-result:has(.fail),
.cell-item.cell-result:has(.exception) {
  background-color: #ffa2a2;
}

.cell-item.cell-result .error-msg {
  padding: 0.25em;
  color: black;
};

.cell-result .icon:hover svg {
  animation: wobble 0.6s ease 0s 1 normal forwards;
  transform: scale(130%);
  filter: brightness(1.1);
}

.cell-result .icon {
  cursor: pointer;
  color: var(--top_bar_icon_fill);
  height: 20px;
}

.cell-result .icon svg {
  fill: var(--top_bar_icon_fill);
}

.cell-result .icon.disabled {
  opacity: 0.35;
}

.cell-result .icon.disabled:hover svg {
  transform: scale(100%);
  cursor: not-allowed;
}

.stepper-justification {
  width: 260px;
}

/* DYNAMICS - DHEXP */

.DHCode {
  position: relative;
}

.DHCode .decoration-container {
  position: absolute;
  pointer-events: none;
}

.DHCode svg.err-hole {
  fill: #d001;
  stroke-dasharray: 1, 1;
  stroke: var(--err-color);
  stroke-width: 1.2px;
  /* mix-blend-mode: color; */
}

.DHCode .InVarHole {
  color: var(--err-color);
}

.DHCode .EmptyHole {
  background-color: #ac9a6a;
  border-radius: 0.2em;
  color: #75572e;
  border-bottom: 1px solid #382100;
}

.cell-result .DHCode .EmptyHole {
  background-color: #d4c7a5 !important;
  color: #fdf6e3;
  border-bottom: 1px solid #aa8926 !important;
}

.DHCode .Collapsed {
  color: #493c15;
}

.DHCode .Align {
  display: inline-block;
}

.DHCode .OperationError,
.DHCode .CastDecoration,
.DHCode .FailedCastDecoration {
  display: inline-block;
  position: relative;
  font-size: 75%;
  top: -10px;
}

.DHCode .FailedCastDelim {
  color: red;
}

.DHCode .CastDecoration {
  background-color: rgba(150, 0, 255, 0.2);
}

.DHCode .FailedCastDecoration {
  background-color: rgba(255, 0, 0, 0.2);
}

/* DYNAMICS - test panel */

.test-panel {
  z-index: var(--test-panel-z);
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 1em;
  /* flex-grow: 1; */
  /*TODO(andrew): move fontshit */
  background-color: var(--test-panel-bkg);
  border-bottom: 0.5px solid var(--top_bar_icon_fill);
}

.test-reports {
  position: relative;
}

.test-report {
  cursor: pointer;
  display: flex;
  gap: 1em;
  padding: 0.3em;
  align-items: baseline;
  /* background-color: #f0fff3; */
  border: 1px outset var(--top_bar_icon_fill);
  border-style: dotted;
  border-left: 0px;
  border-right: 0px;
  border-top: 0;
}

.test-report:hover {
  background-color: #cfd;
}

.test-id.Pass {
  color: green;
}

.test-id.Fail {
  color: var(--err-color);
}

.test-result:after {
  position: relative;
  bottom: 0.15em;
  margin-left: 0.17em;
  font-size: 64%;
  vertical-align: super;
}

.test-instance:before {
  position: relative;
  margin-top: 0.2em;
  margin-right: 1em;
  font-size: 64%;
  display: flex;
  align-items: center;
}

.test-instance.Pass:before,
.test-result.Pass:after {
  content: "✔";
  /*"🤩";*/
  color: green;
}

.test-instance.Fail:before,
.test-result.Fail:after {
  content: "✘";
  /*"🤮";*/
  color: var(--err-color);
}

.test-instance.Indet:before,
.test-result.Indet:after {
  content: "?";
  /*"🤔";*/
  color: rgb(143, 129, 87);
}

.test-instances {
  display: flex;
  flex-direction: row;
  gap: 0.2em;
  flex-grow: 1;
}

.test-report .DHCode {
  display: inline-block;
}

.test-instance {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
}

.test-instance .DHCode {
  /*border-radius: 0.3em;*/
}

/*
.test-instance .DHCode:before {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  background: linear-gradient(90deg, #0000 170px, #f8ebc6);
}*/

.test-instance.Pass .DHCode {
  color: green;
}

.test-instance.Fail .DHCode {
  color: var(--err-color);
  background-color: #0000;
}

.test-instance.Indet .DHCode {
  color: #d2b48c;
}

.test-instance .DHCode .EmptyHole {
  border-bottom: 1px solid rgb(216 177 110);
  background-color: #ecdaa5;
  border-radius: 0.2em;
  color: #fefcf3;
}

.test-report {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  padding: 0.3em;
  margin-right: 1em;
  border-bottom: 1px dotted var(--top_bar_icon_fill);
  cursor: pointer;
}

.test-summary {
  display: flex;
  flex-direction: row;
  gap: 1em;
  justify-content: space-between;
}

.test-bar {
  width: 16em;
  display: flex;
  align-items: center;
  gap: 1px;
}

.test-text {
  display: flex;
  gap: 0.5em;
  white-space: nowrap;
}

.test-percent {
  height: 1.7em;
  display: flex;
  padding: 0 1em 0 1em;
  font-size: 0.7em;
  border-radius: 1.08em;
  background-color: #c7b480;
  align-items: center;
}
#main > .test-percent,
/* TODO deprecate .editor */
#main > .editor > .test-percent {
  position: absolute;
  top: 0;
  right: 0;
  margin: 1em;
}

.test-percent.all-pass {
  background-color: #66ffcb;
  color: #289f87;
  animation: jello 1s ease 0s 1 normal none;
}

.test-percent.some-fail {
  color: var(--light-page-color);
}

.test-bar .segment:first-child {
  border-radius: 0.3em 0 0 0.3em;
}

.test-bar .segment:last-child {
  border-radius: 0 0.3em 0.3em 0;
}

.test-bar .segment:only-child {
  border-radius: 0.3em 0.3em 0.3em 0.3em;
}

.test-bar .segment {
  flex-grow: 1;
  height: 0.5em;
  cursor: pointer;
}

.test-bar .segment.Pass {
  background-color: #7cb;
}

.test-bar .segment.Pass:hover {
  background-color: rgb(81, 242, 194);
}

.test-bar .segment.Fail {
  background-color: #f66;
}

.test-bar .segment.Fail:hover {
  background-color: var(--err-color);
}

.test-bar .segment.Indet {
  background-color: tan;
}

.test-bar .segment.Indet:hover {
  background-color: rgb(255, 199, 125);
}

.test-inspector {
}

.test-inspector .test-instance.Pass .DHCode {
  color: green;
}

.test-inspector .test-instance.Fail .DHCode {
  color: var(--err-color);
  background-color: #0000;
}

/* TOGGLE */

.toggle-switch,
.toggle-switch .toggle-knob {
  transition: all 0.1s ease-in;
}

.toggle-switch {
  height: 1.2em;
  width: 2em;
  display: inline-block;
  background-color: #ebdfc5;
  border-radius: 2em;
  cursor: pointer;
  border: solid 1px #dccfad;
  box-shadow: inset 1px 1px 9px -3px rgb(4 4 4 / 8%),
    1px 2px 6px -2px rgb(0 0 0 / 1%);
}

.toggle-switch:hover {
  animation: wobble 0.4s ease 0s 1 normal none;
  /*transform: scale(120%);*/
}

.toggle-switch .toggle-knob {
  width: 0.9em;
  height: 0.9em;
  /* display: inline-block; */
  display: flex;
  font-family: "Helvetica Neue";
  background-color: #fefcf3;
  color: #c7b480;
  border: solid 1px rgba(126, 126, 126, 0.07);
  box-shadow: 0 1px 3px rgb(107 106 106 / 26%), 0 5px 1px rgb(107 106 106 / 13%);
  border-radius: 1.5em;
  margin: 1px 0.9em 1px 1px;
  align-items: center;
  justify-content: center;
}

.toggle-switch.active {
  background-color: #c7b480;
  border: solid 1px transparent;
}
.toggle-switch.active .toggle-knob {
  margin-left: 0.9em;
  margin-right: 1px;
}

/* END TOGGLE */

/* Exercise */
.exercise-code {
  white-space: nowrap;
  font-family: "Source Code Pro", monospace;
}

.step-expand,
.step-back {
  cursor: pointer;
}

.step-expand:hover span,
.step-back:hover span {
  display: none;
}

.step-expand:hover:before {
  content: "↕";
}

.step-back:hover:before {
  content: "←";
}

/* File Select */
.file-select-button {
  display: none;
}

/* clipboard shim */
#clipboard-shim {
  /* probably overkill for hiding it... */
  position: fixed;
  opacity: 0.01;
  width: 1em;
  height: 1em;
  top: -1em;
  left: -1em;
}

.steppable,
.steppable *:not(.DHCode .EmptyHole *, .DHCode .EmptyHole) {
  outline: 1px var(--step-hole-color);
  background-color: rgb(232, 255, 196);
  cursor: pointer;
}

.stepped,
.stepped *:not(.DHCode .EmptyHole *, .DHCode .EmptyHole) {
  border: 1px var(--step-hole-color);
  background-color: #ddcda3;
}

.substituted {
  text-decoration: line-through;
  color: #ac985e;
}

.settings-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  max-width: 100%;
  max-height: 100%;
  background-color: var(--light-page-color);
  border-radius: 0.4em;
  z-index: var(--modal-z);
  box-sizing: border-box;
  padding: 1em;
}

.settings-modal-top {
  justify-content: right;
  display: flex;
}

.modal-back {
  z-index: var(--modal-back-z);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00000060;
}

.settings-toggle .toggle-switch {
  margin-right: 1em;
}

.settings-toggle {
  margin-bottom: 0.3em;
}

.settings-modal .icon:hover svg {
  animation: wobble 0.6s ease 0s 1 normal forwards;
  transform: scale(130%);
  filter: brightness(1.1);
}

.settings-modal .icon {
  cursor: pointer;
  color: var(--top_bar_icon_fill);
  height: 20px;
}

.settings-modal .icon svg {
  fill: var(--top_bar_icon_fill);
}

.settings-modal .icon.disabled {
  opacity: 0.35;
}

.settings-modal .icon.disabled:hover svg {
  transform: scale(100%);
  cursor: not-allowed;
}
.slide-img {
  border-radius: 0.4em;
  margin-bottom: 1em;
}

.slide {
  margin-bottom: 2em;
  min-width: 7.5in;
  width: 7.5in;
}

.slide h1 {
  margin-top: 0;
}

.em {
  font-style: italic;
}