html { height: 100%; overflow: hidden; }

body[data-project-shell][data-static-project] {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body[data-static-project] > .project-heading {
  box-sizing: border-box;
  height: 62px;
  margin: 0;
}

body[data-static-project] #cols {
  overflow: hidden;
}

body[data-static-project] #left {
  flex: 1 1 62%;
  min-width: 0;
  overflow: hidden;
}

body[data-static-project] #right {
  flex: 1 1 38%;
  min-width: 0;
}

.material-stage {
  position: relative;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid #202328;
  background: radial-gradient(circle at 50% 36%, #363a40 0, #202328 48%, #111316 100%);
  isolation: isolate;
}

.material-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 3%;
  right: 3%;
  bottom: -24%;
  height: 68%;
  background: radial-gradient(ellipse at 50% 25%, rgba(120, 128, 140, 0.33), rgba(44, 49, 57, 0.18) 42%, rgba(14, 16, 19, 0) 74%);
  transform: perspective(420px) rotateX(64deg);
  transform-origin: 50% 100%;
  pointer-events: none;
}

.material-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 25%;
  right: 25%;
  top: 67%;
  height: 12%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.24) 45%, transparent 74%);
  filter: blur(8px);
  pointer-events: none;
}

#material-viewer {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: grab;
  touch-action: none;
  overscroll-behavior: contain;
  outline: 0;
}

#material-viewer:active { cursor: grabbing; }

#material-viewer:focus-visible {
  box-shadow: inset 0 0 0 2px #b9d6ff;
}

.light-pad {
  position: absolute;
  z-index: 3;
  left: 11px;
  bottom: 10px;
  width: 96px;
  padding: 17px 6px 6px;
  border: 1px solid rgba(190, 204, 222, 0.36);
  background: rgba(8, 10, 13, 0.68);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  user-select: none;
}

.light-pad-label {
  position: absolute;
  top: 3px;
  left: 6px;
  color: #d8e9ff;
  font: 9px/1 Consolas, "Courier New", monospace;
  letter-spacing: 0.14em;
}

.light-track {
  position: relative;
  height: 54px;
  overflow: hidden;
  border: 1px solid rgba(190, 204, 222, 0.28);
  background:
    linear-gradient(rgba(180, 198, 218, 0.13) 1px, transparent 1px) 0 0 / 100% 50%,
    linear-gradient(90deg, rgba(180, 198, 218, 0.13) 1px, transparent 1px) 0 0 / 50% 100%,
    radial-gradient(circle at 50% 50%, rgba(113, 133, 158, 0.24), rgba(15, 18, 23, 0.45));
  cursor: crosshair;
  touch-action: none;
}

.light-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid #fff3bf;
  border-radius: 50%;
  background: #ffd866;
  box-shadow: 0 0 5px #fff3bf, 0 0 12px rgba(255, 205, 84, 0.9);
  cursor: grab;
}

.light-handle:active { cursor: grabbing; }
.light-handle:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 3px;
}

.viewer-caption {
  position: absolute;
  z-index: 2;
  top: 11px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #d8e9ff;
  font: 10.5px/1.3 Consolas, "Courier New", monospace;
  letter-spacing: 0.12em;
  text-shadow: 0 0 6px #000, 0 0 2px #000;
  pointer-events: none;
}

.viewer-caption span:first-child {
  overflow: hidden;
  color: #fff;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer-hint,
.viewer-status {
  position: absolute;
  z-index: 2;
  bottom: 9px;
  margin: 0;
  color: #adb0b5;
  font: 10px/1.3 Consolas, "Courier New", monospace;
  letter-spacing: 0.04em;
  text-shadow: 0 0 5px #000;
  pointer-events: none;
}

.viewer-hint { right: 11px; }
.viewer-status {
  right: 11px;
  left: 126px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viewer-status.good { opacity: 0; }
.viewer-status.bad { color: #ffd9a8; opacity: 1; }

.material-fallback {
  position: absolute;
  z-index: 1;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 8%;
  object-fit: contain;
  background: transparent;
}

.material-fallback[hidden] { display: none; }
.material-stage.no-webgl #material-viewer,
.material-stage.map-error #material-viewer { display: none; }
.material-stage.no-webgl .light-pad,
.material-stage.map-error .light-pad { display: none; }

.preset-scroll {
  max-height: 540px;
  overflow: auto;
  overscroll-behavior: contain;
}

.preset-scroll .preset-list { margin-bottom: 0; }
table.extable.preset-list { table-layout: auto; }
table.extable.preset-list th:first-child,
table.extable.preset-list td:first-child {
  width: 38%;
  white-space: normal;
  font-weight: bold;
}

table.extable.preset-list th:last-child,
table.extable.preset-list td:last-child {
  width: auto;
  overflow-wrap: anywhere;
  color: #555;
  white-space: normal;
}

.preset-list tr.on td { background: #eaf2ff; }

.preset-name {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0000cc;
  font: inherit;
  font-weight: bold;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.preset-name:hover { color: #cc0000; }
.preset-name:focus-visible {
  outline: 1px dotted currentColor;
  outline-offset: 2px;
}

.code-link {
  overflow-wrap: anywhere;
  font-family: Consolas, "Courier New", monospace;
}

@media (max-width: 780px) {
  body[data-static-project] > .project-heading {
    height: var(--mobile-heading-height);
    margin: 0;
  }

  body[data-static-project] #left .material-stage {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }

  body[data-static-project] .preset-scroll {
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 480px) {
  .viewer-caption {
    display: block;
  }

  .viewer-caption span { display: block; }
  .viewer-hint { display: none; }
  .viewer-status { left: 11px; bottom: 92px; }
}