Update README.md

README.md

@@ -8,31 +8,86 @@ library_name: transformers
 tags:
 - mergekit
 - merge
-
+- roleplay
+- storytelling
+license: apache-2.0
 ---
-# merge
+<section class="card">
+<div class="frame-outer" aria-hidden="true"></div>
+<div class="frame-inner" aria-hidden="true"></div>
+
+<figure class="hero">
+<div class="hero-shell">
+<img src="cover.png" alt="Lucent-Witch-31B artwork">
+</div>
+</figure>
 
-This is a merge of pre-trained language models created using [mergekit](https://github.com/cg123/mergekit).
+<div class="content">
 
-## Merge Details
-### Merge Method
+<header class="header">
+<div class="upper-rune" aria-hidden="true">
+<span></span>
+<i>✦</i>
+<b>◇</b>
+<i>✦</i>
+<span></span>
+</div>
 
-This model was merged using the BSC (Balanced Spherical Composition) merge method using [google/gemma-4-31B-it](https://huggingface.co/google/gemma-4-31B-it) as a base.
+<div class="title-sigil" aria-hidden="true">
+<div class="sigil-ray sigil-ray-left"></div>
+<div class="sigil-center">
+<span>◇</span>
+<i>◆</i>
+</div>
+<div class="sigil-ray sigil-ray-right"></div>
+</div>
 
-### Models Merged
+<h1>Lucent-Witch-31B</h1>
 
-The following models were included in the merge:
-* [Darkhn/Gemma-4-31B-Animus-V15.0](https://huggingface.co/Darkhn/Gemma-4-31B-Animus-V15.0)
-* [Vortex5/Helios-Flare-31B](https://huggingface.co/Vortex5/Helios-Flare-31B)
-* [Vortex5/Scarlet-Shadow-31B](https://huggingface.co/Vortex5/Scarlet-Shadow-31B)
+<div class="title-rule" aria-hidden="true">
+<span></span>
+<i>✦</i>
+<b>◇</b>
+<i>✦</i>
+<span></span>
+</div>
+</header>
 
-### Configuration
+<section class="section">
+<div class="heading">
+<span class="heading-sigil" aria-hidden="true">✦</span>
+<h2>Overview</h2>
+<span class="heading-line" aria-hidden="true"></span>
+</div>
 
-The following YAML configuration was used to produce this model:
+<div class="overview">
+<div class="overview-corner overview-corner-a" aria-hidden="true"></div>
+<div class="overview-corner overview-corner-b" aria-hidden="true"></div>
+<div class="overview-rune" aria-hidden="true">◇</div>
 
-```yaml
+<div class="overview-inner">
+<p>
+<strong>Lucent-Witch-31B</strong> was created by combining
+<a href="https://huggingface.co/google/gemma-4-31B-it">gemma-4-31B-it</a>,
+<a href="https://huggingface.co/Vortex5/Helios-Flare-31B">Helios-Flare-31B</a>,
+<a href="https://huggingface.co/Vortex5/Scarlet-Shadow-31B">Scarlet-Shadow-31B</a>,
+and
+<a href="https://huggingface.co/Darkhn/Gemma-4-31B-Animus-V15.0">Gemma-4-31B-Animus-V15.0</a>
+using a custom merge method.
+</p>
+</div>
 
-base_model: google/gemma-4-31B-it
+<details class="config">
+<summary>
+<span class="config-name">
+<span class="config-glyph" aria-hidden="true">◆</span>
+Merge Configuration
+</span>
+<span class="config-toggle" aria-hidden="true"></span>
+</summary>
+
+<div class="code-wrap">
+<pre><code>base_model: google/gemma-4-31B-it
 models:
   - model: Vortex5/Helios-Flare-31B
     parameters:
@@ -128,6 +183,1924 @@ parameters:
 dtype: float32
 out_dtype: bfloat16
 tokenizer:
-  source: base
+  source: base</code></pre>
+</div>
+</details>
+</div>
+</section>
+
+<section class="section">
+<div class="heading">
+<span class="heading-sigil" aria-hidden="true">✦</span>
+<h2>Intended Use</h2>
+<span class="heading-line" aria-hidden="true"></span>
+</div>
+
+<div class="spellbook">
+<div class="spellbook-back-rune" aria-hidden="true">◇</div>
+
+<div class="spell-cap spell-cap-top" aria-hidden="true">
+<span></span>
+<i>✦</i>
+<b>◇</b>
+<i>✦</i>
+<span></span>
+</div>
+
+<div class="spell-list">
+
+<article class="spell-item">
+<div class="spell-node" aria-hidden="true">
+<span>◇</span>
+</div>
+<div class="spell-copy">
+<h3>Roleplay</h3>
+<p>Character-driven interaction, personas, dialogue, emotional scenes, and long-form roleplay.</p>
+</div>
+<div class="spell-tail" aria-hidden="true">✦</div>
+</article>
+
+<article class="spell-item">
+<div class="spell-node" aria-hidden="true">
+<span>◆</span>
+</div>
+<div class="spell-copy">
+<h3>Creative Writing</h3>
+<p>Fiction, dialogue, atmosphere, descriptive writing, stylistic drafting, and imaginative prose.</p>
+</div>
+<div class="spell-tail" aria-hidden="true">◇</div>
+</article>
+
+<article class="spell-item">
+<div class="spell-node" aria-hidden="true">
+<span>✧</span>
+</div>
+<div class="spell-copy">
+<h3>Storytelling</h3>
+<p>Long-form narratives, worldbuilding, continuity, evolving characters, and multi-character plots.</p>
+</div>
+<div class="spell-tail" aria-hidden="true">◆</div>
+</article>
+
+<article class="spell-item">
+<div class="spell-node" aria-hidden="true">
+<span>✦</span>
+</div>
+<div class="spell-copy">
+<h3>Interactive Fiction</h3>
+<p>Branching narratives, scenario play, character interaction, and continuously evolving stories.</p>
+</div>
+<div class="spell-tail" aria-hidden="true">◇</div>
+</article>
+
+</div>
+
+<div class="spell-cap spell-cap-bottom" aria-hidden="true">
+<span></span>
+<i>✦</i>
+<b>◆</b>
+<i>✦</i>
+<span></span>
+</div>
+</div>
+</section>
+
+</div>
+</section>
+
+<style>
+.card,
+.card * {
+  box-sizing: border-box;
+}
+
+.card {
+  --black: #000000;
+  --black-soft: #020102;
+  --panel: #060307;
+
+  --violet-deep: #1c0628;
+  --violet-dark: #321040;
+  --violet: #653282;
+  --violet-bright: #9655bb;
+  --violet-light: #bc80d7;
+
+  --lavender: #d5b5e4;
+  --lavender-pale: #eadcf1;
+
+  --text: #c8b9cb;
+  --text-soft: #aa97ae;
+  --text-dim: #756579;
+
+  position: relative;
+  isolation: isolate;
+
+  container-type: inline-size;
+
+  width: 100%;
+  max-width: 1472px;
+
+  margin: 40px auto;
+
+  overflow: hidden;
+
+  color: var(--text);
+
+  border:
+    1px solid rgba(112, 56, 137, 0.52);
+
+  background:
+    radial-gradient(
+      ellipse at 50% -5%,
+      rgba(95, 37, 124, 0.17),
+      transparent 39%
+    ),
+    radial-gradient(
+      ellipse at 0% 61%,
+      rgba(65, 22, 84, 0.07),
+      transparent 34%
+    ),
+    radial-gradient(
+      ellipse at 100% 79%,
+      rgba(77, 27, 99, 0.06),
+      transparent 35%
+    ),
+    #000000;
+
+  font-family:
+    "Palatino Linotype",
+    Palatino,
+    "Book Antiqua",
+    Georgia,
+    serif;
+
+  box-shadow:
+    inset 0 0 84px rgba(0, 0, 0, 0.96);
+}
+
+.card::before {
+  content: "";
+
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+
+  pointer-events: none;
+
+  background:
+    repeating-linear-gradient(
+      122deg,
+      transparent 0,
+      transparent 94px,
+      rgba(160, 95, 188, 0.008) 95px,
+      transparent 96px
+    ),
+    repeating-linear-gradient(
+      32deg,
+      transparent 0,
+      transparent 151px,
+      rgba(112, 55, 137, 0.007) 152px,
+      transparent 153px
+    );
+}
+
+.card::after {
+  content: "";
+
+  position: absolute;
+  z-index: -1;
+
+  left: 12%;
+  right: 12%;
+  bottom: -140px;
+
+  height: 290px;
+
+  pointer-events: none;
+
+  background:
+    radial-gradient(
+      ellipse at 50% 100%,
+      rgba(90, 30, 115, 0.09),
+      transparent 70%
+    );
+}
+
+.frame-outer {
+  position: absolute;
+  inset: 7px;
+  z-index: 30;
+
+  pointer-events: none;
+
+  border:
+    1px solid rgba(157, 90, 184, 0.16);
+}
+
+.frame-inner {
+  position: absolute;
+  inset: 12px;
+  z-index: 30;
+
+  pointer-events: none;
+
+  border:
+    1px solid rgba(112, 54, 137, 0.065);
+}
+
+.hero {
+  position: relative;
+  z-index: 2;
+
+  margin: 0;
+
+  padding:
+    7px 7px 0;
+
+  background:
+    #000000;
+}
+
+.hero-shell {
+  position: relative;
+
+  overflow: hidden;
+
+  border:
+    1px solid rgba(109, 50, 133, 0.38);
+
+  background:
+    #000000;
+}
+
+.hero img {
+  display: block;
+
+  width: 100%;
+  height: auto;
+
+  margin: 0;
+
+  border: 0;
+
+  opacity: 1;
+
+  filter: none;
+
+  box-shadow: none;
+}
+
+.content {
+  position: relative;
+  z-index: 2;
+
+  padding:
+    52px 22px
+    64px;
+
+  background:
+    linear-gradient(
+      180deg,
+      #000000 0%,
+      rgba(3, 1, 4, 0.997) 48%,
+      #000000 100%
+    );
+}
+
+.header {
+  position: relative;
+
+  width: 100%;
+
+  margin-bottom:
+    78px;
+
+  text-align:
+    center;
+}
+
+.upper-rune {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width:
+    min(280px, 76%);
+
+  margin:
+    0 auto 21px;
+}
+
+.upper-rune span {
+  flex: 1;
+
+  height: 1px;
+
+  background:
+    linear-gradient(
+      90deg,
+      transparent,
+      rgba(136, 67, 162, 0.39)
+    );
+}
+
+.upper-rune span:last-child {
+  transform:
+    scaleX(-1);
+}
+
+.upper-rune i,
+.upper-rune b {
+  font-style: normal;
+  font-weight: 400;
+}
+
+.upper-rune i {
+  margin:
+    0 6px;
+
+  color:
+    rgba(168, 101, 194, 0.56);
+
+  font-size:
+    0.5rem;
+}
+
+.upper-rune b {
+  margin:
+    0 4px;
+
+  color:
+    rgba(207, 151, 226, 0.78);
+
+  font-size:
+    0.7rem;
+}
+
+.title-sigil {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width:
+    min(220px, 64%);
+
+  height:
+    52px;
+
+  margin:
+    0 auto 18px;
+}
+
+.sigil-ray {
+  width:
+    52px;
+
+  height:
+    23px;
+
+  border-top:
+    1px solid rgba(137, 69, 164, 0.30);
+
+  border-bottom:
+    1px solid rgba(81, 34, 100, 0.17);
+}
+
+.sigil-ray-left {
+  transform:
+    skewY(-18deg);
+}
+
+.sigil-ray-right {
+  transform:
+    skewY(18deg);
+}
+
+.sigil-center {
+  position: relative;
+
+  width:
+    48px;
+
+  height:
+    48px;
+
+  margin:
+    0 11px;
+}
+
+.sigil-center::before,
+.sigil-center::after {
+  content: "";
+
+  position: absolute;
+
+  left: 50%;
+  top: 50%;
+
+  border:
+    1px solid rgba(146, 77, 173, 0.34);
+
+  transform:
+    translate(-50%, -50%)
+    rotate(45deg);
+}
+
+.sigil-center::before {
+  width:
+    33px;
+
+  height:
+    33px;
+}
+
+.sigil-center::after {
+  width:
+    18px;
+
+  height:
+    18px;
+
+  border-color:
+    rgba(188, 120, 211, 0.27);
+}
+
+.sigil-center span,
+.sigil-center i {
+  position: absolute;
+
+  left: 50%;
+
+  transform:
+    translateX(-50%);
+
+  font-style: normal;
+}
+
+.sigil-center span {
+  top:
+    -3px;
+
+  color:
+    rgba(178, 109, 202, 0.68);
+
+  font-size:
+    0.54rem;
+}
+
+.sigil-center i {
+  bottom:
+    -2px;
+
+  color:
+    rgba(196, 133, 216, 0.62);
+
+  font-size:
+    0.42rem;
+}
+
+.header h1 {
+  display: block;
+
+  width: 100%;
+  max-width: 100%;
+
+  margin: 0;
+
+  padding: 0;
+
+  color:
+    var(--lavender-pale);
+
+  font-family:
+    "Perpetua Titling MT",
+    Perpetua,
+    Constantia,
+    Georgia,
+    serif;
+
+  font-size:
+    1.85rem;
+
+  font-size:
+    clamp(1.85rem, 8cqw, 4.6rem);
+
+  font-style:
+    normal;
+
+  font-synthesis:
+    none;
+
+  font-weight:
+    400;
+
+  line-height:
+    1;
+
+  letter-spacing:
+    0.012em;
+
+  text-align:
+    center;
+
+  text-transform:
+    uppercase;
+
+  white-space:
+    nowrap;
+
+  text-shadow:
+    0 0 5px rgba(162, 86, 190, 0.28),
+    0 0 22px rgba(76, 23, 95, 0.33);
+}
+
+.title-rule {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width:
+    min(260px, 72%);
+
+  margin:
+    26px auto 0;
+}
+
+.title-rule span {
+  flex: 1;
+
+  height: 1px;
+
+  background:
+    linear-gradient(
+      90deg,
+      transparent,
+      rgba(132, 65, 158, 0.42)
+    );
+}
+
+.title-rule span:last-child {
+  transform:
+    scaleX(-1);
+}
+
+.title-rule i,
+.title-rule b {
+  font-style: normal;
+
+  font-weight: 400;
+}
+
+.title-rule i {
+  margin:
+    0 6px;
+
+  color:
+    rgba(148, 82, 174, 0.52);
+
+  font-size:
+    0.42rem;
+}
+
+.title-rule b {
+  margin:
+    0 4px;
+
+  color:
+    rgba(194, 127, 216, 0.72);
+
+  font-size:
+    0.52rem;
+}
+
+.section {
+  position: relative;
+
+  margin-bottom:
+    82px;
+}
+
+.section:last-of-type {
+  margin-bottom:
+    0;
+}
+
+.heading {
+  display: flex;
+
+  align-items:
+    center;
+
+  width:
+    100%;
+
+  margin-bottom:
+    27px;
+}
+
+.heading-sigil {
+  flex:
+    0 0 auto;
+
+  margin-right:
+    10px;
+
+  color:
+    var(--violet-light);
+
+  font-size:
+    0.72rem;
+
+  text-shadow:
+    0 0 8px rgba(101, 42, 126, 0.46);
+}
+
+.heading h2 {
+  flex:
+    0 0 auto;
+
+  margin:
+    0;
+
+  color:
+    var(--lavender);
+
+  font-family:
+    Perpetua,
+    Constantia,
+    "Palatino Linotype",
+    Georgia,
+    serif;
+
+  font-size:
+    1.22rem;
+
+  font-style:
+    normal;
+
+  font-synthesis:
+    none;
+
+  font-weight:
+    400;
+
+  line-height:
+    1;
+
+  letter-spacing:
+    0.06em;
+
+  text-transform:
+    uppercase;
+}
+
+.heading-line {
+  flex: 1;
+
+  min-width:
+    20px;
+
+  height:
+    1px;
+
+  margin-left:
+    12px;
+
+  background:
+    linear-gradient(
+      90deg,
+      rgba(145, 76, 173, 0.40),
+      rgba(79, 33, 99, 0.13) 50%,
+      transparent 96%
+    );
+}
+
+.overview {
+  position: relative;
+
+  overflow: hidden;
+
+  border:
+    1px solid rgba(100, 48, 122, 0.34);
+
+  background:
+    radial-gradient(
+      circle at 0% 0%,
+      rgba(86, 29, 108, 0.11),
+      transparent 31%
+    ),
+    linear-gradient(
+      145deg,
+      rgba(8, 4, 10, 0.98),
+      rgba(2, 1, 3, 0.995) 60%,
+      rgba(5, 2, 7, 0.99)
+    );
+
+  box-shadow:
+    inset 0 1px 0 rgba(200, 150, 220, 0.03),
+    inset 0 0 34px rgba(64, 19, 82, 0.075);
+}
+
+.overview::before {
+  content: "";
+
+  position: absolute;
+
+  top: 0;
+  left: 0;
+
+  width:
+    43%;
+
+  height:
+    1px;
+
+  background:
+    linear-gradient(
+      90deg,
+      rgba(191, 121, 216, 0.60),
+      transparent
+    );
+}
+
+.overview-corner {
+  position: absolute;
+
+  width:
+    28px;
+
+  height:
+    28px;
+
+  pointer-events: none;
+}
+
+.overview-corner-a {
+  left:
+    7px;
+
+  top:
+    7px;
+
+  border-left:
+    1px solid rgba(165, 100, 194, 0.18);
+
+  border-top:
+    1px solid rgba(165, 100, 194, 0.18);
+}
+
+.overview-corner-b {
+  right:
+    7px;
+
+  bottom:
+    7px;
+
+  border-right:
+    1px solid rgba(165, 100, 194, 0.15);
+
+  border-bottom:
+    1px solid rgba(165, 100, 194, 0.15);
+}
+
+.overview-rune {
+  position: absolute;
+
+  right:
+    14px;
+
+  top:
+    13px;
+
+  color:
+    rgba(137, 75, 162, 0.11);
+
+  font-size:
+    2.2rem;
+
+  transform:
+    rotate(45deg);
+}
+
+.overview-inner {
+  position: relative;
+
+  z-index:
+    2;
+
+  padding:
+    27px 21px 24px;
+}
+
+.overview-inner p {
+  margin: 0;
+
+  color:
+    var(--text);
+
+  font-size:
+    1rem;
+
+  line-height:
+    1.78;
+}
+
+.overview-inner strong {
+  color:
+    var(--lavender);
+
+  font-weight:
+    600;
+}
+
+.overview-inner a {
+  color:
+    #bb7bd0;
+
+  text-decoration:
+    none;
+
+  border-bottom:
+    1px solid rgba(140, 73, 163, 0.42);
+}
+
+.overview-inner a:hover {
+  color:
+    #e0bae9;
+
+  border-bottom-color:
+    rgba(190, 127, 214, 0.72);
+}
+
+.config {
+  position: relative;
+
+  width:
+    calc(100% - 16px);
+
+  margin:
+    0 8px 8px;
+
+  overflow:
+    hidden;
+
+  border:
+    1px solid rgba(83, 39, 101, 0.31);
+
+  background:
+    #020102;
+}
+
+.config summary {
+  display: flex;
+
+  align-items:
+    center;
+
+  justify-content:
+    space-between;
+
+  min-height:
+    54px;
+
+  padding:
+    12px 13px;
+
+  cursor:
+    pointer;
+
+  list-style:
+    none;
+
+  color:
+    #c6a0d4;
+
+  font-family:
+    Perpetua,
+    Constantia,
+    "Palatino Linotype",
+    Georgia,
+    serif;
+
+  font-size:
+    0.8rem;
+
+  font-style:
+    normal;
+
+  font-synthesis:
+    none;
+
+  font-weight:
+    400;
+
+  letter-spacing:
+    0.05em;
+
+  text-transform:
+    uppercase;
+
+  background:
+    linear-gradient(
+      90deg,
+      rgba(71, 22, 90, 0.16),
+      transparent 54%
+    );
+}
+
+.config summary:hover {
+  background:
+    linear-gradient(
+      90deg,
+      rgba(91, 30, 114, 0.22),
+      transparent 58%
+    );
+}
+
+.config summary::-webkit-details-marker {
+  display:
+    none;
+}
+
+.config-name {
+  display: flex;
+
+  align-items:
+    center;
+}
+
+.config-glyph {
+  margin-right:
+    8px;
+
+  color:
+    var(--violet-light);
+
+  font-size:
+    0.58rem;
+}
+
+.config-toggle {
+  position: relative;
+
+  flex:
+    0 0 auto;
+
+  width:
+    17px;
+
+  height:
+    17px;
+
+  margin-left:
+    8px;
+}
+
+.config-toggle::before,
+.config-toggle::after {
+  content: "";
+
+  position: absolute;
+
+  left: 50%;
+
+  top: 50%;
+
+  background:
+    rgba(183, 116, 207, 0.74);
+
+  transform:
+    translate(-50%, -50%);
+
+  transition:
+    transform 0.2s ease;
+}
+
+.config-toggle::before {
+  width:
+    11px;
+
+  height:
+    1px;
+}
+
+.config-toggle::after {
+  width:
+    1px;
+
+  height:
+    11px;
+}
+
+.config[open] .config-toggle::after {
+  transform:
+    translate(-50%, -50%)
+    rotate(90deg);
+}
+
+.code-wrap {
+  border-top:
+    1px solid rgba(78, 34, 97, 0.27);
+
+  background:
+    #000000;
+}
+
+.config pre {
+  margin:
+    0;
+
+  padding:
+    18px 13px 22px;
+
+  overflow-x:
+    auto;
+
+  color:
+    #b3a4b7;
+
+  font-family:
+    Consolas,
+    Monaco,
+    "Lucida Console",
+    monospace;
+
+  font-size:
+    0.69rem;
+
+  line-height:
+    1.58;
+
+  white-space:
+    pre;
+
+  background:
+    radial-gradient(
+      circle at 100% 0%,
+      rgba(72, 22, 92, 0.065),
+      transparent 36%
+    ),
+    #000000;
+}
+
+.config code {
+  color:
+    inherit;
+
+  font-family:
+    inherit;
+}
+
+.spellbook {
+  position: relative;
+
+  overflow: hidden;
+
+  padding:
+    33px 15px 36px;
+
+  border-top:
+    1px solid rgba(131, 65, 158, 0.36);
+
+  border-bottom:
+    1px solid rgba(78, 34, 96, 0.29);
+
+  background:
+    radial-gradient(
+      ellipse at 50% 48%,
+      rgba(74, 24, 95, 0.08),
+      transparent 44%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(5, 2, 7, 0.91),
+      rgba(1, 1, 2, 0.97)
+    );
+}
+
+.spellbook::before {
+  content: "";
+
+  position: absolute;
+
+  left:
+    35px;
+
+  top:
+    65px;
+
+  bottom:
+    65px;
+
+  width:
+    1px;
+
+  background:
+    linear-gradient(
+      180deg,
+      transparent,
+      rgba(127, 62, 153, 0.34) 8%,
+      rgba(127, 62, 153, 0.34) 92%,
+      transparent
+    );
+}
+
+.spellbook::after {
+  content: "";
+
+  position: absolute;
+
+  left:
+    34px;
+
+  top:
+    50%;
+
+  width:
+    3px;
+
+  height:
+    58%;
+
+  transform:
+    translateY(-50%);
+
+  background:
+    radial-gradient(
+      ellipse,
+      rgba(131, 68, 157, 0.17),
+      transparent 72%
+    );
+
+  pointer-events:
+    none;
+}
+
+.spellbook-back-rune {
+  position: absolute;
+
+  right:
+    -27px;
+
+  top:
+    50%;
+
+  transform:
+    translateY(-50%)
+    rotate(45deg);
+
+  color:
+    rgba(128, 67, 151, 0.045);
+
+  font-size:
+    10rem;
+
+  pointer-events:
+    none;
+}
+
+.spell-cap {
+  position: relative;
+
+  z-index:
+    2;
+
+  display:
+    flex;
+
+  align-items:
+    center;
+
+  justify-content:
+    center;
+
+  width:
+    min(240px, 82%);
+
+  margin:
+    0 auto;
+}
+
+.spell-cap-top {
+  margin-bottom:
+    22px;
+}
+
+.spell-cap-bottom {
+  margin-top:
+    24px;
+}
+
+.spell-cap span {
+  flex:
+    1;
+
+  height:
+    1px;
+
+  background:
+    linear-gradient(
+      90deg,
+      transparent,
+      rgba(128, 63, 154, 0.34)
+    );
+}
+
+.spell-cap span:last-child {
+  transform:
+    scaleX(-1);
+}
+
+.spell-cap i,
+.spell-cap b {
+  font-style:
+    normal;
+
+  font-weight:
+    400;
+}
+
+.spell-cap i {
+  margin:
+    0 6px;
+
+  color:
+    rgba(145, 82, 171, 0.48);
+
+  font-size:
+    0.42rem;
+}
+
+.spell-cap b {
+  margin:
+    0 4px;
+
+  color:
+    rgba(192, 127, 214, 0.65);
+
+  font-size:
+    0.56rem;
+}
+
+.spell-list {
+  position: relative;
+
+  z-index:
+    2;
+}
+
+.spell-item {
+  position: relative;
+
+  display: grid;
+
+  grid-template-columns:
+    44px minmax(0, 1fr) 20px;
+
+  gap:
+    0 12px;
+
+  align-items:
+    center;
+
+  min-height:
+    124px;
+
+  padding:
+    21px 5px 21px 0;
+
+  border-bottom:
+    1px solid rgba(77, 33, 95, 0.27);
+}
+
+.spell-item:last-child {
+  border-bottom:
+    0;
+}
+
+.spell-item::before {
+  content: "";
+
+  position: absolute;
+
+  left:
+    35px;
+
+  top:
+    0;
+
+  width:
+    34%;
+
+  height:
+    1px;
+
+  opacity:
+    0;
+
+  background:
+    linear-gradient(
+      90deg,
+      rgba(184, 110, 208, 0.46),
+      transparent
+    );
+
+  transition:
+    opacity 0.2s ease;
+}
+
+.spell-item:hover::before {
+  opacity:
+    1;
+}
+
+.spell-item:hover {
+  background:
+    linear-gradient(
+      90deg,
+      rgba(91, 28, 114, 0.07),
+      transparent 80%
+    );
+}
+
+.spell-node {
+  position: relative;
+
+  display: flex;
+
+  align-items:
+    center;
+
+  justify-content:
+    center;
+
+  width:
+    44px;
+
+  height:
+    44px;
+}
+
+.spell-node::before {
+  content: "";
+
+  position: absolute;
+
+  left:
+    50%;
+
+  top:
+    50%;
+
+  width:
+    24px;
+
+  height:
+    24px;
+
+  border:
+    1px solid rgba(145, 75, 173, 0.43);
+
+  background:
+    #050207;
+
+  transform:
+    translate(-50%, -50%)
+    rotate(45deg);
+}
+
+.spell-node::after {
+  content: "";
+
+  position: absolute;
+
+  left:
+    50%;
+
+  top:
+    50%;
+
+  width:
+    11px;
+
+  height:
+    11px;
+
+  border:
+    1px solid rgba(188, 118, 211, 0.21);
+
+  transform:
+    translate(-50%, -50%)
+    rotate(45deg);
+}
+
+.spell-node span {
+  position: relative;
+
+  z-index:
+    2;
+
+  color:
+    #c991dc;
+
+  font-size:
+    0.54rem;
+}
+
+.spell-copy {
+  min-width:
+    0;
+
+  padding:
+    3px 0;
+}
+
+.spell-copy h3 {
+  margin:
+    0 0 9px;
+
+  color:
+    #e0bee9;
+
+  font-family:
+    Perpetua,
+    Constantia,
+    "Palatino Linotype",
+    Georgia,
+    serif;
+
+  font-size:
+    1.16rem;
+
+  font-style:
+    normal;
+
+  font-synthesis:
+    none;
+
+  font-weight:
+    400;
+
+  line-height:
+    1.18;
+
+  letter-spacing:
+    0.03em;
+}
+
+.spell-copy p {
+  margin:
+    0;
+
+  color:
+    var(--text-soft);
+
+  font-size:
+    0.92rem;
+
+  line-height:
+    1.64;
+
+  overflow-wrap:
+    normal;
+
+  word-break:
+    normal;
+}
+
+.spell-tail {
+  display:
+    flex;
+
+  align-items:
+    center;
+
+  justify-content:
+    center;
+
+  color:
+    rgba(156, 87, 182, 0.45);
+
+  font-size:
+    0.43rem;
+}
+
+@container (min-width: 430px) {
+  .content {
+    padding:
+      65px 36px
+      76px;
+  }
+
+  .header {
+    margin-bottom:
+      94px;
+  }
+
+  .title-sigil {
+    width:
+      250px;
+
+    height:
+      58px;
+
+    margin-bottom:
+      21px;
+  }
+
+  .header h1 {
+    font-size:
+      2.25rem;
+
+    font-size:
+      clamp(2.25rem, 8cqw, 4.6rem);
+
+    letter-spacing:
+      0.025em;
+  }
+
+  .title-rule {
+    margin-top:
+      30px;
+  }
+
+  .heading h2 {
+    font-size:
+      1.4rem;
+  }
+
+  .heading-sigil {
+    font-size:
+      0.82rem;
+  }
+
+  .overview-inner {
+    padding:
+      31px 27px 28px;
+  }
+
+  .overview-inner p {
+    font-size:
+      1.08rem;
+
+    line-height:
+      1.82;
+  }
+
+  .config summary {
+    min-height:
+      60px;
+
+    padding:
+      14px 16px;
+
+    font-size:
+      0.9rem;
+  }
+
+  .config pre {
+    padding:
+      21px 16px 25px;
+
+    font-size:
+      0.76rem;
+
+    line-height:
+      1.62;
+  }
+
+  .spellbook {
+    padding:
+      39px 22px 42px;
+  }
+
+  .spellbook::before {
+    left:
+      42px;
+  }
+
+  .spellbook::after {
+    left:
+      41px;
+  }
+
+  .spell-item {
+    grid-template-columns:
+      52px minmax(0, 1fr) 22px;
+
+    gap:
+      0 16px;
+
+    min-height:
+      137px;
+
+    padding:
+      23px 8px 23px 0;
+  }
+
+  .spell-item::before {
+    left:
+      43px;
+  }
+
+  .spell-node {
+    width:
+      52px;
+
+    height:
+      52px;
+  }
+
+  .spell-node::before {
+    width:
+      28px;
+
+    height:
+      28px;
+  }
+
+  .spell-copy h3 {
+    font-size:
+      1.3rem;
+
+    margin-bottom:
+      10px;
+  }
+
+  .spell-copy p {
+    font-size:
+      1rem;
+
+    line-height:
+      1.68;
+  }
+}
+
+@container (min-width: 700px) {
+  .content {
+    padding:
+      80px 62px
+      92px;
+  }
+
+  .header {
+    margin-bottom:
+      108px;
+  }
+
+  .title-sigil {
+    width:
+      300px;
+
+    height:
+      66px;
+  }
+
+  .header h1 {
+    font-size:
+      3.45rem;
+
+    font-size:
+      clamp(3.45rem, 7.4cqw, 4.6rem);
+
+    letter-spacing:
+      0.04em;
+  }
+
+  .section {
+    margin-bottom:
+      108px;
+  }
+
+  .heading {
+    margin-bottom:
+      32px;
+  }
+
+  .heading h2 {
+    font-size:
+      1.65rem;
+  }
+
+  .overview-inner {
+    padding:
+      39px 37px 35px;
+  }
+
+  .overview-inner p {
+    font-size:
+      1.16rem;
+
+    line-height:
+      1.88;
+  }
+
+  .config {
+    width:
+      calc(100% - 28px);
+
+    margin:
+      0 14px 14px;
+  }
+
+  .config summary {
+    min-height:
+      66px;
+
+    padding:
+      15px 19px;
+
+    font-size:
+      1rem;
+  }
+
+  .config pre {
+    padding:
+      25px 20px 29px;
+
+    font-size:
+      0.84rem;
+
+    line-height:
+      1.65;
+  }
+
+  .spellbook {
+    padding:
+      48px 38px 52px;
+  }
+
+  .spellbook::before {
+    left:
+      53px;
+  }
+
+  .spellbook::after {
+    left:
+      52px;
+  }
+
+  .spell-item {
+    grid-template-columns:
+      66px minmax(0, 1fr) 28px;
+
+    gap:
+      0 21px;
+
+    min-height:
+      150px;
+
+    padding:
+      26px 11px 26px 0;
+  }
+
+  .spell-item::before {
+    left:
+      54px;
+  }
+
+  .spell-node {
+    width:
+      66px;
+
+    height:
+      66px;
+  }
+
+  .spell-node::before {
+    width:
+      32px;
+
+    height:
+      32px;
+  }
+
+  .spell-node::after {
+    width:
+      14px;
+
+    height:
+      14px;
+  }
+
+  .spell-node span {
+    font-size:
+      0.65rem;
+  }
+
+  .spell-copy h3 {
+    font-size:
+      1.5rem;
+
+    margin-bottom:
+      11px;
+  }
+
+  .spell-copy p {
+    max-width:
+      790px;
+
+    font-size:
+      1.08rem;
+
+    line-height:
+      1.72;
+  }
+}
+
+@container (min-width: 1000px) {
+  .content {
+    padding:
+      94px 92px
+      108px;
+  }
+
+  .header {
+    margin-bottom:
+      122px;
+  }
+
+  .title-sigil {
+    width:
+      350px;
+
+    height:
+      74px;
+  }
+
+  .sigil-ray {
+    width:
+      78px;
+
+    height:
+      36px;
+  }
+
+  .sigil-center {
+    width:
+      64px;
+
+    height:
+      64px;
+
+    margin:
+      0 18px;
+  }
+
+  .sigil-center::before {
+    width:
+      42px;
+
+    height:
+      42px;
+  }
+
+  .sigil-center::after {
+    width:
+      24px;
+
+    height:
+      24px;
+  }
+
+  .header h1 {
+    font-size:
+      4.6rem;
+
+    letter-spacing:
+      0.055em;
+  }
+
+  .heading h2 {
+    font-size:
+      1.82rem;
+  }
+
+  .overview-inner p {
+    font-size:
+      1.2rem;
+  }
+
+  .spellbook {
+    padding:
+      55px 56px 60px;
+  }
+
+  .spell-copy h3 {
+    font-size:
+      1.58rem;
+  }
+
+  .spell-copy p {
+    font-size:
+      1.12rem;
+  }
+}
 
-```
+@media (max-width: 760px) {
+  .card {
+    margin:
+      24px auto;
+  }
+}
+</style>