body.workshop { background: var(--paper); color: var(--ink); font: 15px/1.5 var(--mono); }
.workshop > header, .workshop > main, .gory > footer {
  width: auto; max-width: none; margin-inline: max(18px, 6.25vw);
}
.workshop > header { height: auto; padding: clamp(25px, 4vw, 53px) 0 24px; border-color: var(--ink); }
.workshop header h1 { font: 500 clamp(36px, 6vw, 82px)/.98 var(--mono); letter-spacing: -.075em; margin: 10px 0 11px; }
.workshop .eyebrow { color: var(--muted); font-size: 11px; letter-spacing: .12em; }
.workshop .subtitle, .workshop .intro p { color: var(--muted); font: 15px/1.5 system-ui, sans-serif; margin: 0; }
.workshop button, .workshop .upload {
  background: transparent; color: var(--ink); border: 1px solid var(--ink);
  border-radius: 7px; font: 13px/1.35 var(--mono); padding: 11px 13px; cursor: pointer;
}
.workshop button:not(:disabled):hover, .workshop button[aria-pressed=true], .workshop .upload {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.workshop button:disabled { opacity: .45; cursor: default; }
.workshop input[type=range] { accent-color: var(--ink); }
.workshop footer { color: var(--muted); }
.gory .layout { grid-template-columns: minmax(0, 1fr) clamp(235px, 22vw, 325px); }
.gory .stage { padding: 18px 20px 0 0; }
.gory #terrain { height: clamp(365px, 58vh, 750px); }
.gory .stamp { left: 15px; top: 30px; }
.gory .side { padding: 20px 0 20px 20px; border-color: var(--rule); }
.gory .bar, .gory .help, .gory .readout, .gory > footer { border-color: var(--rule); }
.gory .bar, .gory .readout, .gory .readout strong, .gory .help p, .gory label span, .gory .key { color: var(--muted); }
.gory > footer { padding: 16px 0 28px; }
.gory .empty[hidden] { display: none; }
@media (max-width: 760px) {
  .workshop > header { flex-wrap: wrap; gap: 16px; }
  .gory .stage { padding-right: 0; }
  .gory .side { padding: 19px 0; }
  .gory .stamp { left: 12px; }
}
body.video-4d {
  color-scheme: dark;
  --paper: #000;
  --ink: #efeee7;
  --muted: #aaa8a0;
  --rule: #45443f;
}
.video-4d > main { width: min(calc(100% - 36px), 812.5px); margin-inline: auto; padding: 18px 0 30px; }
.video-4d #scene { height: auto; aspect-ratio: 5 / 4; background: #000; }
.video-4d #scene:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.video-4d .scene-note { padding-top: 10px; }
.video-4d .scene-note, .video-4d .scene-note span:first-child, .video-4d #frame, .video-4d .ticks { color: var(--muted); }
.video-4d .scene-note span:first-child { overflow-wrap: anywhere; }
.video-4d .controls { background: transparent; border-color: var(--rule); border-radius: 0; }
.video-4d .settings { border-color: var(--rule); flex-wrap: wrap; }
.video-4d #play { color: var(--ink); padding: 0; }
.video-4d #play:hover { color: var(--paper); }
.video-4d main.drag { outline-color: var(--ink); }
.video-4d .upload { white-space: nowrap; position: relative; display: inline-block; }
.video-4d .upload input { display: block; position: absolute; width: 100%; height: 100%; inset: 0; opacity: 0; cursor: pointer; }
.video-4d .upload:focus-within { outline-color: var(--ink); }
@media (max-width: 760px) {
  .video-4d .ticks { letter-spacing: 0; }
}

.video-4d > header { justify-content: center; text-align: center; }
.video-4d > header h1 { font-size: clamp(28px, 4vw, 48px); }