initial

lib/html/file-tree.html

@@ -0,0 +1 @@
+<div class="tree-container mod-root nav-folder tree-item file-tree mod-nav-indicator" data-depth="0"><div class="tree-header"><span class="sidebar-section-header">PersonalNotes</span><button class="clickable-icon collapse-tree-button is-collapsed" aria-label="Collapse All"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></svg></button></div><div class="tree-scroll-area tree-item-children nav-folder-children"><div class="tree-item mod-tree-folder nav-folder mod-collapsible is-collapsed" style="display: none;"></div><div class="tree-item mod-tree-file nav-file" data-depth="1"><a class="tree-link" href="blueprint-penetration-trace.html"><div class="tree-item-contents nav-file-title"><span class="tree-item-title nav-file-title-content tree-item-inner">Blueprint Penetration Trace</span></div></a><div class="tree-item-children nav-folder-children"></div></div></div></div>

lib/media/874d8b8e340f75575caa.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns='http://www.w3.org/2000/svg' class='i-external' viewBox='0 0 32 32' width='14' height='14' fill='none' stroke='#888888' stroke-linecap='round' stroke-linejoin='round' stroke-width='9.38%'><path d='M14 9 L3 9 3 29 23 29 23 18 M18 4 L28 4 28 14 M28 4 L14 18'/></svg>

lib/metadata.json

@@ -0,0 +1,268 @@
+{
+  "vaultName": "Documentation",
+  "lastExport": 1738006194430,
+  "pluginVersion": "1.8.01",
+  "validBodyClasses": "publish css-settings-manager theme-dark show-inline-title show-ribbon",
+  "useCustomHeadContent": false,
+  "useCustomFavicon": false,
+  "files": [
+    "Blueprint Penetration Trace.md",
+    "images/traceexample.mp4",
+    "images/depthtracebychannel.png",
+    "images/depthtraceforobjects.png",
+    "images/depthtracebyprofile.png",
+    "lib/fonts/94f2f163d4b698242fef.otf",
+    "lib/fonts/72505e6a122c6acd5471.woff2",
+    "lib/fonts/2d5198822ab091ce4305.woff2",
+    "lib/fonts/c8ba52b05a9ef10f4758.woff2",
+    "lib/fonts/cb10ffd7684cd9836a05.woff2",
+    "lib/fonts/b5f0f109bc88052d4000.woff2",
+    "lib/fonts/cbe0ae49c52c920fd563.woff2",
+    "lib/fonts/535a6cf662596b3bd6a6.woff2",
+    "lib/fonts/70cc7ff27245e82ad414.ttf",
+    "lib/fonts/454577c22304619db035.ttf",
+    "lib/fonts/52ac8f3034507f1d9e53.ttf",
+    "lib/fonts/05b618077343fbbd92b7.ttf",
+    "lib/fonts/4bb6ac751d1c5478ff3a.woff2",
+    "lib/media/874d8b8e340f75575caa.svg",
+    "lib/scripts/webpage.js",
+    "lib/media/favicon.png",
+    "lib/styles/obsidian.css",
+    "lib/styles/global-variable-styles.css",
+    "lib/styles/main-styles.css",
+    "lib/styles/snippets.css"
+  ],
+  "mainDependencies": [
+    "lib/fonts/94f2f163d4b698242fef.otf",
+    "lib/fonts/72505e6a122c6acd5471.woff2",
+    "lib/fonts/2d5198822ab091ce4305.woff2",
+    "lib/fonts/c8ba52b05a9ef10f4758.woff2",
+    "lib/fonts/cb10ffd7684cd9836a05.woff2",
+    "lib/fonts/b5f0f109bc88052d4000.woff2",
+    "lib/fonts/cbe0ae49c52c920fd563.woff2",
+    "lib/fonts/535a6cf662596b3bd6a6.woff2",
+    "lib/fonts/70cc7ff27245e82ad414.ttf",
+    "lib/fonts/454577c22304619db035.ttf",
+    "lib/fonts/52ac8f3034507f1d9e53.ttf",
+    "lib/fonts/05b618077343fbbd92b7.ttf",
+    "lib/fonts/4bb6ac751d1c5478ff3a.woff2",
+    "lib/media/874d8b8e340f75575caa.svg",
+    "lib/scripts/webpage.js",
+    "lib/media/favicon.png",
+    "lib/styles/obsidian.css",
+    "lib/styles/global-variable-styles.css",
+    "lib/styles/main-styles.css",
+    "lib/styles/snippets.css"
+  ],
+  "fileInfo": {
+    "Blueprint Penetration Trace.md": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 5288,
+      "exportedPath": "blueprint-penetration-trace.html",
+      "dependencies": [
+        "images/traceexample.mp4",
+        "images/depthtracebychannel.png",
+        "images/depthtraceforobjects.png",
+        "images/depthtracebyprofile.png"
+      ]
+    },
+    "images/depthtracebychannel.png": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 40519,
+      "exportedPath": "images/depthtracebychannel.png",
+      "dependencies": []
+    },
+    "images/depthtraceforobjects.png": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 38839,
+      "exportedPath": "images/depthtraceforobjects.png",
+      "dependencies": []
+    },
+    "lib/scripts/graph-wasm.wasm": {
+      "modifiedTime": 1737999520855,
+      "sourceSize": 23377,
+      "exportedPath": "lib/scripts/graph-wasm.wasm",
+      "dependencies": []
+    },
+    "lib/fonts/94f2f163d4b698242fef.otf": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 66800,
+      "exportedPath": "lib/fonts/94f2f163d4b698242fef.otf",
+      "dependencies": []
+    },
+    "lib/fonts/72505e6a122c6acd5471.woff2": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 104232,
+      "exportedPath": "lib/fonts/72505e6a122c6acd5471.woff2",
+      "dependencies": []
+    },
+    "lib/fonts/2d5198822ab091ce4305.woff2": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 104332,
+      "exportedPath": "lib/fonts/2d5198822ab091ce4305.woff2",
+      "dependencies": []
+    },
+    "lib/fonts/c8ba52b05a9ef10f4758.woff2": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 98868,
+      "exportedPath": "lib/fonts/c8ba52b05a9ef10f4758.woff2",
+      "dependencies": []
+    },
+    "lib/fonts/cb10ffd7684cd9836a05.woff2": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 106876,
+      "exportedPath": "lib/fonts/cb10ffd7684cd9836a05.woff2",
+      "dependencies": []
+    },
+    "lib/fonts/b5f0f109bc88052d4000.woff2": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 105804,
+      "exportedPath": "lib/fonts/b5f0f109bc88052d4000.woff2",
+      "dependencies": []
+    },
+    "lib/fonts/cbe0ae49c52c920fd563.woff2": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 106108,
+      "exportedPath": "lib/fonts/cbe0ae49c52c920fd563.woff2",
+      "dependencies": []
+    },
+    "lib/fonts/535a6cf662596b3bd6a6.woff2": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 111708,
+      "exportedPath": "lib/fonts/535a6cf662596b3bd6a6.woff2",
+      "dependencies": []
+    },
+    "lib/fonts/70cc7ff27245e82ad414.ttf": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 192740,
+      "exportedPath": "lib/fonts/70cc7ff27245e82ad414.ttf",
+      "dependencies": []
+    },
+    "lib/fonts/454577c22304619db035.ttf": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 161376,
+      "exportedPath": "lib/fonts/454577c22304619db035.ttf",
+      "dependencies": []
+    },
+    "lib/fonts/52ac8f3034507f1d9e53.ttf": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 191568,
+      "exportedPath": "lib/fonts/52ac8f3034507f1d9e53.ttf",
+      "dependencies": []
+    },
+    "lib/fonts/05b618077343fbbd92b7.ttf": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 155288,
+      "exportedPath": "lib/fonts/05b618077343fbbd92b7.ttf",
+      "dependencies": []
+    },
+    "lib/fonts/4bb6ac751d1c5478ff3a.woff2": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 7876,
+      "exportedPath": "lib/fonts/4bb6ac751d1c5478ff3a.woff2",
+      "dependencies": []
+    },
+    "lib/media/874d8b8e340f75575caa.svg": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 317,
+      "exportedPath": "lib/media/874d8b8e340f75575caa.svg",
+      "dependencies": []
+    },
+    "lib/html/file-tree.html": {
+      "modifiedTime": 1737999520855,
+      "sourceSize": 1011,
+      "exportedPath": "lib/html/file-tree.html",
+      "dependencies": []
+    },
+    "lib/scripts/webpage.js": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 47290,
+      "exportedPath": "lib/scripts/webpage.js",
+      "dependencies": []
+    },
+    "lib/scripts/graph-view.js": {
+      "modifiedTime": 1737999520855,
+      "sourceSize": 15519,
+      "exportedPath": "lib/scripts/graph-view.js",
+      "dependencies": []
+    },
+    "lib/scripts/graph-wasm.js": {
+      "modifiedTime": 1737999520855,
+      "sourceSize": 14021,
+      "exportedPath": "lib/scripts/graph-wasm.js",
+      "dependencies": []
+    },
+    "lib/scripts/graph-render-worker.js": {
+      "modifiedTime": 1737999520855,
+      "sourceSize": 5179,
+      "exportedPath": "lib/scripts/graph-render-worker.js",
+      "dependencies": []
+    },
+    "lib/scripts/tinycolor.js": {
+      "modifiedTime": 1737999520855,
+      "sourceSize": 29832,
+      "exportedPath": "lib/scripts/tinycolor.js",
+      "dependencies": []
+    },
+    "lib/scripts/pixi.js": {
+      "modifiedTime": 1737999520855,
+      "sourceSize": 449509,
+      "exportedPath": "lib/scripts/pixi.js",
+      "dependencies": []
+    },
+    "lib/scripts/minisearch.js": {
+      "modifiedTime": 1738000430991,
+      "sourceSize": 29422,
+      "exportedPath": "lib/scripts/minisearch.js",
+      "dependencies": []
+    },
+    "lib/media/favicon.png": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 1105,
+      "exportedPath": "lib/media/favicon.png",
+      "dependencies": []
+    },
+    "lib/scripts/graph-data.js": {
+      "modifiedTime": 1737999520855,
+      "sourceSize": 310,
+      "exportedPath": "lib/scripts/graph-data.js",
+      "dependencies": []
+    },
+    "lib/styles/obsidian.css": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 131021,
+      "exportedPath": "lib/styles/obsidian.css",
+      "dependencies": []
+    },
+    "lib/styles/global-variable-styles.css": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 236,
+      "exportedPath": "lib/styles/global-variable-styles.css",
+      "dependencies": []
+    },
+    "lib/styles/main-styles.css": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 23130,
+      "exportedPath": "lib/styles/main-styles.css",
+      "dependencies": []
+    },
+    "lib/styles/snippets.css": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 6368,
+      "exportedPath": "lib/styles/snippets.css",
+      "dependencies": []
+    },
+    "images/depthtracebyprofile.png": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 38746,
+      "exportedPath": "images/depthtracebyprofile.png",
+      "dependencies": []
+    },
+    "images/traceexample.mp4": {
+      "modifiedTime": 1738006194430,
+      "sourceSize": 754671,
+      "exportedPath": "images/traceexample.mp4",
+      "dependencies": []
+    }
+  }
+}

lib/rss.xml

@@ -0,0 +1,24 @@
+<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Documentation]]></title><description><![CDATA[Obsidian digital garden]]></description><link>http://github.com/dylang/node-rss</link><image><url>lib/media/favicon.png</url><title>Documentation</title><link/></image><generator>Webpage HTML Export plugin for Obsidian</generator><lastBuildDate>Mon, 27 Jan 2025 19:29:54 GMT</lastBuildDate><atom:link href="lib/rss.xml" rel="self" type="application/rss+xml"/><pubDate>Mon, 27 Jan 2025 19:29:54 GMT</pubDate><copyright><![CDATA[Litruv]]></copyright><ttl>60</ttl><dc:creator>Litruv</dc:creator><item><title><![CDATA[Blueprint Penetration Trace]]></title><description><![CDATA[ 
+ <br>This is a Blueprint Function Library with a few functions that are callable in AActors to do depth trace results, for use in things like projectiles and tools.<br><br><br>
+<br>Depth-based trace
+<br>Forward and backward trace results for bullet holes
+<br>Simple to implement into existing systems
+<br>Easy debug options
+<br><br><br>This node works by simulating depth using two line traces—one forward and one backward from the point of impact. These traces scan for objects in their paths and gather information about the hit results. The distance travelled through each material is multiplied by its density (defined in the material's physical properties), which determines how much the projectile is slowed down or whether it stops entirely. Finally, the node returns a list of hit results, including the total depth.<br><br>Depth Trace by Channel<br>
+<img alt="DepthTraceByChannel.png" src="images/depthtracebychannel.png"><br>
+Depth Trace for Objects<br>
+<img alt="DepthTraceForObjects.png" src="images/depthtraceforobjects.png"><br>
+Depth Trace by Profile<br>
+<img alt="DepthTraceByProfile.png" src="images/depthtracebyprofile.png"><br><br><br><br>This can be seamlessly integrated with existing systems with minimal changes to your current blueprint setup.<br>By simply replacing your current line trace nodes with the Depth Trace node, you’ll get the added benefit of depth effects.<br><br>While adding a custom collision channel is optional, it can be a bit more time-consuming and may cause other systems in your project to break if not set up correctly. By default, your existing channels might not be set to overlap, so setting up a new custom trace channel helps ensure compatibility.<br>To set up a custom trace channel in Unreal Engine, follow these steps:<br>
+<br>Go to Project Settings → Engine → Collision.
+<br>In the Collision Channels section, click Add New.
+<br>Set the following properties for the new channel:
+
+<br>Name: Projectile (or a name of your choice)
+<br>Default Response: Overlap
+
+
+<br>For more detailed instructions on adding a custom object type to your project, you can refer to the <a data-tooltip-position="top" aria-label="https://dev.epicgames.com/documentation/en-us/unreal-engine/add-a-custom-object-type-to-your-project-in-unreal-engine" rel="noopener nofollow" class="external-link" href="https://dev.epicgames.com/documentation/en-us/unreal-engine/add-a-custom-object-type-to-your-project-in-unreal-engine" target="_blank">Unreal Engine Wiki on Custom Object Types</a>.<br><br>Default <a data-tooltip-position="top" aria-label="https://dev.epicgames.com/documentation/en-us/unreal-engine/physical-materials-user-guide-for-unreal-engine" rel="noopener nofollow" class="external-link" href="https://dev.epicgames.com/documentation/en-us/unreal-engine/physical-materials-user-guide-for-unreal-engine" target="_blank">Physical Material</a> properties are at 1 g/cm, but adding more physical properties into your game can add extra depth. <br><br><br><br><br>
+<br><a data-tooltip-position="top" aria-label="https://opengameart.org/users/loafbrr1" rel="noopener nofollow" class="external-link" href="https://opengameart.org/users/loafbrr1" target="_blank">loafbrr_1</a> for the pistol model
+<br><a data-tooltip-position="top" aria-label="https://commons.wikimedia.org/wiki/File:B1_full_size_1500_target.jpg" rel="noopener nofollow" class="external-link" href="https://commons.wikimedia.org/wiki/File:B1_full_size_1500_target.jpg" target="_blank">Neil Francis</a> for the target image
+]]></description><link>blueprint-penetration-trace.html</link><guid isPermaLink="false">Blueprint Penetration Trace.md</guid><dc:creator><![CDATA[Litruv]]></dc:creator><pubDate>Mon, 27 Jan 2025 19:29:43 GMT</pubDate><enclosure url="images/depthtracebychannel.png" length="0" type="image/png"/><content:encoded>&lt;figure&gt;&lt;img src="images/depthtracebychannel.png"&gt;&lt;/figure&gt;</content:encoded></item></channel></rss>

lib/scripts/graph-data.js

@@ -0,0 +1 @@
+let graphData={graphOptions:{attractionForce:1,linkLength:10,repulsionForce:150,centralForce:3,edgePruning:100,minNodeRadius:3,maxNodeRadius:7},isInitialized:!0,paths:["blueprint-penetration-trace.html"],nodeCount:1,linkSources:[],linkTargets:[],labels:["Blueprint Penetration Trace"],radii:[null],linkCount:0}

lib/styles/global-variable-styles.css

@@ -0,0 +1 @@
+:root body{--line-width:min(40em, calc(100vw - 2em));--line-width-adaptive:min(40em, calc(100vw - 2em));--file-line-width:min(40em, calc(100vw - 2em));--sidebar-width:min(20em, 80vw)}body{--zoom-factor:1!important;--font-text-size:16px}

lib/styles/snippets.css

@@ -0,0 +1,31 @@
+:root{--pen-white:#edf1fc;--pen-gray:#5f5d58;--pen-black:#26241f;--pen-red:#e14a49;--pen-green:#15b64f;--pen-blue:#3f76ed;--pen-light-blue:#54b6f8;--pen-purple:#9b4ff0;--neutral-pen-black:#272727;--neutral-pen-black-trans:#27272722;--page-white:#ffffff;--page-manila:#f3deaf;--page-blue:#3f76ed;--grid-size:32px}.recolor-images img{filter:var(--image-effect)}.page-blueprint,.page-manila,.page-white{--text-normal:var(--accent-color);--text-muted:var(--accent-color);--text-faint:var(--accent-color-trans);--h1-color:var(--accent-color);--h2-color:var(--accent-color);--h3-color:var(--accent-color);--h4-color:var(--accent-color);--h5-color:var(--accent-color);--h6-color:var(--accent-color);--link-color:var(--pen-blue);--link-color-hover:var(--pen-light-blue);--link-unresolved-color:var(--pen-red);--hr-color:var(--accent-color);--blockquote-border-color:var(--accent-color);--embed-border-left:2px solid var(--accent-color);--collapse-icon-color-collapsed:var(--accent-color);--checkbox-color:var(--accent-color);--checkbox-marker-color:var(--page-color);--checkbox-color-hover:var(--accent-color-trans);--checkbox-border-color:var(--accent-color);--checklist-done-color:var(--accent-color);--list-marker-color:var(--accent-color);--interactive-accent:var(--accent-color);--metadata-label-text-color:var(--accent-color);--metadata-input-text-color:var(--accent-color);--tag-color:var(--accent-color);--tag-background:var(--accent-color-trans);--pill-cover-hover:color-mix(in srgb, var(--accent-color) 60%, transparent);--background-modifier-border-focus:var(--accent-color);--background-modifier-border:var(--accent-color-trans);--background-modifier-hover:color-mix(
+    in srgb,
+    var(--accent-color) 60%,
+    transparent
+  );color:var(--accent-color);background-color:var(--page-color);font-weight:700}.page-manila{--page-color:var(--page-manila);--accent-color:var(--pen-black);--accent-color-trans:color-mix(
+    in srgb,
+    var(--accent-color) 15%,
+    transparent
+  );--image-effect:brightness(0) saturate(100%) invert(14%) sepia(19%) saturate(296%) hue-rotate(5deg) brightness(90%) contrast(96%);color-scheme:light}.embed-manila img{background-color:var(--page-manila)}.page-white{--page-color:var(--page-white);--accent-color:var(--neutral-pen-black);--accent-color-trans:color-mix(
+    in srgb,
+    var(--accent-color) 15%,
+    transparent
+  );--image-effect:brightness(0) saturate(100%) invert(14%) sepia(19%) saturate(296%) hue-rotate(5deg) brightness(90%) contrast(96%);color-scheme:light}.embed-white img{background-color:var(--page-white)}.page-blueprint{--page-color:var(--page-blue);--accent-color:var(--pen-white);--accent-color-trans:color-mix(
+    in srgb,
+    var(--accent-color) 15%,
+    transparent
+  );--image-effect:brightness(0) saturate(100%) invert(89%) sepia(1%) saturate(2714%) hue-rotate(196deg) brightness(107%) contrast(98%);color-scheme:dark;--link-color:color-mix(in srgb, var(--pen-light-blue) 60%, var(--pen-white));--link-color-hover:color-mix(
+    in srgb,
+    var(--pen-light-blue) 20%,
+    var(--pen-white)
+  )}.embed-blueprint img{background-color:var(--page-blue)}.page-grid{background-image:linear-gradient(0deg,transparent 0,var(--accent-color-trans) 1px,var(--accent-color-trans) 2px,transparent 3px),linear-gradient(90deg,transparent calc(var(--grid-size) - 3px),var(--accent-color-trans) calc(var(--grid-size) - 2px),var(--accent-color-trans) calc(var(--grid-size) - 1px),transparent var(--grid-size));background-size:var(--grid-size) var(--grid-size)}:is(
+.page-white,.page-manila,.page-blueprint,.pen-white,.pen-blue,.pen-red,.pen-green,.pen-black,.pen-gray,.pen-purple
+) svg{color:color-mix(in srgb,var(--accent-color) 60%,transparent)}:is(.page-white,.page-manila,.page-blueprint) :is(code,.HyperMD-codeblock,.cm-inline-code){--code-normal:var(--accent-color);--code-background:color-mix(
+    in srgb,
+    var(--page-color) 80%,
+    black
+  )!important}div>pre{--code-background:color-mix(
+    in srgb,
+    var(--page-color) 80%,
+    black
+  )!important}:is(.page-white,.page-manila,.page-blueprint){--metadata-input-background-active:var(--accent-color-trans)}.pen-white{--accent-color:var(--pen-white);--accent-color-trans:color-mix(in srgb, var(--pen-white) 15%, transparent);color:var(--accent-color);--hr-color:var(--accent-color);--image-effect:brightness(0) saturate(100%) invert(89%) sepia(1%) saturate(2714%) hue-rotate(196deg) brightness(107%) contrast(98%)}.pen-blue{--accent-color:var(--pen-blue);--accent-color-trans:color-mix(in srgb, var(--pen-blue) 15%, transparent);color:var(--accent-color);--hr-color:var(--accent-color);--image-effect:brightness(0) saturate(100%) invert(36%) sepia(95%) saturate(945%) hue-rotate(199deg) brightness(95%) contrast(95%)}.pen-red{--accent-color:var(--pen-red);--accent-color-trans:color-mix(in srgb, var(--pen-red) 15%, transparent);color:var(--accent-color);--hr-color:var(--accent-color);--image-effect:brightness(0) saturate(100%) invert(40%) sepia(41%) saturate(1024%) hue-rotate(316deg) brightness(99%) contrast(94%)}.pen-green{--accent-color:var(--pen-green);--accent-color-trans:color-mix(in srgb, var(--pen-green) 15%, transparent);color:var(--accent-color);--hr-color:var(--accent-color);--image-effect:brightness(0) saturate(100%) invert(52%) sepia(60%) saturate(2521%) hue-rotate(105deg) brightness(96%) contrast(84%)}.pen-black{--accent-color:var(--pen-black);--accent-color-trans:color-mix(in srgb, var(--pen-black) 15%, transparent);color:var(--accent-color);--hr-color:var(--accent-color);--image-effect:brightness(0) saturate(100%) invert(14%) sepia(19%) saturate(296%) hue-rotate(5deg) brightness(90%) contrast(96%)}.pen-gray{--accent-color:var(--pen-gray);--accent-color-trans:color-mix(in srgb, var(--pen-gray) 15%, transparent);color:var(--accent-color);--hr-color:var(--accent-color);--image-effect:brightness(0) saturate(100%) invert(35%) sepia(13%) saturate(189%) hue-rotate(5deg) brightness(96%) contrast(86%)}.pen-purple{--accent-color:var(--pen-purple);--accent-color-trans:color-mix(in srgb, var(--pen-purple) 15%, transparent);color:var(--accent-color);--hr-color:var(--accent-color);--image-effect:brightness(0) saturate(100%) invert(33%) sepia(59%) saturate(2620%) hue-rotate(249deg) brightness(98%) contrast(93%)}img[alt=left]{float:left;margin-right:10px;max-width:65%}img[alt=right]{float:right;margin-left:10px;max-width:65%}