@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

html {
  color-scheme: light;
}

#custom-popup-inner {
  background-color: #ffffff !important;
  color: #000000 !important;
}

#wheel-container img,
#wheel-container svg,
#wheel-container canvas {
  filter: none !important;
  mix-blend-mode: normal !important;
}


html, body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  color: #fff;
  background-image: url('/images/back.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  min-height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  font-family: 'Oxanium', Arial, sans-serif;
}

/* This is now your “default text size” knob */
body {
  font-family: 'Oxanium', Arial, sans-serif;
  font-weight: 400;
  font-size: 4.5rem;   /* same visual size as before; change THIS in the future */
  line-height: 1.65;
}


*, *::before, *::after { box-sizing: border-box; }

:root {
  --wheel-size: clamp(280px, 72vmin, 500px);
  --sidebar-width: 240px;
  --nav-height: 250px;
  --maincontent-margin: 28px;
  --sidepanel-shift-down: 0px;
  --neon-border-radius: 14px;
}

/* --- Layout --- */
#wheel-box {
  position: fixed;
  top: 0; left: 0;
  width: var(--wheel-size);
  height: var(--wheel-size);
  z-index: 100;
  background-size: cover;
}

#wheel-container, #wheel-container > svg, #wheel-container > canvas {
  width: 100%;
  height: 100%;
  display: block;
}

#top-nav {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: calc(var(--wheel-size));
  width: calc(100vw - var(--wheel-size));
  height: var(--nav-height);
  z-index: 50;
  background-image: url('/images/topback2.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;
  overflow: visible;
}

#sidebar {
  position: fixed;
  top: calc(var(--wheel-size) + 124px);
  left: 0;
  width: var(--wheel-size);
  height: calc(100vh - (var(--wheel-size) + 124px));
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding-top: 20px;
  background: transparent;
  z-index: 50;
}

#sidepanel-png-bg {
  width: 100%;
  background: url('/images/simplices.png') no-repeat center top;
  background-size: contain;
  background-position: center top;
  min-height: 0 !important;
  max-height: none !important;
}
#sidepanel-gif {
  display: block;
  width: 100%;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain;
  margin-top: 6px;
}
#sidepanel-graphic-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
#sidepanel-graphic-block img {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain;
}

#side-tabs {
 display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;          /* or whatever vertical spacing looks best */
  padding: 0 0 8px 0; /* or your original values */
}



#sidebar, #sidepanel-graphic-block, #sidepanel-png-bg, #sidepanel-gif {
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

#sidepanel-png-bg { background-color: rgba(255,0,0,0.2); }

#sidepanel-png-bg {
  border-bottom: 2px solid blue;
}
#sidepanel-gif {
  border-top: 2px solid green;
}

#sidepanel-gif {
  margin-top: -1.5px; /* Try -1px, -2px, or even -0.5px until the gap disappears */
}


/* --- MAIN CONTENT --- */
#main-content-container {
  position: absolute;
  top: var(--nav-height, 70px);
  left: calc(var(--wheel-size, 100px) + 100px);
  right: 0vw;
  min-width: 320px;
  height: calc(100vh - var(--nav-height, 70px) - var(--maincontent-margin));
  z-index: 50;
  box-sizing: border-box;
  padding: 3px 10px 0px 0px;
  overflow-y: visible;
}
#main-content {
  flex: 1;
  height: 100%;
  background: rgba(24, 28, 47, 0.18);  /* slightly more transparent */
  border-radius: 24px;
  box-shadow: 0 0 54px #00f2ff19;
  padding: 48px 64px;
  overflow-y: auto;
  z-index: 2;
  border: 3px solid #0ff;
  box-shadow:
    0 0 16px 4px #0ff,
    0 0 40px 12px #1dfff955;
    scroll-behavior: auto;
}

#main-content h1, #main-content h2 {
  font-family: 'Audiowide', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
#main-content h1 { font-size: 2.4em; margin-bottom: 0.33em; }
#main-content h2 { font-size: 2em; margin-top: 1.4em; margin-bottom: 0m; }

/* --- NEON TAB BUTTONS (Top Nav and Side Nav Unified) --- */

.tab-btn {
  position: relative;
  display: inline-block;
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 5.5vw, 70px);
  color: #fff;
  background: transparent;
  border-radius: 12px;
  padding: 10px 30px;
  margin-bottom: 0.8em;
  z-index: 3;
  box-shadow: 0 0 22px #04e0fc99;
  overflow: visible;
  cursor: pointer;
  transition: background 0.19s, color 0.19s, box-shadow 0.19s;
  flex-wrap: wrap;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 30px;            /* enough horizontal padding */
 }

.top-nav-label {
  position: relative;
  display: inline-block;    
  font-family: 'Inter', Arial, sans-serif;
  font-size: clamp(26px, 8vw, 85.5px);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: normal;     /* allow wrapping onto multiple lines */
  line-height: 1.2;
  max-width: 9.8em;        /* tune this: smaller ⇒ more likely to wrap */
  color: #fff;
  background: transparent;
  border-radius: 12px;
  padding: 10px 26px;
  margin-right: 1.1em;
  z-index: 1;
  overflow: visible;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  text-transform: none;
}

.top-nav-label.active, .top-nav-label:hover {
  background: linear-gradient(120deg, #0ff 60%, #19a3c6 100%);
  color: #181818;
  box-shadow: 0 2px 10px #0ff9;
}

/* Each line of text is a table-row */
.tab-btn .text-row {
  display: table-row;
}


/* Each word is a table-cell inside the row */
.tab-btn .rainbow-word {
  display: inline-block;        /* flex container for letters */
  flex-wrap: nowrap;           /* prevent breaking inside words */
  margin-right: 0.4em;         /* spacing between words */
  white-space: nowrap;         /* no breaking inside word */
}


/* Rainbow letter styling stays the same */
/* Rainbow letters: base style (no animation by default) */
.rainbow-letter {
  display: inline-block;
  text-shadow: 0 0 3px #fff8, 0 0 6px #ff21f7, 0 0 2px #00ffed;
}

/* Animate letters ONLY when their tab is active */
.top-nav-label.active .rainbow-letter,
.tab-btn.active .rainbow-letter {
  animation: letter-rainbow 2.8s linear infinite;
  animation-delay: calc(var(--i) * 0.18s);
}

/* Explicitly kill animation on inactive tabs */
.top-nav-label:not(.active) .rainbow-letter,
.tab-btn:not(.active) .rainbow-letter {
  animation: none;
}



/* Your existing letter-rainbow keyframes here */



.tab-btn::before {
  content: '';
  position: absolute;
  top: -8px; left: -8px; right: -8px; bottom: -8px; /* border thickness */
  border-radius: 20px; /* tab-btn radius + thickness */
  background: linear-gradient(
    90deg,
    #ff00ea 0%,
    #00f0ff 14%,
    #00ff6a 28%,
    #fff70a 42%,
    #ff8000 57%,
    #ff1ed1 71%,
    #ff00ea 85%,
    #00f0ff 100%
  );
  background-size: 350% 100%;
  animation: rainbow-border-move 8s linear infinite;
  z-index: -1;
}



@keyframes rainbow-border-move {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}



/* Black fill inside */
.tab-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 12px;
  background: #111;
  z-index: -1;
}



/* Inner fill (covers the center) */
.top-nav-label::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 12px;
  background: #111;
  z-index: -1;
}


@keyframes rainbow-border-move {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.top-nav-label:hover,
.top-nav-label.active {
  color: #fff;
  background: transparent; /* keep transparent, let ::after do the fill */
}


.rainbow-letter {
  display: inline-block;
  font-family: inherit;
  font-weight: inherit;
  animation: letter-rainbow 2.8s linear infinite;
  animation-delay: calc(var(--i) * 0.18s);
  /* Slight glow for cyberpunk look, optional: */
  text-shadow: 0 0 3px #fff8, 0 0 6px #ff21f7, 0 0 2px #00ffed;
}


@keyframes letter-rainbow {
  0%   { color: #ff00ea; }
  14%  { color: #00f0ff; }
  28%  { color: #00ff6a; }
  42%  { color: #fff70a; }
  57%  { color: #ff8000; }
  71%  { color: #ff1ed1; }
  85%  { color: #ff00ea; }
  100% { color: #00f0ff; }
}





/* --- Neon Blue Custom Scrollbar --- */
#main-content-container::-webkit-scrollbar {
  width: 10px;
  background: transparent;
}
#main-content-container::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #16ffe2 40%, #218ccf 80%);
  border-radius: 7px;
  border: 2px solid #111b;
}
#main-content-container::-webkit-scrollbar-thumb:hover {
  background: #16ffe2;
}
#main-content-container::-webkit-scrollbar-track,
#main-content-container::-webkit-scrollbar-corner {
  background: transparent;
}
#main-content {
  scrollbar-color: #16ffe2 #181818;
  scrollbar-width: thin;
}

#main-content {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #16ffe2 #181818;
}

/* Chrome, Edge, Safari */
#main-content::-webkit-scrollbar {
  width: 10px;
  background: transparent;
}
#main-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #16ffe2 40%, #218ccf 80%);
  border-radius: 7px;
  border: 2px solid #111b;
}
#main-content::-webkit-scrollbar-thumb:hover {
  background: #16ffe2;
}
#main-content::-webkit-scrollbar-track,
#main-content::-webkit-scrollbar-corner {
  background: transparent;
}

.scanline-container { display: inline-block; position: relative; background: #111; overflow: hidden; }
.scanline-img {
  display: block;
  margin: 24px auto;
  visibility: hidden;
  opacity:1
}
.scanline-overlay {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  background: #111;
  z-index: 2;
  pointer-events: none;
  transition: height 0s;
}

#main-content .crt-scan {
  pointer-events: none;
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  z-index: 20;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,255,255,0.06) 0px, 
    rgba(0,255,255,0.12) 2px,
    transparent 3px, 
    transparent 7px
  );
  box-shadow: 0 0 120px 44px #0ffb, 0 0 0px 0px #fff0;
  opacity: 0;
  animation: crt-scan-move 0.43s cubic-bezier(.52,-0.09,.78,.3);
}
@keyframes crt-scan-move {
  0%   { opacity: 1; transform: translateY(-100%);}
  40%  { opacity: 1; transform: translateY(8%);}
  85%  { opacity: 1; transform: translateY(96%);}
  100% { opacity: 0; transform: translateY(120%);}
}
.typewriter-cursor {
  display: inline-block;
  width: 1ch;
  color: #0ff;
  background: none;
  font-family: inherit;
  animation: blink-cursor 0.85s steps(1) infinite;
}
@keyframes blink-cursor {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0; }
}

#maincontent::-webkit-scrollbar-thumb {
  background: magenta !important;
}



.top-nav-label {
  cursor: pointer;  /* Make the cursor a hand/finger */
}

/* Animated rainbow border for top nav labels */
.top-nav-label::before {
  content: '';
  position: absolute;
  top: -8px; left: -8px; right: -8px; bottom: -8px;
  border-radius: 20px;
  background: linear-gradient(
    90deg,
    #ff00ea 0%,
    #00f0ff 14%,
    #00ff6a 28%,
    #fff70a 42%,
    #ff8000 57%,
    #ff1ed1 71%,
    #ff00ea 85%,
    #00f0ff 100%
  );
  background-size: 350% 100%;
  animation: rainbow-border-move 8s linear infinite;
  z-index: -1;
  pointer-events: none;
}

/* Inner solid black fill for top nav labels (you already have this, but here for clarity) */
.top-nav-label::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 12px;
  background: #111;
  z-index: -1;
  pointer-events: none;
}

a {
  color: #16ffe2;         /* bright neon blue */
  text-decoration: underline; /* or none, if you want */
  transition: color 0.2s;
}

a:hover, a:focus {
  color: #fff70a;         /* neon yellow on hover/focus */
}

a:visited {
  color: #fd6ed5;         /* neon pink for visited links, or repeat #16ffe2 if you don't want a difference */
}

a:visited:hover, a:visited:focus {
  color: #fff70a;
}


.popup-trigger {
  background: none;
  color: #16ffe2;                 /* Neon teal, matches links */
  border: none;
  font-size: 1em;
  padding: 2px 6px;
  text-decoration: underline;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: color 0.13s, background 0.13s;
}
.popup-trigger:hover, .popup-trigger:focus {
  color: #fff70a;                 /* Neon yellow on hover/focus */
  background: #23231525;          /* Subtle highlight if desired, else remove */
  outline: none;
}


.centered {
  display: flex;
  justify-content: center;
  align-items: center; /* Use only if you want vertical centering in a fixed-height container */
  width: 100%;
  /* Optional: margin for vertical spacing between images */
}


.photo-with-desc {
  display: flex;
  justify-content: center;
  align-items: flex-start;   /* For better vertical alignment with image top */
  gap: 0;
  margin: 0 auto;
  max-width: 1600px;          /* Adjust as needed */
}

.profile-photo {
  width: 220px;
  max-width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 18px;
  box-shadow: 0 2px 22px #000c;
}

.photo-desc {
  flex: 1;
  font-size: 0.8em;
  margin: 0 0 0 18px;
  padding: 8px 16px;
  background: #1e2346;
  color: #fff;
  border-radius: 8px;
  min-width: 120px;        /* NEW: Ensures desc doesn't get too tiny */
  box-sizing: border-box;
  word-break: break-word;  /* NEW: Ensures text doesn't overflow */
  overflow-wrap: anywhere; /* NEW: Ensures text doesn't overflow */
}
.photo-desc p {
  margin: 0;
  padding: 0;
}



.pop-link {
  color:#6e1015; /* your desired color */
}






.popup-paper-title {
   font-family: inherit;
  font-weight: 900;
  color: #222325;
  font-size: 5.8rem;
  letter-spacing: 0.025em;
  margin-bottom: 0.24em;
  text-align: center;
  line-height: 1.07;
  margin-bottom: 1.2em; 
}

.popup-abstract-label {
  font-family: inherit;
  font-weight: 900;
  color: #222325;
  font-size: 5.4rem;
  margin-bottom: 0.33em;
  margin-top: 0.12em;
  text-align: left;
  letter-spacing: 0.012em;
}

#custom-popup-overlay {
 
    top: 0; left: 0;
  position: fixed;
  width: 100vw; height: 100vh;
  z-index: 9999;
  background: rgba(25, 28, 44, 0.55);
  backdrop-filter: blur(3px);
  display: none;
}



    
#custom-popup-inner {
    position: fixed;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
    /* Keep the rest of your styles */
    background: rgba(255,255,255,0.8);
    box-shadow: 0 10px 60px 0 #22e5ff80, 0 1.5px 9px 0 #010521f0;
    border-radius: 20px;
    overflow-y: hidden;
    padding: 40px 32px 32px 32px;
    transition:
      width 0.32s cubic-bezier(.82,0,.18,1),
      height 0.32s cubic-bezier(.82,0,.18,1),
      left 0.32s cubic-bezier(.82,0,.18,1),
      top 0.32s cubic-bezier(.82,0,.18,1),
      border-radius 0.28s cubic-bezier(.82,0,.18,1),
      opacity 0.18s cubic-bezier(.82,0,.18,1),
      transform 0.20s cubic-bezier(.82,0,.18,1),
      box-shadow 0.20s cubic-bezier(.82,0,.18,1);
    color: #222;
    max-width: 96vw;
    max-height: 90vh;
    box-sizing: border-box;
}




    
#custom-popup-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #d32f2f;
  color: white;
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

#custom-popup-close:hover {
  background: #b71c1c;
}

/* Make the X use a pseudo-element for perfect centering */
#custom-popup-close::before {
  content: "✕";
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
}




  #custom-popup-body {
    margin-top: 48px;
overflow-y: auto;
  max-height: 70vh;
  padding: 28px 36px 28px 36px;
  box-sizing: border-box;
   /* Add these: */
    text-align: justify;
    text-justify: inter-word;  /* many browsers ignore this, but harmless */
}

    #custom-popup-body::-webkit-scrollbar { width: 9px; background: #1e222b; }
    #custom-popup-body::-webkit-scrollbar-thumb {
      background: #16ffe2; border-radius: 9px; border: 2px solid #1e222b;
    }
    #custom-popup-body::-webkit-scrollbar-thumb:hover { background: #15e3c7; }

    

    @keyframes popup-tune-in {
  0% {
    opacity: 0;
    transform: scale(0.97,1.03) skewY(-2deg);
    filter: brightness(1.2) blur(1.2px) hue-rotate(-90deg);
  }
  15% {
    opacity: 0.6;
    transform: scale(1.01,0.99) skewY(1deg);
    filter: brightness(1.15) blur(0.7px) hue-rotate(40deg);
  }
  30% {
    opacity: 0.8;
    transform: scale(0.99,1.01) skewY(-1deg);
    filter: brightness(1.1) blur(0.5px) hue-rotate(100deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.00,1.00) skewY(0deg);
    filter: brightness(1) blur(0.2px) hue-rotate(180deg);
  }
  70% {
    transform: scale(1.01,0.99) skewY(0.5deg);
    filter: blur(0.1px) hue-rotate(250deg);
  }
  85% {
    transform: scale(1.00,1.00) skewY(0deg);
    filter: blur(0px) hue-rotate(320deg);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes popup-tune-out {
  0% {
    opacity: 1;
    filter: none;
    transform: none;
  }
  80% {
    opacity: 0.6;
    filter: blur(0.6px) hue-rotate(100deg) brightness(1.15);
    transform: scale(1.04,0.96) skewY(-1deg);
  }
  100% {
    opacity: 0;
    filter: blur(2px) hue-rotate(-90deg) brightness(1.3);
    transform: scale(0.97,1.03) skewY(2deg);
  }
}

/* Smoother overlay color cycle */
@keyframes overlay-hue-cycle {
  0% { filter: hue-rotate(0deg); }
  25% { filter: hue-rotate(70deg);}
  50% { filter: hue-rotate(140deg);}
  75% { filter: hue-rotate(230deg);}
  100% { filter: hue-rotate(360deg);}
}

#custom-popup-inner.tune-in {
  animation: popup-tune-in 1s cubic-bezier(.86,0,.07,1) both;
}
#custom-popup-inner.tune-out {
  animation: popup-tune-out 400ms cubic-bezier(.7,0,.3,1) both;
}

#custom-popup-overlay.tune-in {
  animation: overlay-hue-cycle 1s linear both;
  /* If you want it to "hold" at end, leave both; if you want to reset, remove class at end */
}
#custom-popup-overlay.tune-out {
  animation: overlay-hue-cycle 400ms reverse both;
}

body.popup-open {
  overflow: hidden !important;
}

#custom-popup-overlay.wavy {
  filter: url(#wavy-distort);
  /* You can add backdrop-filter for more effect, but filter is key for the wave. */
  transition: filter 0.3s;
}

.scanline-img-outer.hide-at-load { display: none !important; visibility: hidden !important; }

/* Add space between links and button inside typewriter lists */
.typewriter li a,
.typewriter li .popup-trigger {
  margin-left: 0.65em;
}

.typewriter li a:first-child,
.typewriter li .popup-trigger:first-child {
  margin-left: 0;
}



.tv-flash-list {
  background: rgba(8,17,40,0.7);   /* dark blue, 92% opaque */
  border: 2px solid #ffe74c;
  box-shadow: 0 0 32px 8px #ffe74c99, 0 0 120px 30px #ffe74c44;
  border-radius: 18px 18px 16px 16px;
  padding: 1.5em 2em;
  margin: 2em auto;
  color: #fffbe6;
  position: relative;
  /* optional: frosted glass effect, only if desired */
  /* backdrop-filter: blur(1.5px); */
}

.tv-flash-list.ddg-card {
  list-style-type: none;
}


.tv-flash-list.tv-flash-active {
  background: #fffbe6 !important;
  border-color: #ffe74c !important;
  box-shadow: 0 0 80px 30px #ffe74c, 0 0 160px 100px #fffbe6;
  filter: brightness(2.7) saturate(1.8) blur(1.2px);
  color: #404000 !important;
  transition: none;
}

.ddg-title {
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.ddg-card p {
  font-size: 1.05em;       /* slightly larger than the surrounding text */
  line-height: 1.4;        /* improve readability */
  text-align: justify;     /* justify both left and right edges */
  text-justify: inter-word;/* let the browser distribute spaces between words */
}

/* Default top-level bullets (if you want them) */
.typewriter.tv-flash-list > li {
  list-style-type: disc;
}

/* Sublists with hollow circle bullets */
.sublist-circle {
  list-style-type: circle;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  margin-left: 1.5em; /* indent under the parent bullet */
}

/* Sublists with square bullets */
.sublist-square {
  list-style-type: square;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  margin-left: 1.5em;
}

/* Numbered roman sublists */
.sublist-roman {
  list-style-type: lower-roman;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  margin-left: 1.5em;
}


/* Prevent scroll chaining/elastic bounce from escaping the pane */
#main-content { overscroll-behavior: contain; }

/* --- Prevent simplex pictures from getting too small --- */
:root {
  /* Tune these floors to taste */
  --simplices-min-rem: 18rem;   /* scales with text size */
  --simplices-min-px: 280px;    /* absolute px floor */
}

/* Target the actual image IDs present in index.html */
#sidepanel-png-img,
#sidepanel-gif {
  width: 100%;
  height: auto;
  /* The max() here gives you a “typographic” floor (rem) and an absolute px floor. */
  min-width: max(var(--simplices-min-rem), var(--simplices-min-px));
  /* Safety: keep aspect ratio; these are already images not backgrounds */
  object-fit: contain;
}


#custom-popup-body .transv-title {
  font-family: 'Audiowide', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

/* Make the popup body roomy *only* when our graphic is shown */
#custom-popup-body.parabola-wide {
  width: min(96vw, 1400px);
  max-width: 96vw;
  max-height: 90vh;
  height: auto;
  /* keep your padding/border-radius as-is */
}

/* The mount fills the body; aspect keeps it from getting too tall */
#parabola-intersections-popup-mount {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  max-height: 86vh; /* ensures no scrollbar even with body padding */
  margin: 0 auto;
}
#parabola-intersections-popup-mount > svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Teaching history card + table */
.teaching-history-card {
  margin-top: 1.5em;
  /* tv-flash-list already gives background, border, glow, etc. */
}

.teaching-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

.teaching-history-table thead th {
  text-align: left;
  padding: 0.25em 0.9em 0.5em;
  border-bottom: 1px solid rgba(255, 231, 76, 0.7); /* matches tv-flash yellow */
  font-family: 'Audiowide', Arial, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.teaching-history-table tbody td {
  padding: 0.22em 0.9em 0.22em;
  vertical-align: top;
}

/* Subtle zebra striping for legibility on the dark card */
.teaching-history-table tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.02);
}

.teaching-history-table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.05);
}

/* Hover highlight with neon tint */
.teaching-history-table tbody tr:hover {
  background: rgba(22, 255, 226, 0.08);
}

.teaching-subtitle {
  font-family: 'Audiowide', Arial, sans-serif;
  font-size: 0.9em;           /* smaller than your main h2 */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.2em;
  margin-bottom: 0.4em;
  text-align: left;           /* change to center if you prefer */
  color: #ffe74c;             /* matches the neon yellow accent */
}

.teaching-subsubtitle {
  font-family: 'Audiowide', Arial, sans-serif;
  font-size: 1em;           /* smaller than your main h2 */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.2em;
  margin-bottom: 0.4em;
  text-align: center;           /* change to center if you prefer */
  color: #b6f542;             /* matches the neon yellow accent */
}


/* Inner container used for TV-style reveal */
.tv-flash-inner {
  width: 100%;
}

/* Stronger, color-shifting TV static overlay */
.tv-static-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* layered banded noise */
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.45) 0px,
      rgba(255, 255, 255, 0.45) 1px,
      rgba(0, 0, 0, 0.35) 1px,
      rgba(0, 0, 0, 0.35) 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 255, 255, 0.3) 0px,
      rgba(0, 255, 255, 0.3) 2px,
      rgba(255, 0, 255, 0.3) 2px,
      rgba(255, 0, 255, 0.3) 4px
    );

  opacity: 1;
  mix-blend-mode: screen;

  /* slightly choppy “focusing” effect */
  animation: tv-static-fade 0.55s steps(4, end) forwards;
}

@keyframes tv-static-fade {
  0% {
    opacity: 1;
    filter: hue-rotate(0deg) saturate(2.5) contrast(2.5) brightness(1.4) blur(0.8px);
  }
  30% {
    filter: hue-rotate(80deg) saturate(2.8) contrast(3.0) brightness(1.3) blur(0.6px);
  }
  60% {
    filter: hue-rotate(-60deg) saturate(2.2) contrast(2.4) brightness(1.2) blur(0.4px);
  }
  100% {
    opacity: 0;
    filter: hue-rotate(0deg) saturate(1) contrast(1) brightness(1) blur(0);
  }
}

.ddg-title {
  font-family: 'Audiowide', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 2.6em;
  margin-top: 0;
  margin-bottom: 0.6em;
}

.ddg-subtitle {
  font-family: 'Audiowide', Arial, sans-serif;
  font-size: 1.7em;
  margin-top: 1.4em;
  margin-bottom: 0.4em;
}
.neon-teal {
  color: #00FFF3;
}


/* =======================
   Mobile layout overrides
   ======================= */
@media (max-width: 900px) {
  html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  /* Make text sane on phones; your desktop CSS uses very large rems. */
  body {
    font-size: 18px;
  }

  /* Hide the desktop top ribbon on mobile (wheel remains the primary nav). */
  #top-nav {
    display: none !important;
  }

  /* Scale and center the wheel so the full circle is visible. */
  :root {
    --wheel-size: min(78vw, 320px);

    --tabs-bar-height: 96px;
  }


  /* Mobile: allow vertical scrolling if content still exceeds the viewport */
  html, body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Mobile: shrink the wheel navigation labels so they fit within the viewport */
  .top-nav-label {
    font-size: clamp(22px, 6.5vw, 38px);
    padding: clamp(6px, 1.6vw, 10px) clamp(14px, 3.6vw, 26px);
    border-width: 3px;
    max-width: 82vw;
  }



  #wheel-box {
    width: var(--wheel-size) !important;
    height: var(--wheel-size) !important;

    /* Center horizontally */
    left: 50% !important;
    transform: translateX(-50%) !important;

    /* Respect iOS safe area at the top */
    top: env(safe-area-inset-top) !important;
  }

  #wheel-container {
    width: 100% !important;
    height: 100% !important;
  }

  /* The desktop connector line is not meaningful on mobile. */
  #connector-svg {
    display: none !important;
  }

  /* Turn the sidebar into a horizontal “subtabs bar” beneath the wheel. */
  #sidebar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;

    top: calc(env(safe-area-inset-top) + var(--wheel-size) + 8px) !important;
    height: var(--tabs-bar-height) !important;

    padding: 8px 8px !important;
    border-radius: 0 !important;

    background: rgba(0,0,0,0.55) !important;
    overflow: hidden !important;
  }

  /* Hide the decorative side images on phones. */
  #sidepanel-gif,
  #sidepanel-png-img {
    display: none !important;
  }

  /* Make side-tabs scroll horizontally instead of stacking vertically. */
  #side-tabs {
    position: relative !important;
    top: 0 !important;
    height: 100% !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;

    padding: 0 4px !important;
    -webkit-overflow-scrolling: touch;
  }

  .tab-btn {
    flex: 0 0 auto !important;
    font-size: 1rem !important;
    height: 54px !important;
    padding: 10px 14px !important;
  }

  /* Put the main content full-width below wheel+tabs, with a real bottom bound. */
  #main-content-container {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;

    top: calc(env(safe-area-inset-top) + var(--wheel-size) + var(--tabs-bar-height) + 16px) !important;
    bottom: 0 !important;

    padding: 12px !important;
  }

  #main-content {
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
  }
}

/* Extra-small phones */
@media (max-width: 380px) {
  :root {
    --wheel-size: min(90vw, 320px);
    --tabs-bar-height: 92px;
  }
}