@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600&display=swap");

:root {
  font-family: "Manrope", sans-serif;
  color: #161616;
  background: #d9d8d3;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body, main {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body { background: #d9d8d3; }

canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

canvas:active { cursor: grabbing; }

header {
  position: fixed;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 30px;
  border-bottom: 1px solid rgba(22, 22, 22, 0.22);
  pointer-events: none;
}

.brand, .stage, .eyebrow, .status, .control-icon, button, .light-panel {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.brand {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}

.stage { color: rgba(22, 22, 22, 0.55); }

.intro {
  position: fixed;
  top: 104px;
  left: 30px;
  width: min(330px, calc(100vw - 60px));
  pointer-events: none;
}

.eyebrow {
  margin: 0 0 12px;
  color: rgba(22, 22, 22, 0.58);
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(32px, 4.2vw, 64px);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.lede {
  max-width: 310px;
  margin: 18px 0 0;
  color: rgba(22, 22, 22, 0.65);
  font-size: 13px;
  line-height: 1.55;
}

.light-panel {
  position: fixed;
  top: 104px;
  right: 30px;
  width: 302px;
  padding: 16px;
  color: rgba(22, 22, 22, 0.72);
  background: rgba(227, 226, 220, 0.76);
  border: 1px solid rgba(22, 22, 22, 0.22);
  backdrop-filter: blur(10px);
  max-height: calc(100vh - 132px);
  overflow: auto;
  transition: width 180ms ease;
}

.light-panel.projecting { width: 598px; }

.panel-heading, .light-panel label {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 12px;
}

.panel-heading {
  grid-template-columns: 1fr auto;
  margin-bottom: 16px;
  color: #161616;
}

.panel-heading output { color: rgba(22, 22, 22, 0.52); }

.function-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 7px;
  color: #161616;
}

.function-heading span:last-child {
  color: rgba(22, 22, 22, 0.45);
  font-size: 8px;
}

.function-heading i, .equation i { font-family: Georgia, serif; font-size: 13px; }

.map-row {
  display: flex;
  gap: 12px;
}

.map-column { width: 268px; }

.map-label {
  display: block;
  height: 16px;
  color: rgba(22, 22, 22, 0.62);
  font-size: 9px;
}

.map-label i { font-family: Georgia, serif; font-size: 13px; }

#function-sphere, #reconstruction-sphere {
  display: block;
  width: 268px;
  height: 156px;
  background: rgba(22, 22, 22, 0.045);
  border: 1px solid rgba(22, 22, 22, 0.14);
  cursor: grab;
  touch-action: none;
}

#function-sphere:active, #reconstruction-sphere:active { cursor: grabbing; }

.value-key {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 5px 7px;
  color: rgba(22, 22, 22, 0.5);
  background: linear-gradient(90deg, #252525, #aaa9a4 50%, #f1f0eb);
  font-size: 8px;
}

.value-key span:first-child { color: rgba(255, 255, 255, 0.72); }
.value-key span:nth-child(2) { text-align: center; }
.value-key span:last-child { text-align: right; }

.function-tabs, .workspace-tabs, .order-tabs, .shading-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: solid rgba(22, 22, 22, 0.18);
  border-width: 1px 1px 0;
}

.workspace-tabs { grid-template-columns: repeat(7, 1fr); }

.workspace-tabs button { font-size: 8px; }
.workspace-tabs { border-top: 0; border-bottom-width: 1px; }

.function-tabs button, .workspace-tabs button, .order-tabs button, .shading-tabs button {
  grid-column: auto;
  width: auto;
  margin: 0;
  padding: 8px 3px;
  border: 0;
  border-right: 1px solid rgba(22, 22, 22, 0.18);
  color: rgba(22, 22, 22, 0.48);
}

.function-tabs button:last-child, .workspace-tabs button:last-child, .order-tabs button:last-child, .shading-tabs button:last-child { border-right: 0; }
.function-tabs button.active, .workspace-tabs button.active, .order-tabs button.active, .shading-tabs button.active { color: #eeede8; background: #272727; }

.projecting .lower-controls {
  display: grid;
  grid-template-columns: 268px 268px;
  gap: 12px;
  margin-top: 10px;
}

.projecting .function-tabs { border-top-width: 1px; }

.projection-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #161616;
}

.projection-heading output { color: rgba(22, 22, 22, 0.5); }

.order-tabs { border-width: 1px; }

.scene-shading {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(22, 22, 22, 0.14);
}

.shading-tabs {
  grid-template-columns: repeat(3, 1fr);
  border-width: 1px;
}

.shading-tabs button { padding-inline: 1px; font-size: 8px; }

.scene-shading p {
  margin: 7px 0 0;
  color: rgba(22, 22, 22, 0.42);
  font-size: 7px;
  letter-spacing: 0.04em;
}

#probe-controls {
  grid-column: 1 / -1;
  padding: 4px 0 2px;
}

#showcase-controls { padding-top: 10px; }

.display-exposure {
  grid-template-columns: 76px 1fr auto !important;
  margin: 0 0 14px !important;
}

.display-exposure output { min-width: 54px; color: rgba(22, 22, 22, 0.5); text-align: right; font-variant-numeric: tabular-nums; }

.gi-controls {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(22, 22, 22, 0.14);
}

.gi-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(22, 22, 22, 0.18);
}

.gi-modes button {
  grid-column: auto;
  width: auto;
  margin: 0;
  padding: 8px 2px;
  color: rgba(22, 22, 22, 0.5);
  border: 0;
  border-right: 1px solid rgba(22, 22, 22, 0.18);
  font-size: 8px;
}

.gi-modes button:last-child { border-right: 0; }
.gi-modes button.active { color: #eeede8; background: #272727; }

.gi-intensity { grid-template-columns: 92px 1fr auto !important; margin: 10px 0 6px !important; }
.gi-intensity output { min-width: 36px; color: rgba(22, 22, 22, 0.5); text-align: right; font-variant-numeric: tabular-nums; }

.gi-progress {
  height: 2px;
  margin: 9px 0 7px;
  overflow: hidden;
  background: rgba(22, 22, 22, 0.12);
}

.gi-progress i { display: block; width: 0; height: 100%; background: #161616; transition: width 100ms linear; }
#bake-gi { margin-top: 2px; }

.pipeline-switches {
  display: grid;
  gap: 1px;
  background: rgba(22, 22, 22, 0.14);
  border: 1px solid rgba(22, 22, 22, 0.14);
}

.pipeline-switches label {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 7px;
  margin: 0;
  padding: 8px;
  color: #161616;
  background: rgba(235, 234, 228, 0.94);
}

.pipeline-switches input { width: 12px; height: 12px; margin: 0; accent-color: #161616; }
.pipeline-switches small { color: rgba(22, 22, 22, 0.42); font-size: 7px; }

.visibility-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 8px;
  border: 1px solid rgba(22, 22, 22, 0.18);
}

.visibility-type button {
  grid-column: auto;
  width: auto;
  margin: 0;
  padding: 8px 3px;
  color: rgba(22, 22, 22, 0.5);
  border: 0;
}

.visibility-type button:first-child { border-right: 1px solid rgba(22, 22, 22, 0.18); }
.visibility-type button.active { color: #eeede8; background: #272727; }

.lighting-controls {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(22, 22, 22, 0.14);
}

.lighting-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(22, 22, 22, 0.18);
}

.lighting-presets button {
  grid-column: auto;
  width: auto;
  margin: 0;
  padding: 8px 3px;
  color: rgba(22, 22, 22, 0.5);
  border: 0;
  border-right: 1px solid rgba(22, 22, 22, 0.18);
}

.lighting-presets button:last-child { border-right: 0; }
.lighting-presets button.active { color: #eeede8; background: #272727; }
.lighting-controls label { margin: 10px 0; }

#animate-light {
  margin-top: 2px;
  color: rgba(22, 22, 22, 0.62);
}

#animate-light.active { color: #161616; }

.light-rig-controls {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(22, 22, 22, 0.14);
}

.light-rig-controls label { margin: 8px 0; }
.light-rig-controls .light-enabled { grid-template-columns: 76px auto; justify-content: start; }
.light-enabled input { width: 12px; height: 12px; margin: 0; accent-color: #161616; }

.light-rig-controls select {
  width: 100%;
  padding: 4px 5px;
  color: #161616;
  font: inherit;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(22, 22, 22, 0.18);
  border-radius: 0;
}

.light-rig-controls input[type="color"] {
  width: 100%;
  height: 22px;
  padding: 1px;
  background: transparent;
  border: 1px solid rgba(22, 22, 22, 0.18);
}

.coefficient-readout {
  margin-top: 11px;
  border-top: 1px solid rgba(22, 22, 22, 0.14);
}

.coefficient-readout summary { padding: 9px 0 4px; cursor: pointer; }
.coefficient-readout pre { margin: 6px 0 0; color: rgba(22, 22, 22, 0.62); font: 8px/1.55 "DM Mono", monospace; white-space: pre-wrap; }

.object-values {
  padding-top: 5px;
  color: rgba(22, 22, 22, 0.48);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.probe-slider {
  grid-template-columns: auto 1fr auto !important;
  margin-top: 18px !important;
}

.probe-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 18px;
  margin: 3px 5px 14px;
}

.probe-track::before {
  position: absolute;
  right: 4px;
  left: 4px;
  height: 1px;
  background: rgba(22, 22, 22, 0.3);
  content: "";
}

.probe-track i, .probe-track b {
  z-index: 1;
  width: 9px;
  height: 9px;
  background: #e3e2dc;
  border: 1px solid #161616;
  border-radius: 50%;
}

.probe-track b {
  position: absolute;
  left: 50%;
  width: 13px;
  height: 13px;
  background: #161616;
  transform: translateX(-50%);
}

#probe-controls p {
  margin: 0;
  color: rgba(22, 22, 22, 0.58);
  font-family: "Manrope", sans-serif;
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0;
}

.probe-equation {
  margin-top: 14px;
  padding: 10px;
  text-align: center;
  background: rgba(22, 22, 22, 0.055);
  border: 1px solid rgba(22, 22, 22, 0.12);
}

.probe-equation i { font-family: Georgia, serif; font-size: 13px; }
.probe-equation sub, .probe-equation sup { font-size: 7px; }

.projected-coefficients {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 10px;
  background: rgba(22, 22, 22, 0.14);
  border: 1px solid rgba(22, 22, 22, 0.14);
}

.projected-coefficients span {
  display: flex;
  justify-content: space-between;
  padding: 7px 6px;
  color: rgba(22, 22, 22, 0.58);
  background: rgba(235, 234, 228, 0.94);
}

.projected-coefficients span.omitted { opacity: 0.32; }
.projected-coefficients output { color: #161616; font-variant-numeric: tabular-nums; }
.projected-coefficients sub { font-size: 7px; }

.basis-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: 10px;
  background: rgba(22, 22, 22, 0.14);
  border: 1px solid rgba(22, 22, 22, 0.14);
}

.basis-grid button {
  grid-column: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 35px;
  margin: 0;
  padding: 4px 2px;
  color: rgba(22, 22, 22, 0.64);
  background: rgba(235, 234, 228, 0.94);
  border: 0;
}

.basis-grid button[data-basis="0"] { grid-column: 3; }
.basis-grid button[data-basis="1"] { grid-column: 2; }
.basis-grid button.active { color: #eeede8; background: #272727; }
.basis-grid sub, .function-heading sub, .equation sub, #coefficient-value sub { font-size: 7px; }
.basis-grid small { margin-top: 2px; color: inherit; font-size: 7px; opacity: 0.58; }

.coefficient-control {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-top: 9px;
}

.coefficient-control label { grid-column: 1 / -1; }
.coefficient-control output { color: rgba(22, 22, 22, 0.58); }

#clear-coefficients {
  grid-column: auto;
  margin: 0;
  color: rgba(22, 22, 22, 0.62);
}

.function-note {
  min-height: 32px;
  margin: 10px 0 16px;
  color: rgba(22, 22, 22, 0.58);
  font-family: "Manrope", sans-serif;
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0;
}

.control-heading {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  color: #161616;
  border-top: 1px solid rgba(22, 22, 22, 0.14);
}

.light-panel label {
  margin: 12px 0;
  cursor: pointer;
}

input[type="range"] {
  width: 100%;
  height: 12px;
  margin: 0;
  accent-color: #161616;
  cursor: ew-resize;
}

.equation {
  margin: 18px -16px -16px;
  padding: 13px 16px;
  color: #161616;
  background: rgba(22, 22, 22, 0.06);
  border-top: 1px solid rgba(22, 22, 22, 0.16);
  letter-spacing: 0;
}

.controls {
  position: fixed;
  left: 30px;
  bottom: 28px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 9px 28px;
  font-size: 11px;
  color: rgba(22, 22, 22, 0.62);
}

.controls div { display: contents; }
.control-icon { color: #161616; }

button {
  grid-column: 1 / -1;
  width: max-content;
  margin-top: 7px;
  padding: 0 0 3px;
  color: #161616;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #161616;
  cursor: pointer;
}

.status {
  position: fixed;
  right: 30px;
  bottom: 28px;
  color: rgba(22, 22, 22, 0.52);
}

noscript {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
}

@media (min-width: 641px) and (max-width: 980px) {
  .intro { display: none; }
  .light-panel.projecting { right: 18px; }
}

@media (max-width: 640px) {
  header { padding: 18px; }
  .intro { top: 80px; left: 18px; width: calc(100vw - 36px); }
  .lede { width: 260px; font-size: 12px; }
  .intro .lede { display: none; }
  .light-panel { top: auto; right: 18px; bottom: 18px; width: min(302px, calc(100vw - 36px)); max-height: calc(100vh - 36px); }
  .light-panel.projecting { width: calc(100vw - 36px); }
  .projecting .map-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .projecting .map-column { width: auto; }
  #function-sphere, #reconstruction-sphere { width: 100%; height: 118px; }
  .projecting #function-sphere, .projecting #reconstruction-sphere { height: 96px; }
  .projecting .lower-controls { grid-template-columns: 1fr 1fr; gap: 8px; }
  .projected-coefficients { display: none; }
  .function-note { display: none; }
  .basis-grid button { min-height: 29px; }
  .light-panel label { margin: 7px 0; }
  .equation { display: none; }
  .controls { display: none; }
  .status { display: none; }
}