feat: add gallery lighting controls

src/index.css

@@ -169,6 +169,107 @@ canvas {
   color: rgba(226, 232, 240, 0.72);
 }
 
+.gallery-light-panel {
+  position: absolute;
+  top: 108px;
+  right: 0;
+  z-index: 3;
+  display: flex;
+  align-items: flex-start;
+  transform: translateX(260px);
+  transition: transform 180ms ease;
+}
+
+.gallery-light-panel.is-open {
+  transform: translateX(0);
+}
+
+.gallery-light-panel-toggle {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 42px;
+  border: 1px solid rgba(248, 250, 252, 0.14);
+  border-right: 0;
+  border-radius: 999px 0 0 999px;
+  background: rgba(3, 7, 18, 0.68);
+  color: rgba(248, 250, 252, 0.84);
+  cursor: pointer;
+  backdrop-filter: blur(14px);
+}
+
+.gallery-light-panel-toggle:hover,
+.gallery-light-panel-toggle:focus-visible {
+  color: #f8fafc;
+  outline: none;
+}
+
+.gallery-light-panel-content {
+  width: 236px;
+  padding: 16px;
+  border: 1px solid rgba(248, 250, 252, 0.14);
+  border-right: 0;
+  border-radius: 18px 0 0 18px;
+  background: rgba(3, 7, 18, 0.72);
+  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
+  backdrop-filter: blur(18px);
+}
+
+.gallery-light-panel-content header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.gallery-light-panel-content header span {
+  color: rgba(248, 250, 252, 0.86);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.18em;
+}
+
+.gallery-light-panel-content header button {
+  border: 0;
+  background: transparent;
+  color: rgba(203, 213, 225, 0.72);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.gallery-light-panel-content header button:hover,
+.gallery-light-panel-content header button:focus-visible {
+  color: #f8fafc;
+  outline: none;
+}
+
+.gallery-light-control {
+  display: grid;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.gallery-light-control span {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: rgba(226, 232, 240, 0.78);
+  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.gallery-light-control strong {
+  color: rgba(248, 250, 252, 0.88);
+  font-variant-numeric: tabular-nums;
+}
+
+.gallery-light-control input {
+  width: 100%;
+  accent-color: #dbeafe;
+}
+
 @media (max-width: 720px) {
   .gallery-title {
     right: 50%;
@@ -196,6 +297,10 @@ canvas {
     left: auto;
     transform: translateX(50%);
   }
+
+  .gallery-light-panel {
+    top: 78px;
+  }
 }
 
 /* Docs layout */