/* -----------------------------------------------------------
   mots.us — Baseline CSS (no animations, no page-specific UI)
   - Same fonts & color palette as the old LESS
   - Dark mode via .dark-mode class
   - Minimal, accessible defaults
----------------------------------------------------------- */

/* Font (keep VT323, add sensible fallbacks) */
@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");

:root {
  --console-bright: #ffffff;
  --console-color: #000000;
  --console-color-dim: #777777;
  --console-bg: #efefef;
  --console-bg-dim: #cccccc;
  --console-inverted: #000000;
  --console-bg-blue: #0000ff;
  --console-bg-nonoise: #000000;
  --console-bg-box: #000000;
  --shadow-color: rgba(221, 221, 221, 0.5);
  ;

  --base-font-size: 1.5rem;
  --small-font-size: 1.2rem;
  --main-width: 63vw;
  --nav-width: 20vw;
}

.dark-mode {
  --console-bright: #ffffff;
  --console-color: #efefef;
  --console-color-dim: #aaaaaa;
  --console-bg: #101010;
  --console-bg-dim: #303030;
  --console-inverted: #ffffff;
  --console-bg-blue: #0000ff;
  --console-bg-nonoise: #efefef;
  --console-bg-box: #efefef;
  --shadow-color: rgba(34, 34, 34, 0.5);
}

/* Reset-ish fundamentals */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 1rem;
  color: var(--console-color);
  background-color: var(--console-bg);
  font-family: "VT323", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: var(--base-font-size);
  line-height: 1.25;
  overflow-x: hidden;
  /* mirrors prior layout intent */

}

/* Headings — simple, non-animated */
h1,
h2,
h3,
h4 {
  font-weight: normal;
  font-size: var(--base-font-size);
  margin: 0 0 0.5em;
}

h1 {
  font-size: calc(var(--base-font-size) * 2);
  margin: 0 0 0;
}

article h1 {
  margin-top: -1rem;
}

h2 {
  font-weight: bold;
  font-size: calc(var(--base-font-size) * 1.5);
}

h3 {
  font-weight: bold;
  font-size: calc(var(--base-font-size) * 1.25);
}

p {
  margin: 0 0 1em;
}

hr {
  border: 0;
  border-bottom: 0.2rem solid var(--console-color);
  margin-bottom: 2rem 0;
}

/* Text selection colors (kept from LESS) */
::selection {
  background-color: var(--console-bright);
  color: var(--console-inverted);
}

::-moz-selection {
  background-color: var(--console-bright);
  color: var(--console-inverted);
}

/* Links & buttons (same hover color logic, no animation) */
a,
a:visited,
button {
  color: var(--console-color);
  text-decoration: none;
  /* original had none by default */
  background: transparent;
  border-bottom: 0.2rem solid var(--console-color);
  cursor: url('i/cursor-pointer.gif') 10 0, pointer;
}

/* Hover/active states emulate the old blue/contrast flip */
a:hover,
a:active,
button:hover,
button:active {
  background-color: var(--console-bg-blue);
  color: var(--console-bg);
  /* no animation */
}

/* Disabled link wrapper (kept behavior; baseline only) */
.disabled a {
  cursor: url('i/cursor-default.gif'), default;
}

/* Buttons — keep the italic/console feel */
button {
  font: inherit;
  /* keep VT323 size & style */
  font-style: italic;
  padding: 0 1rem;
  border: 0;
  border-radius: 0;
  background-color: var(--console-color);
  color: var(--console-bright);
}

/* Images & media defaults */
img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

main ul {
  list-style: none;
  padding-left: 1.25rem;
  margin: 0 0 1em;
}

main ul li {
  position: relative;
}

main ul li::before {
  content: "- ";
  position: absolute;
  left: -1.25rem;
  color: transparent;
  border-bottom: 0.2rem solid var(--console-color);
  font-size: calc(var(--base-font-size) / 2);
  width: 0.6rem;
}

/* Layout utility: main wrapper (neutral baseline) */
#main {
  width: var(--main-width);
  margin: 0 0 0 var(--nav-width);
}

/* Simple focus styles (accessibility) */
a:focus-visible,
button:focus-visible {
  background-color: var(--console-bg-blue);
  color: var(--console-bg);
  outline-offset: 0;
  outline-color: transparent
}

.nav-logo a:focus-visible img {
  filter: invert(1);
}

/* Optional smaller breakpoint (very small/short viewports) */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --base-font-size: 2rem;
  }
}


.site-nav {
  font: inherit;
  color: var(--console-color);
  position: fixed;
  top: 1rem;
  align-self: start;
  width: var(--nav-width);
}

/* Logo */
.site-nav .nav-logo {
  margin-bottom: 10vh;
}

.site-nav .logo {
  display: inline-block;
  border-bottom: 0 solid var(--console-color);
  /* match your link underline */
  text-decoration: none;
}

.site-nav .logo img {
  height: 2rem;
}

.dark-mode .site-nav .logo img {
  filter: invert(1) grayscale(1) brightness(2);
}

.site-nav .logo:hover {
  background-color: rgba(0, 0, 0, 0);
}

.tree .leaf.separator {
  margin-top: 15vh;
}

.tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tree .root {
  margin-top: .5rem;
}

.tree .root>li {
  margin-bottom: 5vh;
}

.tree .root>li:last-child {
  margin-bottom: 1vh;
}

.tree .children {
  position: relative;
  padding-left: 0;
  /* space for connectors */
  margin: 0;
  border-left: 0;
  /* <— kill the old line */
}

.tree .children .leaf {
  position: relative;
  min-height: var(--base-font-size);
  height: auto;
}

.branch details>summary {
  list-style: none;
}

.branch details>summary::-webkit-details-marker {
  display: none;
}

.branch details:not([open])>.children {
  display: none;
}

.branch details[open]>.children {
  display: block;
}

.branch.is-current-branch details>.children {
  display: block;
}

.branch.is-current-branch details {}

/* Make the <summary> look like links */
.branch .branch-label {
  display: inline-block;
  border-bottom: 0.2rem solid var(--console-color);
  cursor: url('i/cursor-pointer.gif') 10 0, pointer;
}

/* hover/active same as links */
.branch .branch-label:hover,
.branch .branch-label:active {
  background-color: var(--console-bg-blue);
  color: var(--console-bg);
}

/* focus style same as links/buttons */
.branch .branch-label:focus-visible {
  background-color: var(--console-bg-blue);
  color: var(--console-bg);
  outline-offset: 0;
  outline-color: transparent;
}

/* current state to match your anchor rule */
.branch .branch-label.is-current {
  text-decoration: line-through;
  border-bottom-color: transparent;
}

.branch-label>a[aria-current="page"] {
  text-decoration: line-through;
  border-bottom-color: transparent;
}

.tree .children .leaf::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0.8em;
  height: 1.1em;
  border-left: 0.2rem solid var(--console-color);
  border-bottom: 0.2rem solid var(--console-color);
  transform: translateY(0.02em);
  /* tiny per-font tweak if needed */
  margin: 0;
  /* margins don’t affect abspos */
  left: 1rem;
  vertical-align: -0.05em;
}

.tree .children .leaf a {
  border: none;
  position: relative;
  line-height: 1;
  margin-left: 2.3rem;
  margin-top: 0.3rem;
}

.tree .leaf a,
.tree .leaf button {
  display: inline-block;
  /* keeps underline tidy */
}

.tree .leaf.is-current>a,
.tree .branch-label>a[aria-current="page"] {
  text-decoration: line-through;
  border-bottom-color: transparent;
}


.breadcrumbs {
  font-size: var(--small-font-size);
  margin-bottom: 1rem;
  color: var(--console-color-dim);
  width: fit-content;
  opacity: 0.5;
}

.breadcrumbs:hover {
  opacity: 1;
}

.breadcrumbs a {
  color: var(--console-color-dim);
  border-bottom: 0.15rem solid var(--console-color-dim);
}

.breadcrumbs a:hover {
  color: var(--console-bg);
}

.h2-row {
  border-top: 0.2rem solid var(--console-color);
  margin-top: 4rem;
  margin-bottom: 2rem;
  padding-top: 1rem;
}

.h2-row h2 {
  width: calc(var(--main-width) / 3*2 - 0.6rem);
  display: inline-block;
}

.h2-row .h2-meta {
  width: calc(var(--main-width) / 3);
  text-align: right;
  color: var(--console-color-dim);
  margin-top: 0;
  display: inline-block;
  vertical-align: middle;
  padding-bottom: 0.7rem;
}

.h2-row .h2-meta .h2-year {
  width: 25%;
  display: inline-block;
  text-align: right;
}

@media (min-width: 801px) {
  .menu-toggle {
    display: none !important;
  }

  .tree .children .leaf::after {
    content: "";
    position: absolute;
    left: 1rem;
    /* aligns with your elbow */
    top: 0;
    bottom: 1.1em;
    /* stop right above the elbow height */
    border-left: 0.2rem solid var(--console-color);
  }

}

/* ===== Mobile full-screen menu fixes ===== */
/* === Mobile: fix body transform/filter; make header truly fixed; tighten overlay === */
@media (max-width: 800px) {

  /* 0) Fix the root cause: body transforms break position:fixed */
  body {
    transform: none !important;
    filter: none !important;
  }

  /* 1) Make sure the sidebar layout is disabled */
  .site-nav {
    position: static;
    width: auto;
  }

  /* 2) Logo + button fixed at top */
  .site-nav .nav-logo {
    position: fixed !important;
    top: .75rem;
    left: .75rem;
    margin: 0 !important;
    z-index: 2001;
  }

  .menu-toggle {
    position: fixed !important;
    top: .75rem;
    right: .75rem;
    z-index: 2001;
    font: inherit;
    background: transparent;
    color: var(--console-color);
    border: 0.2rem solid var(--console-color);
    padding: 0 .6rem;
    /* a bit tighter */
    line-height: 1.2;
    font-size: var(--base-font-size);
  }

  /* 3) Closed vs open overlay */
  #siteNav .root {
    display: none;
  }

  body.menu-open {
    overflow: hidden;
  }

  body.menu-open #siteNav .root {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* no vertical centering -> more room */
    align-items: flex-start;
    position: fixed;
    inset: 0;
    z-index: 2000;
    padding: 4.25rem 1rem 1rem;
    /* header clearance; tighter sides */
    background: var(--console-bg);
    gap: clamp(.2rem, 1.6vh, .5rem);
    /* smaller vertical gaps */
  }

  body.menu-open .tree .children {
    padding-left: 1rem;
    /* space for elbows */
  }

  body.menu-open .tree .children .leaf::before {
    display: block;
    /* show elbows again */
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    /* align to trunk */
    width: 0.9em;
    height: 1.1em;
    border-left: 0.2rem solid var(--console-color);
    border-bottom: 0.2rem solid var(--console-color);
    transform: translateY(0.02em);
  }

  /* Nudge link text so it clears the elbow */
  body.menu-open .tree .leaf a,
  body.menu-open .branch .branch-label {
    margin-left: 0;
    /* reset any desktop offset */
  }

  body.menu-open .tree .children .leaf a {
    margin-left: 1.6rem;
    /* clear the elbow */
  }

  /* Don’t flatten details; keep children as a real block so borders render */
  body.menu-open .branch details[open]>.children {
    display: block;
  }

  body.menu-open .menu-toggle {
    text-decoration: line-through;
    border-color: transparent;
  }

  /* 4) Content area: full width and not under header */
  #main {
    width: 100%;
    margin: 0;
    padding-top: 4rem;
  }

  .h2-row .h2-meta,
  .h2-row h2 {
    width: 100%;
    text-align: left;
  }

  .h2-row h2 {
    margin-bottom: 0rem;
  }

  .h2-row .h2-meta .h2-year {
    width: auto;
    text-align: left;
  }
}



/*-----------------------------------------------------------
   CRT stuff
----------------------------------------------------------- */
body {

  /* vertical softness “unfocus” (approx) */
  text-shadow:
    0 0.15px rgba(180, 180, 180, .20),
    0 0.30px rgba(180, 180, 180, .15),
    0 0.45px rgba(180, 180, 180, .10),
    0 0.60px rgba(180, 180, 180, .06);


}

body .blur-fx {
  /* slight halo/bloom */
  filter: drop-shadow(0 0 0.6px rgba(180, 180, 180, .25));
}

/* scanline overlay */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483647;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(to bottom,
      rgba(180, 180, 180, .10) 0 1px,
      transparent 1px 3px);
}

.fringe {
  position: relative;
}

.fringe::before,
.fringe::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  background: inherit;
  /* if wrapping text, use duplicate element instead */
  filter: hue-rotate(200deg);
  opacity: .25;
  transform: translateX(0.2px);
}

.fringe::after {
  filter: hue-rotate(320deg);
  transform: translateX(-0.2px);
}


/* -----------------------------------------------------------
   Home
----------------------------------------------------------- */

.home,
.workitems {
  display: grid;
  grid-template-columns: 2fr 5fr 1fr 1fr;
  column-gap: 1rem;
  row-gap: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.home-bottomtext {
  margin-top: 2rem;
  margin-bottom: 4rem;
  width: 100%;
  padding: 1rem;
}

.workitems {
  grid-template-columns: 5fr 2fr 1fr 1fr;
}

/* Each article participates in the parent columns */
.homeitem,
.workitem {
  display: grid;
  grid-column: 1 / -1;
  /* span full width of the parent grid */
  grid-template-columns: subgrid;
  /* reuse parent’s 5 columns */
  align-items: center;
  border-bottom: 0.2rem solid var(--console-color);
  height: 20rem;
  padding: 1rem 1rem 0 1rem;
}

.workitem {
  height: 13rem;
}

.homeitem video,
.homeitem img {
  filter: grayscale(1) brightness(0.95);
  width: auto;
}

.homeitem:hover video,
.homeitem:hover img {
  filter: none;
  background: var(--console-bg);
}

.homeitem .item__title {
  grid-column: 1;
  margin: 0.25rem 0 0;
}

.homeitem .item__media {
  grid-column: 2;
  max-width: 100%;
}

.homeitem .item__cat {
  grid-column: 3;
  margin: 0.25rem 0 0;
  color: var(--console-color-dim);
}

.homeitem .item__meta {
  grid-column: 4;
  margin: 0.25rem 0 0;
  color: var(--console-color-dim);
  text-align: right;
}


.workitem .item__media {
  grid-column: 1;
  max-width: 100%;
}

.workitem .item__title {
  grid-column: 2;
}

.workitem .item__cat {
  grid-column: 3;
  margin: 0.25rem 0 0;
  color: var(--console-color-dim);
}

.workitem .item__meta {
  grid-column: 4;
  margin: 0.25rem 0 0;
  color: var(--console-color-dim);
  text-align: right;
}

.homeitem .item__title.no-media {
  grid-column: 1 / span 2;
}

.workitem .item__title.no-media {
  grid-column: 1 / span 2;
}

.homeitem .item__media img,
.homeitem .item__media video {
  max-height: 18rem;
}

.workitem .item__media img,
.workitem .item__media video {
  max-height: 8rem;
}

@media (max-width: 800px) {

  .home,
  .workitems {
    grid-template-columns: 1fr;

    /* add some rows */
    grid-auto-rows: auto;
    row-gap: 2rem;

  }

  .homeitem,
  .workitem {
    grid-template-columns: subgrid;
    height: auto;
  }

  .homeitem .item__media,
  .workitem .item__media {
    grid-row: 1;
  }

  .homeitem .item__title,
  .workitem .item__title {
    grid-row: 2;
  }

  /* merge cat + meta */
  .homeitem .item__cat,
  .workitem .item__cat {
    grid-column: 1;
    grid-row: 3;
    text-align: left;
    margin-top: 0.5rem;
  }

  .homeitem .item__meta,
  .workitem .item__meta {
    grid-column: 1;
    grid-row: 3;
    text-align: right;
    margin-top: 0.5rem;
  }

}

/* -----------------------------------------------------------
   News
----------------------------------------------------------- */

.newsitem {
  border-bottom: 0.2rem solid var(--console-color);
  padding: 1rem 0;
  margin: 0 0 1rem 0;
  display: grid;
  grid-template-columns: 0.5fr 1.5fr 6fr 2fr;
  align-items: baseline;
}

.newsitem .item__meta,
.newsitem .item__cat {
  color: var(--console-color-dim);
  padding-right: 1rem;
}

.newsitem .item__title {
  padding-right: 1rem;
}

.newsitem .item__media img,
.newsitem .item__media video {
  max-height: 17rem;
  max-width: calc(var(--main-width)/5);
  aspect-ratio: auto;
  width: auto;
}

@media (max-width: 800px) {
  .newsitem {
    grid-template-columns: 1fr;
  }

  .newsitem .item__meta {
    text-align: left;
    margin-top: 0.5rem;
  }
}

/* -----------------------------------------------------------
   Video players
----------------------------------------------------------- */


figure {
  padding: 0;
  display: inline-block;
  margin: 0 1rem 1rem 0;
}

.ratio43 {
  aspect-ratio: 4/3;
}

.ratio169 {
  aspect-ratio: 16/9;
}

.ratio239 {
  aspect-ratio: 2.39/1;
}

.ratio11 {
  aspect-ratio: 1/1;
}

.ratio916 {
  aspect-ratio: 9/16;
}

figure img {
  max-width: 40vw;
  max-height: 70vh;
}

figure a {
  color: var(--console-bright);
}



.video_playbutton {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: transparent;
}

.video_playbutton:hover {
  animation: none;
  background: none;
}

.video_playbutton span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
}

.video_playbutton:hover span {
  background-color: var(--console-bg-blue);
  color: var(--console-bg);
}

.vimeo-fullscreen-button {
  width: 6%;
  font-size: 0.8rem;
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  height: 1rem;
  line-height: 0.8rem;
  z-index: 41;
}

.embed-container .progress_bar {
  border: 0.5rem solid var(--console-bg-box);
  border-top-width: 0;
  height: 1rem;
  cursor: url('i/cursor-pointer.gif') 10 0, auto;
  position: relative;
}

.embed-container .playhead {
  background-color: var(--console-bg-box);
  float: left;
  position: absolute;
  font-size: 0.8rem;
}

.embed-container {
  opacity: 1;
  z-index: 40;
  position: relative;
  margin-bottom: 2rem;
}

.embed-container iframe,
.embed-container video {
  display: block;
  cursor: url('i/cursor-pointer.gif') 10 0, auto;
  max-width: 1000px;
}

.embed-container>video {
  pointer-events: auto;
}

.embed-container.ratio43 iframe,
.embed-container.ratio43 video {
  width: calc(var(--main-width)*0.90);
  aspect-ratio: 4/3;
  max-width: 1000px;
}

.embed-container.ratio169 iframe,
.embed-container.ratio169 video {
  width: var(--main-width);
  aspect-ratio: 16/9;
  max-width: 1000px;
}

.embed-container.ratio239 iframe,
.embed-container.ratio239 video {
  width: var(--main-width);
  aspect-ratio: 2.39/1;
  max-width: 1400px;
}

.embed-container.ratio11 iframe,
.embed-container.ratio11 video {
  width: calc(var(--main-width)*0.80);
  aspect-ratio: 1/1;
  max-width: 900px;
}

.embed-container.ratio916 iframe,
.embed-container.ratio916 video {
  width: calc(var(--main-width)*0.6);
  aspect-ratio: 9/16;
  max-width: 800px;
}

figure.embed-container.c2 {
  width: calc(var(--main-width) / 2 - 2rem);
  max-height: 60vh;
}

figure.embed-container.c2 video {
  width: calc(var(--main-width) / 2 - 2rem);
}

figure.embed-container.c3 {
  width: calc(var(--main-width) / 3 - 4rem);
  max-height: 50vh;
}

figure.embed-container.c3 video {
  width: calc(var(--main-width) / 3 - 4rem);
}


/*
For the gallery views, we will use a figure with img/video inside
this should be a grid with 1-6 columns, depending on the subclass (c1 to c6)
*/
.gallery {
  display: grid;
  gap: 1rem;
  margin: 0 0 2rem 0;
}

.gallery.c1 {
  grid-template-columns: repeat(1, 1fr);
}

.gallery.c2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery.c3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery.c4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery.c5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery.c6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery img {
  width: 100%;
}

.gallery img:hover {
  cursor: url('i/cursor-zoom.gif'), auto;
}


/* Make the gallery video wrapper a positioned container */
.gallery .gallery-player {
  position: relative;
  display: inline-block;
  /* or block; either is fine as long as it wraps the video */
}

/* Ensure the overlay fills the wrapper and centers its label */
.gallery .gallery-player .video_playbutton {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

/* Center the text inside */
.gallery .gallery-player .video_playbutton span {
  position: static;
  /* override global absolute */
  transform: none;
  /* not needed when using flex centering */
  width: auto;
}

/* Gallery Vimeo: make players fluid inside grid cells */
.gallery-vimeo .embed-container {
  margin: 0;
}

.gallery-vimeo .embed-container iframe,
.gallery-vimeo .embed-container video {
  width: 100%;
  max-width: none;
  /* override global cap */
}

.gallery-vimeo .embed-container.ratio43,
.gallery-vimeo .embed-container.ratio169,
.gallery-vimeo .embed-container.ratio239,
.gallery-vimeo .embed-container.ratio11,
.gallery-vimeo .embed-container.ratio916 {
  width: 100%;
  max-width: none;
}

/* Normalize children inside the grid */
.gallery-vimeo>* {
  margin: 0;
  display: block;
}

/* for mobile? */
@media (max-width: 800px) {

  figure img {
    max-width: 100%;
    height: auto;
    max-height: 90vh;
    width: auto;
  }

  figure.embed-container {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0 0 2rem 0;
    /* keep only bottom margin */
  }

  .gallery.c1,
  .gallery.c2,
  .gallery.c3,
  .gallery.c4,
  .gallery.c5,
  .gallery.c6 {
    grid-template-columns: 1fr;
    width: 100%;
    max-height: none;
  }

  .gallery img:hover {
    cursor: auto;
  }

  .embed-container .video_playbutton,
  .embed-container.ratio169 video,
  .embed-container.ratio239 video,
  .embed-container.ratio43 video,
  .embed-container.ratio11 video,
  .embed-container.ratio916 video,
  .embed-container .vimeoplayer {
    width: 100%;
  }

  .embed-container.ratio169 iframe,
  .embed-container.ratio239 iframe,
  .embed-container.ratio43 iframe,
  .embed-container.ratio11 iframe,
  .embed-container.ratio916 iframe {
    width: 100%;
    max-width: none;
  }

  .embed-container .vimeoplayer {
    width: 100%;
  }

  .embed-container iframe {
    max-width: none;
    width: 100%;
  }

  .newsitem .item__media img,
  .newsitem .item__media video {
    max-width: 100%;
    max-height: 40vh;
  }

}


.enhancedcontainer {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  cursor: url('i/cursor-move.gif') 28 28, grab;
  max-width: 90vw;
  max-height: 90vh;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  touch-action: none;
  border: 1rem solid var(--console-bg);
  box-shadow: 0 0 100vw var(--console-bg-dim);
}

.enhancedcontainer:active {
  cursor: grabbing;
}

.enhancedcontainer img,
.enhancedcontainer video {
  max-width: 90vw;
  max-height: 80vh;
  height: auto;
  width: auto;
  display: block;
  pointer-events: none;
}

.enhancedcontainer .info {
  padding: .2rem;
  color: var(--console-color);
  background-color: var(--console-bg);
  text-align: center;
  overflow-wrap: anywhere;
  /* break long words/URLs */
  word-break: break-word;
  width: 100%;
}

.enhanced-loading {
  padding: .4rem .6rem;
  background: var(--console-bg);
  color: var(--console-color);
  font: inherit;
  line-height: 1.1;
  border-radius: 0;
  width: 100%;
}

.enhanced-close {
  position: absolute;
  top: 0;
  right: 0;
  line-height: 1;
  font: inherit;
  background: var(--console-color);
  color: var(--console-bright);
  border: 0;
  padding: .25rem .5rem;
}

.enhanced-close:focus-visible,
.enhanced-close:hover {
  background: var(--console-bg-blue);
  color: var(--console-bg);
}