/* Separator */
.mm-sep1{ height:1px; background: var(--border-2);   max-width: 100%; margin: 1.5rem 0rem; }



/* Hover tooltip */
.mm-tooltip{
  background-color: #0d0d0de6;
  backdrop-filter: blur(50px);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 18px; 
  font-weight:600; 
  padding:7px 10px;

  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.3);

  opacity:0; 
  transform: translate(12px,12px);
  font-family: 'Radley';
  position: fixed; 
  pointer-events:none;
}
.mm-tooltip.show{ opacity:0.9; }





.window {
  position: relative;
  flex-grow: 1;
  overflow: hidden;
  background-image: radial-gradient(#060606 10%, #030303 35%, #000000 100%);
  border: none;
  display: flex; 
  align-items: center; 
  justify-content: center;
  border-radius: 14px;
  border: 1px solid var(--border-1);

}

.canvas-layer {
  position: absolute;
  inset: 0;
  z-index: 0; 
}
.ui-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  pointer-events: none; /* Let clicks pass to 3D model */
}
.ui-safe-zone {
  flex-grow: 1;
  flex-basis: 0; /* Tells it to start at 0 and fill only available space */
  position: relative;
  height: 100%; 
}
:root{
  --panel-gap: 10px; /* space between the glass panel and the window edge */
  --panel-w-clamped: clamp(var(--panel-min), var(--panel-w, 27vw), var(--panel-max));
}

.ui-safe-zone{
  transition: margin-right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ui-layer.has-panel:not(.panel-closed) .ui-safe-zone{
  margin-right: calc(var(--panel-w-clamped) + var(--panel-gap));
}
body.panel-resizing .ui-safe-zone{ transition: none; }

/* Full-window overlays still cover the panel area */
.ui-layer.has-panel:not(.panel-closed) .ui-safe-zone > .instruction-overlay,
.ui-layer.has-panel:not(.panel-closed) .ui-safe-zone > .model-loader{
  width: auto;
  right: calc(-1 * (var(--panel-w-clamped) + var(--panel-gap)));
}

.ui-layer .panel{
  position: absolute;
  top: var(--panel-gap);
  right: var(--panel-gap);
  bottom: var(--panel-gap);
  height: auto;
  margin: 0;
  width: var(--panel-w-clamped);
  min-width: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  z-index: 1;

  border: 1px solid #ffffff14;
  background-color: rgba(23, 23, 23, 0.707);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(40px) saturate(140%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);

  /* Re-theme the panel's text for the dark glass */
  --big-text: #f3f1ec;
  --lil-text: #ebeae8;
  --tiny-text: #9b9b99;
  --border-2: #ffffff1a;
  --link-2: #5cb4ff;
  --link-sel: #5cb4ff;

  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease,
              visibility 0s linear 0s;
}
.ui-layer.panel-closed .panel{
  transform: translateX(calc(100% + var(--panel-gap) + 4px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease 0.1s,
              visibility 0s linear 0.35s;
}
.ui-layer .panel .panel-content{
  min-height: 0;
  scrollbar-color: #ffffff30 transparent;
}
.ui-layer .panel .panel-section p a:hover{ color: #9fd3ff; }

/* Resize line follows the rounded edge instead of running corner to corner */
.ui-layer .panel .panel-resize-handle::after{
  top: 12px;
  height: calc(100% - 24px);
  border-radius: 1px;
}

/* Function tags, tuned for a dark background */
.ui-layer .panel .function-badge--emotional{ background-color: #ff4d8b34; color: #ff8aad; border: 1px solid #e68ba924; }
.ui-layer .panel .function-badge--motor    { background-color: #6fd04a24; color: #afc591; border: 1px solid #bce58e18;}
.ui-layer .panel .function-badge--cognitive{ background-color: #f5b73a2b; color: #dbbb82; border: 1px solid #eecc8e16;}
.ui-layer .panel .function-badge--sensory  { background-color: #4ea4ff2d; color: #85cdfd; border: 1px solid #7cacf321;}

.ui-layer .panel .empty-note{ color: #8a8a90 !important; }
.instruction-overlay,
.model-controls,
.panel {
  pointer-events: auto;
}


.model-loader {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.629);
  backdrop-filter: blur(40px);
  display: flex;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  z-index: 150; /* Above the instruction overlay (100) so they never show at once */
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.6s ease;
}

.model-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.model-loader-content {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.model-loader-track {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background-color: #ffffff26;
  overflow: hidden;
}

.model-loader-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background-color: var(--link-2);
  transition: width 0.2s ease;
}

.model-loader-status {
  text-align: left;
  font-size: 12px;
  font-family: monospace;
  font-weight: 500;
  color: var(--lil-text);
  letter-spacing: 0.2px;
}




.what{
  color: var(--tiny-text);
  padding-top:10px;
  font-size: 11.5px;
  font-weight: 500;
  padding-left:8px;
  display: flex;
  align-items: center;
  gap: 10px;

}
.what a{
  color: var(--tiny-text);
  text-decoration: none;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.what a:hover{
  color: var(--big-text);
}
.what svg{
  height: 14px;
  width: auto;
  margin-top: -0.5px;
}

.viewer {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 10px;
  border: 0px solid #d3d3d6;
  background-color: var(--color2);
}

.viewer-frame {
  position: relative;
  width: 100%;
  min-height: calc(var(--main-height) - (42px));
  max-height: calc(var(--main-height) - (42px));
  display: flex;
  overflow: hidden;
  border: none;
}



/* --- Footer Layout --- */
.site-footer {
  display: flex;
  gap: 3rem;
  padding: 3rem 6rem 2rem 6rem;
  margin-top: 7rem;
  background-color: var(--page);
  border-top: 1px solid var(--border-1);
  border-bottom: 14px solid var(--border-1);
  align-items: flex-start;
}


.footer-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top:4px;
}
.footer-links  svg{
  color: #fff;
}
.footer-links {
  display: flex;
  gap: 4rem;
}

.footer-links a {
  display: flex;
  align-items: center;
  gap: 8px;

  text-decoration: none;
  color: var(--big-text);
  font-weight: 700;
  font-size: 13px;
}

.footer-links a:hover {
 color: #00aeff;
}



/* --- Divider --- */
.footer-divider {
  border: none;
  border-top: 1px solid var(--border-1); 
  margin: 10px 0 14px 0px;
}

.footer-credits-text {
  font-size: 12px;
  color: var(--lil-text);
  line-height: 1;
  text-align: left;
  margin: auto;
  padding-bottom: 6px;
}

.footer-credits-text p {
  margin-bottom: 1rem;
}

.footer-credits-text p:last-child {
  margin-bottom: 0;
}

.footer-credits-text a {
  text-decoration: none;
    color: var(--link-2);
}

.footer-credits-text a:hover {
  text-decoration: underline;
  color: #00c4fa;
}
  .footer-credits-text .self-ref-link{
    color: var(--link-2);
  }



  .return-model-btn a {
    font-size: 12px;
    font-weight: 500;
    align-items: center;
  }

.references{
  color: var(--lil-text);
  margin: auto;
  padding: 0 17vw;
  padding-top: 3rem;
}
.references p{
  margin-bottom: 12px;
  line-height: 1.6;
  align-items: center;
  font-weight: 440;
  font-size: 14px;
  display: flex;
  color: var(--lil-text);
}

.references li{
  color: var(--lil-text);
  line-height: 1.4rem;
  font-size: 12px;
  margin-left: 2rem;
  margin-bottom: 10px;
  font-family: monospace;
}
.references a{
  color: var(--link-2);
  text-decoration: none;
}
.references p a{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.references a:hover{
  text-decoration: underline;
  align-items: center;
}
.references h3{
  font-size: 12px;
    font-weight: 500;
  color: var(--tiny-text);
  margin-bottom:12px;
  margin-top: 30px;
  }


.shoutsout h2{
    color: var(--big-text);
    font-weight: 620;
    font-size: 15px;
    margin-bottom: 12px;
  }

/* CREDIT-UNDER-WINDOW (start) — credit line sits just beneath the viewer.
   To undo: delete this block and move .credit-sec back into the sidebar in index.html. */
.viewer{ gap: 0; }
.viewer .viewer-frame{ height: calc(var(--main-height) - 24px); }
.viewer .credit-sec{
  padding: 3px 0 0 2px;
  line-height: 13px;
}
@media (max-width: 768px){
  .viewer .credit-sec{ position: static; height: auto; }
}
@media (max-width: 700px){
  .viewer .credit-sec{ display: none; } /* was hidden with the sidebar on mobile before */
}
/* CREDIT-UNDER-WINDOW (end) */