diff --git a/src/haz3lweb/www/style/projectors/base.css b/src/haz3lweb/www/style/projectors/base.css
new file mode 100644
index 000000000..49735cd2b
--- /dev/null
+++ b/src/haz3lweb/www/style/projectors/base.css
@@ -0,0 +1,181 @@
+/* PROJECTORS */
+
+@import "panel.css";
+@import "probe.css";
+
+/* Turn off caret when a block projector is focused */
+#caret:has(~ .projectors .projector.block *:focus) {
+  display: none;
+}
+
+/* Default projector styles */
+
+.projector {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--BR2);
+}
+
+.projector > *:not(svg) {
+  z-index: var(--projector-z);
+}
+
+.projector > svg {
+  z-index: var(--projector-backing-z);
+  fill: var(--shard_projector);
+}
+
+.projector.block > svg {
+  stroke-width: 0.5px;
+  stroke: var(--BR2);
+}
+
+.projector.indicated > svg {
+  fill: var(--shard-caret-exp);
+}
+
+.projector > svg > path {
+  vector-effect: non-scaling-stroke;
+}
+
+.projector.block.selected > svg > path {
+  vector-effect: non-scaling-stroke;
+  stroke: var(--Y3);
+}
+
+.projector.selected > svg,
+.projector.selected.indicated > svg,
+.projector.block.selected.indicated > svg {
+  fill: var(--shard-selected);
+}
+
+/* PROJECTOR: FOLD */
+
+.projector.fold:hover,
+.projector.indicated.fold {
+  color: --var(BLACK);
+}
+.projector.fold {
+  cursor: pointer;
+  font-family: var(--code-font);
+}
+
+.result .projector.fold {
+  cursor: default;
+}
+
+/* PROJECTOR: INFO */
+
+.projector.type .type {
+  color: var(--token-typ);
+}
+.projector.type {
+  cursor: pointer;
+}
+.projector.type .info {
+  display: flex;
+}
+.projector.type:hover {
+  color: var(--BLACK);
+}
+
+/* PROJECTOR: CHECKBOX */
+
+.projector.check input {
+  margin: 0;
+  filter: sepia(1);
+  cursor: pointer;
+  outline: none;
+}
+.projector.check:not(.indicated):not(:hover) > svg {
+  fill: var(--NONE);
+}
+
+/* PROJECTOR: SLIDERS (INT & FLOAT) */
+
+.projector.slider input,
+.projector.sliderf input {
+  margin: 0;
+  filter: sepia(1);
+  cursor: pointer;
+  outline: none;
+  width: 90%;
+}
+.projector.slider:not(.indicated):not(:hover) > svg,
+.projector.sliderf:not(.indicated):not(:hover) > svg {
+  fill: var(--NONE);
+}
+
+/* PROJECTOR: TEXTAREA */
+
+.projector.text {
+  cursor: default;
+}
+
+.projector.text .wrapper {
+  height: 100%;
+  width: 100%;
+  border-radius: 0.1em;
+}
+
+.projector.text.indicated .cols,
+.projector.text:has(textarea:focus) .cols {
+  color: var(--R1);
+}
+
+.projector.text.indicated > svg {
+  fill: var(--textarea-indicated);
+}
+
+.projector.text .cols {
+  height: 100%;
+  margin-left: 2px;
+  margin-right: 2px;
+  display: flex;
+  border-radius: 0 0.1em 0.1em 0.1em;
+  color: var(--SAND);
+  background: repeating-linear-gradient(
+    var(--NONE),
+    var(--NONE) 1.41em,
+    var(--textarea-h-stripe) 1.41em,
+    var(--textarea-h-stripe) 1.47em /* line-height */
+  );
+}
+
+.projector.text.selected .cols {
+  background: repeating-linear-gradient(
+    var(--NONE),
+    var(--NONE) 1.41em,
+    var(--textarea-h-strip-selected) 1.41em,
+    var(--textarea-h-strip-selected) 1.47em /* line-height */
+  );
+}
+.projector.text.selected > svg {
+  z-index: 9;
+}
+
+.projector.text textarea {
+  outline: none;
+  resize: none;
+  width: 100%;
+  caret-color: var(--caret-color);
+  padding: 0;
+  margin: 0;
+  margin-left: -2px;
+  line-height: var(--line-height);
+  font-family: var(--code-font);
+  font-size: inherit;
+  border: none;
+  color: var(--textarea-text);
+  background: none;
+  box-shadow: inset 1px 0 0 var(--textarea-v-stripe);
+  overflow: hidden; /* hack: scrolls in chrome without this? */
+}
+
+.projector.text textarea::selection {
+  color: var(--BLACK);
+  background-color: var(--shard-selected);
+}
+
diff --git a/src/haz3lweb/www/style/projectors/panel.css b/src/haz3lweb/www/style/projectors/panel.css
new file mode 100644
index 000000000..77c184bf5
--- /dev/null
+++ b/src/haz3lweb/www/style/projectors/panel.css
@@ -0,0 +1,29 @@
+/* PROJECTORS PANEL */
+
+#projectors {
+  display: flex;
+  gap: 0.75em;
+  align-items: center;
+  padding-left: 0.75em;
+  padding-right: 0.75em;
+  white-space: nowrap;
+  border-radius: 1.1em 0 0 0;
+  outline: 0.3px solid var(--BR2);
+}
+
+#projectors img {
+  width: 0.7em;
+}
+
+#projectors option {
+  font-size: 1em;
+}
+
+#projectors .toggle-switch {
+  display: flex;
+  align-items: center;
+}
+
+#projectors .toggle-switch.inactive {
+  opacity: 40%;
+}
diff --git a/src/haz3lweb/www/style/projectors/probe.css b/src/haz3lweb/www/style/projectors/probe.css
new file mode 100644
index 000000000..60e747dc3
--- /dev/null
+++ b/src/haz3lweb/www/style/projectors/probe.css
@@ -0,0 +1,136 @@
+/* Probe Projector */
+
+.projector.probe {
+  font-family: var(--code-font);
+  font-size: var(--base-font-size);
+  color: var(--STONE);
+}
+
+.projector.probe > svg {
+  fill: #c7e6c6;
+  filter: drop-shadow(0.7px 0.7px 0px green);
+}
+
+.projector.probe .main {
+  display: flex;
+  flex-direction: row;
+  gap: 0.4em;
+  cursor: pointer;
+  align-items: center;
+}
+
+@keyframes rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.projector.probe .live-offside:empty + * .icon {
+  animation: rotate 5s linear infinite;
+}
+
+.projector.probe .num-closures {
+  position: absolute;
+  right: -0.5em;
+  top: -0.3em;
+  transform-origin: top right;
+  scale: 0.6;
+  color: oklch(1 0 0);
+  font-family: var(--ui-font);
+  display: flex;
+  justify-content: center;
+  background-color: var(--G0);
+  border-radius: 2em;
+  font-size: 0.7em;
+  padding: 0.3em;
+  min-width: 1em;
+  z-index: var(--code-emblems-z);
+}
+.projector.probe.selected .num-closures {
+  background-color: var(--Y1);
+}
+
+.projector.probe .live-offside {
+  display: flex;
+  flex-direction: row;
+  position: absolute;
+  left: 10em;
+  gap: 0.15em;
+}
+
+.projector.probe .live-offside:empty {
+  display: none;
+}
+
+.projector.probe .closure:hover .live-env:empty {
+  display: none;
+}
+
+.projector.probe .val-resize {
+  cursor: pointer;
+}
+
+.projector.probe .val-resize .code-text {
+  background-color: #c7e6c6; /* TODO(andrew) */
+  border-radius: 0.4em 0.1em 0.1em 0.1em;
+  filter: drop-shadow(0.7px 0.7px 0px green);
+}
+.projector.probe .closure:first-child .val-resize:hover .code-text {
+  cursor: col-resize;
+}
+.projector.probe .val-resize.cursor .code-text {
+  outline: 1.6px solid var(--G0);
+  outline-style: dotted;
+  filter: none;
+  opacity: 100%;
+}
+
+.projector.probe .val-resize .code-text {
+  opacity: 40%;
+}
+.projector.probe .val-resize:not(.cursor) .code-text .token {
+  filter: saturate(0);
+}
+
+.projector.probe .live-env {
+  background-color: var(--T3);
+  border-radius: 0 0.2em 0.2em 0.2em;
+  padding: 0.2em;
+  display: none;
+  position: absolute;
+  top: 1.5em;
+  z-index: var(--code-hovers-z);
+}
+
+.projector.probe .live-env .live-env-entry {
+  display: flex;
+  flex-direction: row;
+  gap: 0.3em;
+  align-items: baseline;
+  color: var(--GB0);
+}
+
+.projector.probe.indicated > svg {
+  fill: var(--G0);
+}
+
+.projector.probe.indicated .val-resize .code-text {
+  opacity: 60%;
+}
+
+.projector.probe.indicated .main {
+  color: white;
+}
+
+.projector.probe.indicated .val-resize.cursor .code-text {
+  opacity: 100%;
+  /* outline: 1px solid var(--GB1); */
+  outline: 2.8px solid oklch(0.7 0.15 150.31);
+}
+
+.projector.probe.indicated .closure:hover .live-env {
+  display: block;
+}
+
+.projector.probe.indicated .closure.cursor .live-env:empty {
+  display: none;
+}