added more complex cybersigilism generator

frontend/src/styles/global.css

@@ -837,6 +837,15 @@ code, pre, kbd, samp {
   text-transform: uppercase;
   backdrop-filter: blur(3px);
 }
+/* Draft/"Sketch" marker — same chip, pinned bottom-left, amber instead of
+ * the neutral catalogue tag. Themed per skin below (no inline colors). */
+.plate-tag-mini--draft {
+  left: 16px;
+  right: auto;
+  background: color-mix(in srgb, var(--peach) 88%, var(--crust));
+  color: var(--crust);
+  border-color: color-mix(in srgb, var(--peach) 45%, transparent);
+}
 /* Breakcore: hard neon catalogue tag — sharp rect, offset shadow, glow.
  * Matches the layer's hazard-tape / hard-offset chrome language. */
 .breakcore .plate-tag-mini {
@@ -853,6 +862,14 @@ code, pre, kbd, samp {
     0 0 14px -2px color-mix(in srgb, var(--mauve) 65%, transparent);
   backdrop-filter: none;
 }
+.breakcore .plate-tag-mini--draft {
+  color: var(--peach);
+  border-color: var(--peach);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--peach) 60%, transparent);
+  box-shadow:
+    2px 2px 0 var(--peach),
+    0 0 14px -2px color-mix(in srgb, var(--peach) 65%, transparent);
+}
 
 /* Nameplate — the museum-style header used in the site chrome */
 .nameplate {
@@ -2033,8 +2050,7 @@ html.cybersigil body::after {
   height: 100%;
   overflow: visible;
 }
-.cybersigil .cs-sigil path,
-.cybersigil .cs-sigil line {
+.cybersigil .cs-sigil path {
   fill: none;
   stroke: var(--sky);
   stroke-width: 2;
@@ -2044,7 +2060,11 @@ html.cybersigil body::after {
   stroke-dasharray: 1;
   stroke-dashoffset: 1;
 }
-.cybersigil .cs-sig-spine { opacity: 0.45; stroke-width: 1.4; }
+/* Stroke-weight tiers — heavy growth, hair filaments, prickly barbs, motifs. */
+.cybersigil .cs-sigil .cs-sig-main { stroke-width: 2.4; }
+.cybersigil .cs-sigil .cs-sig-fil  { stroke-width: 0.9; opacity: 0.5; }
+.cybersigil .cs-sigil .cs-sig-barb { stroke-width: 1.3; }
+.cybersigil .cs-sigil .cs-sig-orn  { stroke-width: 1.7; opacity: 0.92; }
 
 @keyframes cs-carve {
   to { stroke-dashoffset: 0; }
@@ -2167,21 +2187,21 @@ html.cybersigil body::after {
     0 22px 44px -28px rgba(79, 233, 255, 0.26),
     0 0 26px -10px color-mix(in srgb, var(--mauve) 34%, transparent);
 }
+/* Thin engraved corner brackets. The deliberate sigil motif now comes from
+ * the generated cs-plate-sig, so the old organic leaf masks are dropped. */
 .cybersigil .plate::before,
 .cybersigil .plate::after {
   content: "";
   position: absolute;
-  width: 34px;
-  height: 34px;
-  background-color: color-mix(in srgb, var(--sky) 78%, transparent);
-  -webkit-mask: var(--cs-corner) center / contain no-repeat;
-  mask: var(--cs-corner) center / contain no-repeat;
-  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--sky) 45%, transparent));
+  width: 20px;
+  height: 20px;
   pointer-events: none;
-  transition: background-color 0.18s ease, filter 0.18s ease;
+  border: 0 solid color-mix(in srgb, var(--sky) 55%, transparent);
+  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--sky) 32%, transparent));
+  transition: border-color 0.18s ease, filter 0.18s ease;
 }
-.cybersigil .plate::before { top: 5px; left: 5px; }
-.cybersigil .plate::after  { right: 5px; bottom: 5px; transform: scale(-1); }
+.cybersigil .plate::before { top: 6px; left: 6px; border-top-width: 2px; border-left-width: 2px; }
+.cybersigil .plate::after  { right: 6px; bottom: 6px; border-right-width: 2px; border-bottom-width: 2px; }
 .cybersigil .plate:hover {
   transform: translateY(-3px);
   box-shadow:
@@ -2192,7 +2212,7 @@ html.cybersigil body::after {
 }
 .cybersigil .plate:hover::before,
 .cybersigil .plate:hover::after {
-  background-color: var(--mauve);
+  border-color: var(--mauve);
   filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mauve) 60%, transparent));
 }
 .cybersigil .plate:focus-visible {
@@ -2290,22 +2310,8 @@ html.cybersigil body::after {
   animation: cs-databend 560ms steps(5, jump-none) 1;
 }
 
-/* Prose image framing — thorny growth at opposing corners + cold edge. */
-.cybersigil .prose figure { position: relative; }
-.cybersigil .prose figure::before,
-.cybersigil .prose figure::after {
-  content: "";
-  position: absolute;
-  width: 40px;
-  height: 40px;
-  background-color: color-mix(in srgb, var(--sky) 70%, transparent);
-  -webkit-mask: var(--cs-corner) center / contain no-repeat;
-  mask: var(--cs-corner) center / contain no-repeat;
-  pointer-events: none;
-  z-index: 1;
-}
-.cybersigil .prose figure::before { top: -8px; left: -8px; }
-.cybersigil .prose figure::after  { right: -8px; bottom: -8px; transform: scale(-1); }
+/* Prose image framing — cold gradient edge only. Old corner leaf masks
+ * removed; figural sigils are no longer pinned to post images. */
 .cybersigil .prose figure img,
 .cybersigil .prose img {
   background:
@@ -2694,6 +2700,16 @@ html.cybersigil body::after {
   font-weight: 700;
   text-transform: uppercase;
 }
+/* Sketch marker reads as an unstable/draft signal — amber glyph, split
+ * chromatic shadow, hard offset, matching the corrupted-terminal language. */
+.cybersigil .plate-tag-mini--draft {
+  color: var(--peach);
+  border-color: var(--peach);
+  box-shadow: 2px 2px 0 color-mix(in srgb, var(--peach) 70%, transparent);
+  text-shadow:
+    -1px 0 0 color-mix(in srgb, var(--peach) 65%, transparent),
+    1px 0 0 color-mix(in srgb, var(--sky) 55%, transparent);
+}
 .cybersigil .kbd-tip {
   background: var(--crust);
   border-color: var(--mauve);