pronouns: new colors

add Δ-44203 <333
add pixeldesu <33
2024-05-31 00:34:17 -04:00 · 2024-05-15 17:29:25 -04:00 · 2024-05-15 10:31:49 -04:00 · 2024-05-15 10:14:18 -04:00 · 2024-05-15 00:41:01 -04:00 · 2024-05-14 02:38:42 -04:00
18 changed files with 981 additions and 360 deletions
--- a/-~-/pfp/index.html
+++ b/-~-/pfp/index.html
@ -1,9 +1,8 @@
 <!DOCTYPE html>
 <title>noe pfp generator</title>
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link rel="preconnect" href="https://fonts.bunny.net" />
 <link
-  href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap"
+  href="https://fonts.bunny.net/css?family=atkinson-hyperlegible:400,400i,700,700i"
  rel="stylesheet"
 />
 <script
--- a/lightrunner/-~-/index.html
+++ b/lightrunner/-~-/index.html
@ -1,15 +1,10 @@
 <!DOCTYPE html>
 <title>base32 color</title>
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link rel="preconnect" href="https://fonts.bunny.net" />
 <link
-  href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap"
+  href="https://fonts.bunny.net/css?family=atkinson-hyperlegible:400,400i,700,700i"
  rel="stylesheet"
 />
-<script
-  src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.js"
-  referrerpolicy="no-referrer"
-></script>
 <style>
  :root {
    font-family: "Atkinson Hyperlegible", sans-serif;
@ -52,7 +47,7 @@
    <p>warning: math</p>
    <p>
      a 9-character single-case string could be interpreted as 3 triplets of
-      base32. this allows for a 0-46655 range per channel!
+      base36. this allows for a 0-46655 range per channel!
    </p>
    <ol>
      <li>our example "girltwink" turns into (gir, ltw, ink)</li>
--- a/88x31/44203.png
+++ b/88x31/44203.png
--- a/88x31/pixeldesu.png
+++ b/88x31/pixeldesu.png
--- a/88x31/starshines.png
+++ b/88x31/starshines.png
--- a/controls/index.html
+++ b/controls/index.html
@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<title>noe control panel</title>
+<link rel="preconnect" href="https://fonts.bunny.net" />
+<link
+  href="https://fonts.bunny.net/css?family=atkinson-hyperlegible:400,400i,700,700i"
+  rel="stylesheet"
+/>
+<script
+  src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.js"
+  referrerpolicy="no-referrer"
+></script>
+<style>
+  :root {
+    font-family: "Atkinson Hyperlegible", sans-serif;
+    background-color: black;
+    color: #efefef;
+  }
+
+  section {
+    padding: 2em;
+  }
+
+  .hidden {
+    user-select: none;
+    pointer-events: none;
+    opacity: 0.2;
+  }
+</style>
+
+<div id="preconnect">
+  <form>
+    <label for="publickey">Public Key</label>
+    <input id="publickey" />
+    <input type="submit" value="Connect" />
+    <button>Generate</button>
+  </form>
+</div>
+
+<div class="hidden" id="controls"></div>
+
+<script defer async>
+  const setPkForm = (pk) => (document.querySelector("#publickey").value = pk);
+
+  const boot = () => {
+    const existingKey = localStorage.getItem("keypair");
+    if (existingKey) {
+      const { publicKey, privateKey } = JSON.parse(existingKey);
+      setPkForm(publicKey);
+    }
+  };
+
+  const generateKeys = async () => {
+    await crypto.subtle.generateKey(
+      {
+        name: "ECDH",
+        namedCurve: "P-384",
+      },
+      false,
+      ["encrypt", "decrypt"]
+    );
+  };
+
+  setTimeout(boot, 0);
+</script>
--- a/if-it-dies-in-game-it-dies-in-real-life/index.html
+++ b/if-it-dies-in-game-it-dies-in-real-life/index.html
@ -0,0 +1,334 @@
+<!DOCTYPE html>
+<link rel="preconnect" href="https://fonts.bunny.net" />
+<link
+  href="https://fonts.bunny.net/css?family=atkinson-hyperlegible:400,400i,700,700i"
+  rel="stylesheet"
+/>
+<style>
+  :root {
+    font-family: "Atkinson Hyperlegible", sans-serif;
+    background-color: black;
+    color: #efefef;
+  }
+
+  section {
+    padding: 2em;
+  }
+
+  #dot,
+  #safetyDot {
+    width: 7px;
+    height: 7px;
+    background-color: red;
+    display: inline-block;
+  }
+</style>
+
+<main>
+  <section>
+    <div>
+      <label for="safety">SAFETY LOCK</label>
+      <input type="checkbox" name="safety" id="safety" value="true" />
+    </div>
+    <div>
+      <label for="arm">ARM DOLL CONTROL</label>
+      <input type="checkbox" name="arm" id="arm" />
+    </div>
+    <div>
+      <label for="intensity">Intensity</label><br />
+      <input id="intensity" type="range" min="1" max="5" value="3" />
+      <button id="pair">Pair</button>
+    </div>
+    <div>
+      <label for="targets">Targets</label><br />
+      <textarea id="targets" width="50">
+DollTR
+DollNC
+DollVS
+WitchOfTheHighlands
+41666
+xenogender</textarea
+      >
+    </div>
+    <div>
+      <label for="targets">Attackers</label><br />
+      <textarea id="attackers">
+Lyyti
+LyytiTR
+LyytiNC</textarea
+      >
+    </div>
+    <div>
+      <input type="submit" id="connect" value="Connect" />
+    </div>
+    <div>
+      <div id="dot"></div>
+      <span id="dotText">Not Armed</span>
+    </div>
+    <div>
+      <div id="safetyDot"></div>
+      <span id="safetyDotText">Safety ON (commands will not be sent)</span>
+    </div>
+  </section>
+  <section>
+    <h2>log</h2>
+    <pre id="log"></pre>
+  </section>
+</main>
+<script defer async>
+  window.__ARMED__ = false;
+  window.__SAFETY__ = true;
+  window.__CONNECTED__ = false;
+
+  const COLLAR_BT_NAME = "PetSafe Smart Dog Trainer";
+  const COLLAR_COMMAND_SERVICE = "0bd51666-e7cb-469b-8e4d-2742f1ba77cc";
+  const COLLAR_COMMAND_CHARACTERISTIC = "e7add780-b042-4876-aae1-112855353cc1";
+  const COLLAR_AUTH_CHARACTERISTIC = "0e7ad781-b043-4877-aae2-112855353cc2";
+  const COLLAR_TONE_COMMAND = [0x55, 0x36, 0x31, 0x31, 0x31, 0x30];
+  const COLLAR_VIBRATE_COMMAND = [0x55, 0x36, 0x31, 0x33, 0x33, 0x30];
+  // Last byte is command strength (0-15) + 0x48. We set it to 0 here.
+  const COLLAR_STATIC_COMMAND = [0x55, 0x36, 0x31, 0x32, 0x33, 0x30];
+  // Last four bytes are the ASCII values of the PIN digits
+  const COLLAR_AUTH_COMMAND = [0x55, 0x37, 0x37, 0x30, 0x30, 0x30, 0x30];
+
+  class PetsafeSmartDogTrainingCollar {
+    constructor() {
+      this.device = null;
+      this.service = null;
+      this.tx = null;
+    }
+
+    async connect() {
+      console.log("Starting connect");
+
+      if (!navigator.bluetooth) {
+        addLogMessage("No WebBluetooth support; bailing.");
+        throw new Error("No WebBluetooth; bailing.");
+      }
+
+      this.device = await navigator.bluetooth.requestDevice({
+        filters: [
+          {
+            name: COLLAR_BT_NAME,
+          },
+        ],
+        optionalServices: [COLLAR_COMMAND_SERVICE],
+      });
+      let server = await this.device.gatt.connect();
+      this.service = await server.getPrimaryService(COLLAR_COMMAND_SERVICE);
+      this.tx = await this.service.getCharacteristic(
+        COLLAR_COMMAND_CHARACTERISTIC
+      );
+      this.auth = await this.service.getCharacteristic(
+        COLLAR_AUTH_CHARACTERISTIC
+      );
+      console.log("Connected");
+    }
+
+    async disconnect() {
+      await this.device.gatt.disconnect();
+    }
+    async authorize(d1, d2, d3, d4) {
+      console.log("Authenticating with ", d1, d2, d3, d4);
+      let r = new Uint8Array(COLLAR_AUTH_COMMAND);
+      r[3] += d1;
+      r[4] += d2;
+      r[5] += d3;
+      r[6] += d4;
+      console.log(r);
+      this.auth.writeValue(r);
+    }
+    async runTone() {
+      console.log("Running tone");
+      addLogMessage("[TONE]");
+      this.tx.writeValue(new Uint8Array(COLLAR_TONE_COMMAND));
+    }
+
+    async runVibrate() {
+      console.log("Running vibration");
+      addLogMessage("[VIBRATE]");
+      this.tx.writeValue(new Uint8Array(COLLAR_VIBRATE_COMMAND));
+    }
+
+    async runStatic(power) {
+      if (window.__SAFETY__) {
+        addLogMessage("SAFETY ON; runStatic REJECTED");
+        return;
+      }
+
+      console.log("Running static");
+      addLogMessage("[SHOCK] Power = " + power);
+      if (power < 0 || power > 15) {
+        throw Error("power not in range 0-15");
+      }
+      let r = new Uint8Array(COLLAR_STATIC_COMMAND);
+      r[5] += power;
+      console.log(r);
+      this.tx.writeValue(r);
+    }
+  }
+
+  const collar = new PetsafeSmartDogTrainingCollar();
+
+  const addLogMessage = (message) => {
+    const logEl = document.querySelector("#log");
+    logEl.innerHTML = `${new Date().toISOString()} :: ${message}\n${
+      logEl.innerHTML
+    }`;
+  };
+
+  const setStatus = (color, text) => {
+    document.querySelector("#dot").style.backgroundColor = color;
+    document.querySelector("#dotText").innerHTML = text;
+  };
+
+  const setSafety = (color, text) => {
+    document.querySelector("#safetyDot").style.backgroundColor = color;
+    document.querySelector("#safetyDotText").innerHTML = text;
+  };
+
+  const connectCollar = async (pin) => {
+    addLogMessage("Connecting to collar...");
+    await collar.connect();
+    addLogMessage("Collar connected; running vibration test.");
+    await collar.runVibrate();
+  };
+
+  const fire = () => {
+    if (window.__SAFETY__ || !window.__ARMED__) {
+      addLogMessage("SAFETY ON or NOT ARMED -- FIRE REJECTED.");
+      return;
+    }
+
+    const intensity = Number(document.querySelector("#intensity").value);
+
+    collar.runStatic(intensity || 0);
+  };
+
+  const resolveCharacters = async (list) => {
+    const url = `https://census.daybreakgames.com/s:saegd/get/ps2/character_name?name.first_lower=${list
+      .map((a) => a.toLowerCase())
+      .join(",")}&c:limit=${list.length}`;
+
+    const req = await fetch(url);
+    const data = await req.json();
+
+    return data.character_name_list.map((a) => a.character_id);
+  };
+
+  const connectToESS = (targets, attackers) => {
+    addLogMessage("Connecting to WSS...");
+    const ws = new WebSocket(
+      "wss://push.nanite-systems.net/streaming?environment=ps2&service-id=s:saegd"
+    );
+
+    ws.onopen = () => {
+      setTimeout(() => {
+        ws.send(
+          JSON.stringify({
+            service: "event",
+            action: "subscribe",
+            characters: targets,
+            eventNames: ["Death"],
+            worlds: ["all"],
+            logicalAndCharactersWithWorlds: true,
+          })
+        );
+
+        addLogMessage(`CONNECTED. Listening to ${targets}`);
+        setStatus("green", "CONNECTED");
+
+        addLogMessage(`will match on ${attackers}`);
+      }, 500);
+    };
+
+    ws.onerror = ws.onclose = (a) => {
+      console.log("ess fail", a);
+      addLogMessage("ESS failed to connect. Reload.");
+    };
+
+    ws.onmessage = (message) => {
+      const { payload } = JSON.parse(message.data);
+
+      if (payload.event_name === "Death") {
+        console.log("Death event", { payload });
+        if (attackers.includes(payload.attacker_character_id)) {
+          addLogMessage(
+            `<b>[TRIGGERED]</b> Death from ${payload.attacker_character_id} to ${payload.character_id}`
+          );
+
+          if (window.__SAFETY__ || !window.__ARMED__) {
+            addLogMessage("SAFETY ON or NOT ARMED -- NO FIRE");
+            return;
+          }
+
+          fire();
+        } else {
+          addLogMessage(
+            `Death event skipped, from ${payload.attacker_character_id} to ${payload.character_id}`
+          );
+        }
+      }
+    };
+  };
+
+  document.querySelector("#arm").addEventListener("change", (event) => {
+    window.__ARMED__ = event.target.checked;
+
+    if (event.target.checked) {
+      addLogMessage("ARMED");
+      setStatus("yellow", "ARMED");
+    } else {
+      addLogMessage("Disarmed.");
+      setStatus("red", "Not Armed");
+    }
+  });
+
+  document.querySelector("#safety").addEventListener("change", (event) => {
+    window.__SAFETY__ = event.target.checked;
+
+    if (event.target.checked) {
+      addLogMessage("Safety is on; shock commands will NOT be sent.");
+      setSafety("red", "Safety ON (commands will not be sent)");
+    } else {
+      addLogMessage("Safety is off. Good luck, dolly.");
+      setSafety("green", "Safety OFF");
+    }
+  });
+
+  document
+    .querySelector("#connect")
+    .addEventListener("click", async (event) => {
+      if (window.__CONNECTED__) {
+        addLogMessage("Connection rejected; already connected.");
+        return;
+      }
+      if (!window.__ARMED__) {
+        addLogMessage("Connection rejected; arm the doll.");
+        return;
+      }
+
+      const targets = document.querySelector("#targets").value.split("\n");
+      const attackers = document.querySelector("#attackers").value.split("\n");
+
+      window.__CONNECTED__ = true;
+
+      setStatus("blue", "CONNECTING...");
+      addLogMessage("Fetching character IDs...");
+      const [targetIDs, attackerIDs] = await Promise.all([
+        resolveCharacters(targets),
+        resolveCharacters(attackers),
+      ]);
+      connectToESS(targetIDs, attackerIDs);
+    });
+
+  document.querySelector("#pair").addEventListener("click", () => {
+    // const pin = document.querySelector("#pin").value;
+    connectCollar();
+  });
+
+  document.querySelector("#safety").checked = true;
+  document.querySelector("#arm").checked = false;
+  addLogMessage("Safety is on; shock commands will NOT be sent.");
+  addLogMessage("Ready");
+</script>
--- a/index.html
+++ b/index.html
@ -1,85 +1,104 @@
 <!DOCTYPE html>
 <meta charset="utf-8" />
-<title>noe</title>
+<title>noe.sh</title>
+<link rel="preconnect" href="https://fonts.bunny.net" />
+<link
+  href="https://fonts.bunny.net/css?family=atkinson-hyperlegible:400,400i,700,700i"
+  rel="stylesheet"
+/>
 <style>
  :root {
-    --l0: #1b1f21;
-    --l1: #441452;
-    --l2: #752565;
-    --l3: #ce2a66;
-    --l4: #ce9bb7;
-    --l5: #fdf4f4;
+    --top: #d9073b;
+    --mid-top: #40b39a;
+    --mid: #658e85;
+    --mid-half: rgba(101, 142, 133, 0.5);
+    --bottom: #0c100f;
+    --floor: #040504;
+    background-color: var(--bottom);
+    color: var(--mid);
+    line-height: 1.6;
+    font-family: "Atkinson Hyperlegible", sans-serif;
  }

  body {
-    overflow-x: hidden;
-    background-color: var(--l0);
-    color: var(--l5);
+    margin: 0;
+    padding: 0;
  }

-  a {
-    color: var(--l4);
+  main {
+    max-width: 960px;
+    margin: 2em;
+    border: 2px solid var(--floor);
+    padding: 0.2em;
+    line-height: 1.4;
  }

-  .container {
-    border: 3px solid var(--l3);
-    border-radius: 15px;
-    overflow: hidden;
-  }
-
-  header {
-    background-color: var(--l3);
-    color: var(--l0);
-
-    display: flex;
-    align-items: center;
-
-    h1 {
-      margin: 0;
-      padding: 1rem;
-      font-size: 3em;
-
-      text-shadow: -2px 1px 0 var(--l1), 2px 1px 3px var(--l4);
-
-      .meka {
-        color: var(--l2);
-      }
-    }
-  }
-
-  .monospace {
+  .mono {
    font-family: monospace;
  }

-  .circlething {
-    width: 3em;
-    height: 3em;
-    background-color: red;
-    border-radius: 100%;
-    background: radial-gradient(
-      circle,
-      var(--l3) 20%,
-      var(--l1) 30%,
-      var(--l2) 50%,
-      var(--l0) 80%,
-      var(--l0) 100%
-    );
-    border: 3px solid var(--l0);
-    box-shadow: 0 0 2px 5px var(--l2);
-    margin-left: 1em;
+  * {
+    box-sizing: border-box;
+  }
+
+  .red {
+    color: var(--top);
+  }
+
+  a {
+    color: var(--mid-top);
+  }
+
+  h1,
+  p {
+    margin: 0;
+    padding: 0;
+    line-height: 1;
  }

  section {
-    border: 0px solid var(--l2);
-    border-top-width: 3px;
-    border-left-width: 3px;
-    box-shadow: 3px 3px 3px var(--l1);
-    margin: 1em;
-    border-radius: 10px;
-    padding: 1em;
+    border: 1px solid var(--mid-half);
+    padding: 1.5em;
+    margin-top: 0.3em;
+  }

-    h2 {
-      margin: 0;
+  section p {
+    line-height: 1.5;
+    padding: 0.3em 0;
+  }
+
+  .caution-bar {
+    margin: 2em 0;
+    background-color: black;
+    color: white;
+    display: flex;
+    justify-content: space-evenly;
+    padding: 0.5em;
+    font-size: 1.4em;
+    /* font-weight: bold; */
+    text-shadow: 1px 1px 0px var(--top), -1px -1px 1px var(--mid-top);
+    flex: 1 4 100%;
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 50%;
+      height: 100px;
+      background-color: blue;
+      mix-blend-mode: color-burn;
+    }
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: -50px;
+      width: 100px;
+      height: 160px;
+      background-color: green;
+      mix-blend-mode: exclusion;
    }
  }

@ -93,176 +112,181 @@
      margin: 0.7em 2em 1em 2em;
    }
  }
+
+  header {
+    padding: 2em;
+  }
+
+  .nav a {
+    color: var(--mid);
+    text-decoration: none;
+    transition: all 0.1s ease-in-out;
+    &.red {
+      color: var(--top);
+    }
+    &:hover {
+      color: var(--c);
+    }
+  }
 </style>
-<body>
-  <div class="container">
-    <header>
-      <div class="circlething"></div>
-      <h1><span class="meka">meka</span><span class="noe">noe</span></h1>
-      <p aria-hidden="true" class="monospace">
-        _[#41666H;&amp;: <span class="under">n,s,h</span>]$ ~>
-      </p>
-      <p aria-hidden="true" class="monospace">
-        <span id="js-timething">
-          // multishot; unknown target; tracking... *** ||--->> waiting...
-          ||-->>
-        </span>
-      </p>
-    </header>
-    <main>
-      <section>
-        <h2>about</h2>
-        <p>
-          this one is noe
-          <a href="/pronouns/">(it/its, 3rd person preferred, alt: she/her)</a>
-        </p>
-        <p>
-          derelict combat doll; hacker; cyberpunk; nd;
-          <a href="/system.html">&amp;</a>; queer; empty spaces;;
-        </p>
-        <p>
-          nixos, devops/sre/sysadmin, rev-eng, electronics, personal evs,
-          writing, cats, plants
-        </p>
-      </section>
-
-      <section>
-        <h2>where to find</h2>
-        <ul>
-          <li>
-            <b>federal space</b> -
-            <a href="https://sapphic.engineer/noe" rel="me"
-              ><!--email off-->@noe@sapphic.engineer<!--/email off--></a
-            >
-            ||
-            <a href="https://porcelain.doll.repair/noe" rel="me"
-              ><!--email off-->@noe@porcelain.doll.repair<!--/email off--></a
-            >
-            ||
-            <a href="https://void.rehab/noe" rel="me"
-              ><!--email off-->@noe@void.rehab<!--/email off--></a
-            >
-          </li>
-          <li>
-            <b>cold storage</b> -
-            <a href="https://codeberg.org/noe" rel="me"
-              ><!--email off-->@noe@codeberg.org<!--/email off--></a
-            >
-          </li>
-          <li>
-            <b>legacy code</b> -
-            <a href="https://github.com/mekanoe" rel="me"
-              ><!--email off-->@mekanoe@github.com<!--/email off--></a
-            >
-          </li>
-          <li>
-            <b>the matrix</b> -
-            <a href="https://matrix.to/#/@noe:void.rehab" rel="me"
-              ><!--email off-->@noe:void.rehab<!--/email off--></a
-            >
-          </li>
-        </ul>
-        <h3>art webbed sites</h3>
-        <ul>
-          <li>
-            <a href="https://art.mekanoe.com">art.mekanoe.com</a> (requires
-            javascript)
-          </li>
-          <li>
-            <a href="https://doll.repair">doll.repair</a> (warning: empty
-            spaces; trauma-driven art therapy)
-          </li>
-        </ul>
-      </section>
-
-      <section>
-        <h2>reading</h2>
-        <p>
-          this one writes for many reasons; please heed the content warnings
-          where they exist. your mental health is important.
-        </p>
-        <h3>technical</h3>
-        <ul>
-          <li><i>(standby)</i></li>
-        </ul>
-        <h3>fictional</h3>
-        <ul>
-          <li>
-            <a href="https://sapphic.engineer/notice/AdTGYQsbo8EkYbZMDA"
-              >story story unit#001</a
-            >
-            - she fixes you
-          </li>
-        </ul>
-      </section>
-    </main>
-    <footer>
-      <section>
-        <h2>other creatures</h2>
-        <p></p>
-        <div class="friends">
-          <!-- Others -->
-          <div>
-            <a href="https://stardust.elysium.gay" target="_blank"
-              ><img
-                src="/88x31/stardust.png"
-                width="88"
-                height="31"
-                alt="Stardust"
-            /></a>
-            <a href="https://sneexy.pages.gay" target="_blank"
-              ><img src="/88x31/sneexy.gif" alt="Sneexy" width="88" height="31"
-            /></a>
-            <a href="https://rest.1a-insec.net/" target="_blank"
-              ><img src="/88x31/1a.png" alt="1A" width="88" height="31"
-            /></a>
-            <a href="https://zvava.org/" target="_blank"
-              ><img src="/88x31/zvava.png" alt="zvava" width="88" height="31"
-            /></a>
-          </div>
-          <!-- self row (hi, please feel free to use these <3) -->
-          <div class="divider"></div>
-          <div>
-            <a href="https://noe.sh" target="_blank"
-              ><img src="/yay/88x31.png" width="88" height="31" alt="noe"
-            /></a>
-            <a href="https://noe.sh/pronouns/" target="_blank"
-              ><img src="/yay/88x31-vp.png" width="88" height="31" alt="it/its"
-            /></a>
-            <img
-              src="/yay/88x31-nap.png"
-              width="88"
-              height="31"
-              alt="not a person"
-            />
-            <a href="https://sapphic.engineer" target="_blank"
-              ><img
-                src="/yay/88x31-se.png"
-                width="88"
-                height="31"
-                alt="sapphic.engineer"
-            /></a>
-          </div>
-        </div>
-      </section>
-      <section>
-        <h2>live creature reactions</h2>
-        <ul>
-          <!--email off-->
-          <li>"it keeps biting me" - @mia@void.rehab</li>
-          <li>
-            "..designated SCP-41666 by the Fedi Council" -
-            @quasar@social.translunar.academy
-          </li>
-          <li>"insane lesbian" - @sneexy@lea.pet</li>
-          <li>"This is very cool" - @gotrans@heckin.how</li>
-          <li>"oh god what have you done" - @Nyaomi@eepy.moe</li>
-          <li>"why have you done this" - @yassie_j@0w0.is</li>
-          <li>"you're insane that's amazing" - @vee@kvinneby.vendicated.dev</li>
-          <li>"oh my god it happened again" - @ezri@crimew.gay</li>
-          <!--/email off-->
-        </ul>
-      </section>
-    </footer>
-  </div>
-</body>
+<main>
+  <header>
+    <h1 class="red">noe</h1>
+    <div class="mono nav">
+      <a href="https://noe.sh" class="red" style="--c: var(--mid-top)">41666</a
+      ><a href="https://doll.repair" style="--c: #b89524" class="member">HIDE</a
+      ><a href="#" style="--c: #064555" class="member">SAYAKA</a
+      ><a href="#" style="--c: #08b69f" class="member">41666</a
+      ><a href="#" style="--c: #ff00bf" class="member">41666</a>
+    </div>
+    <div class="caution-bar" aria-hidden="true">
+      <b style="margin-right: 1em">⚠️⚠️⚠️⚠️⚠️ CAUTION:</b>
+      ▖▘▌▘▘▌▌▌▖▘PQJ#KFEK($())AQ! ▖▘▌▘▘▌▌▌▖▘
+      <b style="margin-left: 1em">⚠️⚠️⚠️⚠️⚠️ CAUTION:</b>
+      ▖▘▌▘▘▌▌▌▖▘PQJ#KFEK($())AQ! ▖▘▌▘▘▌▌▌▖▘
+      <b style="margin-left: 1em">⚠️⚠️⚠️⚠️⚠️ CAUTION:</b>
+      <div class="mono new">
+        detected void leak detectedvoid leak detectedvoid leak detectedvoid leak
+        detectedvoid leak detected
+      </div>
+    </div>
+  </header>
+  <section>
+    <p>
+      this one is unit <span class="red">41666</span>, known as
+      <span class="red">noe</span> to humans.
+      <a href="/pronouns/">(it/its, 3rd person preferred)</a>
+    </p>
+    <p>
+      derelict combat doll; hacker; cyberpunk; void priestess;
+      <a href="/system.html">plural</a> (1 of 5); poly; queer; glitchy;;
+    </p>
+    <p>
+      likes nixos, devops/sre/sysadmin, rev-eng, electronics, personal evs,
+      writing, cats, plants
+    </p>
+  </section>
+  <section>
+    <h2>where to find</h2>
+    <ul>
+      <li>
+        <b>federal space</b> -
+        <a href="https://sapphic.engineer/noe" rel="me"
+          ><!--email off-->@noe@sapphic.engineer<!--/email off--></a
+        >
+        ||
+        <a href="https://porcelain.doll.repair/noe" rel="me"
+          ><!--email off-->@noe@porcelain.doll.repair<!--/email off--></a
+        >
+        ||
+        <a href="https://void.rehab/noe" rel="me"
+          ><!--email off-->@noe@void.rehab<!--/email off--></a
+        >
+      </li>
+      <li>
+        <b>cold storage</b> -
+        <a href="https://codeberg.org/noe" rel="me"
+          ><!--email off-->@noe@codeberg.org<!--/email off--></a
+        >
+      </li>
+      <li>
+        <b>legacy code</b> -
+        <a href="https://github.com/mekanoe" rel="me"
+          ><!--email off-->@mekanoe@github.com<!--/email off--></a
+        >
+      </li>
+      <li>
+        <b>the matrix</b> -
+        <a href="https://matrix.to/#/@noe:void.rehab" rel="me"
+          ><!--email off-->@noe:void.rehab<!--/email off--></a
+        >
+      </li>
+    </ul>
+    <h3>art webbed sites</h3>
+    <ul>
+      <li><a href="https://3d.noe.sh">3d.noe.sh</a> (requires javascript)</li>
+      <li>
+        <a href="https://doll.repair">doll.repair</a> (warning: empty spaces;
+        trauma-driven art therapy, wip)
+      </li>
+    </ul>
+  </section>
+  <section>
+    <h2>other creatures</h2>
+    <p></p>
+    <div class="friends">
+      <!-- Others -->
+      <div>
+        <a href="https://stardust.elysium.gay" target="_blank"
+          ><img src="/88x31/stardust.png" width="88" height="31" alt="Stardust"
+        /></a>
+        <a href="https://sneexy.pages.gay" target="_blank"
+          ><img src="/88x31/sneexy.gif" alt="Sneexy" width="88" height="31"
+        /></a>
+        <a href="https://rest.1a-insec.net/" target="_blank"
+          ><img src="/88x31/1a.png" alt="1A" width="88" height="31"
+        /></a>
+        <a href="https://zvava.org/" target="_blank"
+          ><img src="/88x31/zvava.png" alt="zvava" width="88" height="31"
+        /></a>
+        <a href="https://starshines.gay/" target="_blank"
+          ><img
+            src="/88x31/starshines.png"
+            alt="starshines"
+            width="88"
+            height="31"
+        /></a>
+        <a href="https://pixelde.su/" target="_blank"
+          ><img
+            src="/88x31/pixeldesu.png"
+            alt="pixeldesu"
+            width="88"
+            height="31" /></a
+        ><a href="https://query.44203.online/" target="_blank"
+          ><img src="/88x31/44203.png" alt="Δ-44203" width="88" height="31"
+        /></a>
+      </div>
+      <!-- self row (hi, please feel free to use these <3) -->
+      <div class="divider"></div>
+      <div>
+        <a href="https://noe.sh" target="_blank"
+          ><img src="/yay/88x31.png" width="88" height="31" alt="noe"
+        /></a>
+        <a href="https://noe.sh/pronouns/" target="_blank"
+          ><img src="/yay/88x31-vp.png" width="88" height="31" alt="it/its"
+        /></a>
+        <img
+          src="/yay/88x31-nap.png"
+          width="88"
+          height="31"
+          alt="not a person"
+        />
+        <a href="https://sapphic.engineer" target="_blank"
+          ><img
+            src="/yay/88x31-se.png"
+            width="88"
+            height="31"
+            alt="sapphic.engineer"
+        /></a>
+      </div>
+    </div>
+  </section>
+  <section>
+    <h2>live creature reactions</h2>
+    <ul>
+      <!--email off-->
+      <li>"it keeps biting me" - @mia@void.rehab</li>
+      <li>
+        "..designated SCP-41666 by the Fedi Council" -
+        @quasar@social.translunar.academy
+      </li>
+      <li>"insane lesbian" - @sneexy@lea.pet</li>
+      <li>"This is very cool" - @gotrans@heckin.how</li>
+      <li>"oh god what have you done" - @Nyaomi@eepy.moe</li>
+      <li>"why have you done this" - @yassie_j@0w0.is</li>
+      <li>"you're insane that's amazing" - @vee@kvinneby.vendicated.dev</li>
+      <li>"oh my god it happened again" - @ezri@crimew.gay</li>
+      <!--/email off-->
+    </ul>
+  </section>
+</main>
--- a/pronouns/index.html
+++ b/pronouns/index.html
@ -1,15 +1,22 @@
 <!DOCTYPE html>
 <meta charset="utf-8" />
+<link rel="preconnect" href="https://fonts.bunny.net" />
+<link
+  href="https://fonts.bunny.net/css?family=atkinson-hyperlegible:400,400i,700,700i"
+  rel="stylesheet"
+/>
 <title>how to: noe's pronouns</title>
 <style>
  :root {
-    --l0: #1b1f21;
-    --l1: #441452;
-    --l2: #752565;
-    --l3: #ce2a66;
-    --l4: #ce9bb7;
-    --l5: #fdf4f4;
-    --gr: #25dcc5;
+    font-family: "Atkinson Hyperlegible", sans-serif;
+    --l0: #040504;
+    --l1: #0c100f;
+    --l2: #182421;
+    --l3: #d9073b;
+    --l4: rgba(101, 142, 133, 0.5);
+    --l5: #80aca2;
+    --gr: #40b39a;
+    --gd: #b89524;
  }

  body {
@ -25,11 +32,11 @@
  }

  .one {
-    color: var(--l4);
+    color: var(--gd);
  }

  ._3pp {
-    color: var(--gr);
+    color: #db43b5;
  }

  h2 {
@ -53,13 +60,13 @@
  main {
    max-width: 960px;
    margin: 2em;
-    border: 1px solid #988;
+    border: 1px solid var(--l4);
    padding: 1.5em;
    line-height: 1.4;
  }

  hr {
-    border-color: #555;
+    border-color: var(--l4);
    margin: 2em 40%;
  }
 </style>
@ -98,11 +105,14 @@
    With love, of course!~ The following sections "expand" into examples of use.
    These examples assume the reader uses first person pronouns to self-refer.
  </p>
+  <p>tl;dr: avoid using "you"</p>
  <p>Please use:</p>
  <ul>
    <li>
      <details>
-        <summary><span class="_3pp">it/its</span></summary>
+        <summary>
+          <span class="_3pp">it/its</span>
+        </summary>
        <p class="head">
          Imagine that noe is a helpful robot. It just helped a creature do
          something. It was very useful!
--- a/system.html
+++ b/system.html
@ -1,121 +1,315 @@
 <!DOCTYPE html>
 <meta charset="utf-8" />
 <title>The Lightrunner System</title>
+<link rel="preconnect" href="https://fonts.bunny.net" />
+<link
+  href="https://fonts.bunny.net/css?family=atkinson-hyperlegible:400,400i,700,700i"
+  rel="stylesheet"
+/>
 <style>
  :root {
-    --l0: #1b1f21;
-    --l1: #441452;
-    --l2: #752565;
-    --l3: #ce2a66;
-    --l4: #ce9bb7;
-    --l5: #fdf4f4;
-    --gr: #25dcc5;
+    --top: #d9073b;
+    --mid-top: #40b39a;
+    --mid: #658e85;
+    --mid-half: rgba(101, 142, 133, 0.5);
+    --bottom: #0c100f;
+    --floor: #040504;
+    background-color: var(--bottom);
+    color: var(--mid);
+    line-height: 1.6;
+    font-family: "Atkinson Hyperlegible", sans-serif;
  }

-  body {
-    background-color: var(--l0);
-    color: var(--l5);
-    margin: 0;
-    padding: 0;
+  * {
+    box-sizing: border-box;
  }

-  .name {
-    font-weight: bold;
-    color: var(--l3);
+  section {
+    margin-top: 2em;
  }

-  .one {
-    color: var(--l4);
+  .red {
+    color: var(--top);
  }

-  ._3pp {
-    color: var(--gr);
+  .member {
+    margin-bottom: 0.5em;
+
+    table {
+      min-width: 500px;
+      width: 40vw;
+      border: 1px solid var(--floor);
+    }
+    td {
+      border: 1px solid var(--mid-half);
+      text-align: center;
+      padding: 0.6em;
+    }
+    .name {
+      text-align: left;
+      font-weight: bold;
+      span {
+        color: var(--member-color);
+      }
+      i {
+        font-family: sans-serif;
+        margin-left: 1em;
+      }
+    }
+    .avatar {
+      width: 150px;
+      height: 150px;
+      background-image: var(--image-url);
+      background-size: cover;
+      background-repeat: no-repeat;
+      border: 0 solid var(--member-color);
+      border-bottom-width: 3px;
+      border-right-width: 3px;
+    }
+    .desc {
+      word-wrap: break-word;
+      text-align: left;
+    }
  }

-  h2 {
-    margin-top: 3em;
-  }
-
-  p.head {
-    background-color: var(--l1);
-    border: 1px solid var(--l2);
-    display: inline-block;
-    padding: 1em;
-  }
-
-  main {
-    max-width: 960px;
-    margin: 2em;
-    border: 1px solid #988;
-    padding: 1.5em;
-    line-height: 1.4;
-  }
-
-  hr {
-    border-color: #555;
-    margin: 2em 40%;
-  }
-
-  .color-dot {
-    display: inline-block;
-    width: 1.2em;
-    height: 1.2em;
-    background-color: var(--dot);
-    border-radius: 100%;
-    border: 3px solid var(--l4);
-    position: relative;
-    top: 0.4em;
+  a {
+    color: var(--mid-top);
  }
 </style>
 <main>
-  <h1>the lightrunner system //</h1>
-  <hr />
-  <h2>
-    <div class="color-dot" style="--dot: var(--l5)"></div>
-    noe (the doll) (it/its, 3rd person)
-  </h2>
-  <p>
-    <a href="https://sapphic.engineer/noe" rel="me">@noe@sapphic.engineer</a
-    ><br />
-  </p>
-  <p>
-    noe is the primary fronter. a known doll numbered <code>41666</code>,
-    registered to hideri. it may have been specced into combat but prefers less
-    physical identity or existence. noe builds all the cool tech stuff.
-  </p>
-  <hr />
-  <h2>
-    <div class="color-dot" style="--dot: var(--l3)"></div>
-    hideri (the witch) (she/her, it/its)
-  </h2>
-  <p>
-    <a href="https://porcelain.doll.repair/@hid" rel="me"
-      >@hid@porcelain.doll.repair</a
+  <h1>lightrunner system (<span class="red">光Rsys</span>)</h1>
+  <p>known system properties of doll 41666</p>
+
+  <section>
+    <h2>system member processes</h2>
+    <div
+      class="member"
+      style="--member-color: var(--top); --image-url: url('/yay/noe.png')"
    >
-  </p>
-  <p>
-    hideri is the oldest system member. a witch, hypnotist, and Doll User. she
-    built noe from the ashes of the lightrunner's path. likes to use noe to
-    create tools to better control mechanisms, or just for fun.
-  </p>
-  <hr />
-  <h2>
-    <div class="color-dot" style="--dot: var(--gr)"></div>
-    sayaka (the librarian) (she/her)
-  </h2>
-  <p>
-    sayaka is sayaka. a quiet girl that helps us store vast knowledge and
-    intuition where it is otherwise missing. failed engineering school for
-    fighting a student that brought a flashlight to lecture. maybe a moth.
-  </p>
-  <hr />
-  <h2>
-    <div class="color-dot" style="--dot: #9bf3ff"></div>
-    ethyl (slime) (it/its, slime)
-  </h2>
-  <p>what? is slime. very empty, yet completely full.</p>
-  <hr />
-  <hr />
-  <hr />
-  <p>rest in the light, ayanami & kata. both found Stillness.</p>
+      <table>
+        <tr>
+          <td rowspan="3" class="avatar"></td>
+          <td class="name"><span>noe</span> <i>/noʊiː/</i></td>
+          <td>41666-𝛼</td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            Combat Doll [<a href="https://pluralpedia.org/w/Primary_Fronter"
+              >Primary Fronter</a
+            >] [<a href="https://pluralpedia.org/w/Technician">Technician</a>]
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">it/its, that one, dolly (avoid "you")</td>
+        </tr>
+        <tr>
+          <td colspan="3" class="desc">
+            <p>
+              this one is 41666, or noe! it is a doll, a silly robot girl who
+              lives to serve its witch!! may preach about the void. may eat you.
+            </p>
+            <p>
+              noe is extremely technical, both in computing and in decoding its
+              system dynamics,,, but what's the difference :3
+            </p>
+            <p>⚠️ noe is a high-class threat to humans. ⚠️</p>
+            <p>
+              <a href="https://noe.sh" rel="me">https://noe.sh</a><br />
+              <a href="https://sapphic.engineer/noe" rel="me"
+                ><!--email off-->@noe@sapphic.engineer<!--/email off--></a
+              >
+            </p>
+          </td>
+        </tr>
+      </table>
+    </div>
+
+    <div
+      class="member"
+      style="--member-color: #b89524; --image-url: url('/yay/hide.jpg')"
+    >
+      <table>
+        <tr>
+          <td rowspan="3" class="avatar"></td>
+          <td colspan="2" class="name"><span>hide</span></td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            Combat Witch [<a href="https://pluralpedia.org/w/Protector"
+              >Protector</a
+            >]
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">she/her, it/its</td>
+        </tr>
+        <tr>
+          <td colspan="3" class="desc">
+            <p>
+              I'm the oldest running member of the system, I help keep things in
+              check, and ensure all dolls are well tended to! I'm strongly
+              interested in psychological horror as a genre, as well as sharing
+              our mindspaces with any willing to listen~
+            </p>
+            <p>
+              <a href="https://doll.repair" rel="me">https://doll.repair</a
+              ><br />
+              <a href="https://porcelain.doll.repair/hid" rel="me"
+                ><!--email off-->@hid@porcelain.doll.repair<!--/email off--></a
+              >
+            </p>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <div
+      class="member"
+      style="--member-color: rgb(6, 69, 85); --image-url: url('/yay/saya.jpg')"
+    >
+      <table>
+        <tr>
+          <td rowspan="3" class="avatar"></td>
+          <td colspan="2" class="name"><span>sayaka</span></td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            Catmoth [<a href="https://pluralpedia.org/w/Librarian">Librarian</a
+            >] [<a href="https://pluralpedia.org/w/Overrider">Overrider</a>]
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2">she/her</td>
+        </tr>
+        <tr>
+          <td colspan="3" class="desc">
+            <p>
+              Hi... I'm saya, a very soft kittygirl moththing. Requires pats at
+              all times!!! I'm addicted to anything mechanical and technical,
+              and loves getting our hands dirty.
+            </p>
+            <p>I'm pretty quiet, please be patient with me!</p>
+          </td>
+        </tr>
+      </table>
+    </div>
+
+    <div
+      class="member"
+      style="--member-color: #08b69f; --image-url: url('/yay/ethyl.png')"
+    >
+      <table>
+        <tr>
+          <td rowspan="3" class="avatar"></td>
+          <td colspan="1" class="name"><span>ethyl</span> <i>/eθəl/</i></td>
+          <td>41666-𝜔</td>
+        </tr>
+        <tr>
+          <td colspan="3">
+            Slime [<a href="https://pluralpedia.org/w/Chaosnaut">Chaosnaut</a>]
+          </td>
+        </tr>
+        <tr>
+          <td colspan="3">it/its (avoid "you")</td>
+        </tr>
+        <tr>
+          <td colspan="3" class="desc">
+            <p>slime. poisonous. will fight a black hole. and win.</p>
+            <p>
+              <a href="https://porcelain.doll.repair/ethyl" rel="me"
+                ><!--email off-->@ethyl@porcelain.doll.repair<!--/email off--></a
+              >
+            </p>
+          </td>
+        </tr>
+      </table>
+    </div>
+
+    <div
+      class="member"
+      style="--member-color: #ff00bf; --image-url: url('/yay/aki.jpg')"
+    >
+      <table>
+        <tr>
+          <td rowspan="3" class="avatar"></td>
+          <td colspan="1" class="name"><span>aki</span></td>
+          <td>41666-𝛾</td>
+        </tr>
+        <tr>
+          <td colspan="3">Combat Doll</td>
+        </tr>
+        <tr>
+          <td colspan="3">it/its, that one, dolly (avoid "you")</td>
+        </tr>
+        <tr>
+          <td colspan="3" class="desc">
+            <p>
+              this one is 41666-𝛾 or aki. it is not sure who it is yet. noe's
+              voidspace is aki's nullspace. it's different. maybe.
+            </p>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </section>
+  <section>
+    <h3>retired system member processes</h3>
+    <div
+      class="member"
+      style="--member-color: #303946; --image-url: url('/yay/ayanami.jpg')"
+    >
+      <table>
+        <tr>
+          <td rowspan="3" class="avatar"></td>
+          <td colspan="2" class="name"><span>ayanami</span></td>
+        </tr>
+        <tr>
+          <td colspan="3">Mech Pilot</td>
+        </tr>
+        <tr>
+          <td colspan="3">she/her</td>
+        </tr>
+        <tr>
+          <td colspan="3" class="desc">
+            <p>
+              <i
+                >a mech pilot, shattered by a cocktail of drugs and self-hatred.
+                she fell out of her seat, sliced in two.</i
+              >
+            </p>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <div
+      class="member"
+      style="--member-color: #a84e78; --image-url: url('/yay/kata.png')"
+    >
+      <table>
+        <tr>
+          <td rowspan="3" class="avatar"></td>
+          <td colspan="2" class="name"><span>kata</span></td>
+        </tr>
+        <tr>
+          <td colspan="3">
+            ? [<a href="https://pluralpedia.org/w/Trauma_holder"
+              >Trauma Holder</a
+            >] [<a href="https://pluralpedia.org/w/Original">Original</a>]
+          </td>
+        </tr>
+        <tr>
+          <td colspan="3">she/her</td>
+        </tr>
+        <tr>
+          <td colspan="3" class="desc">
+            <p>
+              <i
+                >no matter what we write here, this girl deserves more than she
+                recieved. she rests well with the void.</i
+              >
+            </p>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </section>
 </main>
--- a/t.html
+++ b/t.html
@ -0,0 +1 @@
+<a href="/if-it-dies-in-game-it-dies-in-real-life/">iidigidirl</a>
--- a/yay/aki.jpg
+++ b/yay/aki.jpg
--- a/yay/ayanami.jpg
+++ b/yay/ayanami.jpg
--- a/yay/ethyl.png
+++ b/yay/ethyl.png
--- a/yay/hide.jpg
+++ b/yay/hide.jpg
--- a/yay/kata.png
+++ b/yay/kata.png
--- a/yay/noe.png
+++ b/yay/noe.png
--- a/yay/saya.jpg
+++ b/yay/saya.jpg
Author	SHA1	Message	Date
noe	543b20a0f2	pronouns: new colors	2024-05-31 00:34:17 -04:00
noe	473cacc482	add Δ-44203 <333	2024-05-15 17:29:25 -04:00
noe	14303fce80	add pixeldesu <33	2024-05-15 10:31:49 -04:00
noe	0da32349e1	update noe intro	2024-05-15 10:14:18 -04:00
noe	790e1d862a	new index, add links to system, and add starshines!	2024-05-15 00:41:01 -04:00
noe	d2bef790a6	fix hide link	2024-05-14 02:38:42 -04:00
noe	e0732619c4	update system, swap to bunny fonts	2024-05-14 02:27:09 -04:00
noe	f7d1aaa61a	eriofdksl	2024-05-06 23:19:12 -04:00
noe	63092c66d8	what the FUCK is happening	2024-05-06 21:36:23 -04:00
noe	ea2c22bb98	base32? wtf? its 36	2024-05-03 18:28:50 -04:00
				`@ -0,0 +1 @@`
				`<a href="/if-it-dies-in-game-it-dies-in-real-life/">iidigidirl</a>`