Adds 8ED and MRD, beginning of new SVG mask layer approach over the font approach due to Safari's lack of ::marker content support. Will be branching to move to that display method.

dist/css/keyrune-full.css

@@ -14,8 +14,8 @@
 
 @font-face {
   font-family: "keyrune";
-  src: url("../font/keyrune.eot?4.0.57");
+  src: url("../font/keyrune.eot?4.0.94");
-  src: url("../font/keyrune.eot?4.0.57#iefix") format("embedded-opentype"), url("../font/keyrune.woff2?4.0.57") format("woff2"), url("../font/keyrune.ttf?4.0.57") format("truetype"), url("../font/keyrune.woff?4.0.57") format("woff"), url("../font/keyrune.svg?4.0.57#keyrune") format("svg");
+  src: url("../font/keyrune.eot?4.0.94#iefix") format("embedded-opentype"), url("../font/keyrune.woff2?4.0.94") format("woff2"), url("../font/keyrune.ttf?4.0.94") format("truetype"), url("../font/keyrune.woff?4.0.94") format("woff"), url("../font/keyrune.svg?4.0.94#keyrune") format("svg");
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -37,6 +37,9 @@
 .ss::before {
   background: var(--ss-rarity-bg);
 }
+.ss-lea {
+  --aspect-ratio: ;
+}
 .ss-lea::before {
   content: "\e000";
 }
@@ -46,6 +49,9 @@
 .ss-lea.ss-inner::marker {
   content: "\e002";
 }
+.ss-leb {
+  --aspect-ratio: ;
+}
 .ss-leb::before {
   content: "\e003";
 }
@@ -55,6 +61,9 @@
 .ss-leb.ss-inner::marker {
   content: "\e005";
 }
+.ss-2ed {
+  --aspect-ratio: ;
+}
 .ss-2ed::before {
   content: "\e006";
 }
@@ -64,6 +73,9 @@
 .ss-2ed.ss-inner::marker {
   content: "\e008";
 }
+.ss-ced {
+  --aspect-ratio: ;
+}
 .ss-ced::before {
   content: "\e009";
 }
@@ -73,6 +85,9 @@
 .ss-ced.ss-inner::marker {
   content: "\e00b";
 }
+.ss-cei {
+  --aspect-ratio: ;
+}
 .ss-cei::before {
   content: "\e00c";
 }
@@ -82,6 +97,9 @@
 .ss-cei.ss-inner::marker {
   content: "\e00e";
 }
+.ss-arn {
+  --aspect-ratio: 1.75;
+}
 .ss-arn::before {
   content: "\e00f";
 }
@@ -91,6 +109,9 @@
 .ss-arn.ss-inner::marker {
   content: "\e011";
 }
+.ss-atq {
+  --aspect-ratio: 1.029;
+}
 .ss-atq::before {
   content: "\e012";
 }
@@ -100,6 +121,9 @@
 .ss-atq.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-3ed {
+  --aspect-ratio: ;
+}
 .ss-3ed::before {
   content: "\e015";
 }
@@ -109,6 +133,9 @@
 .ss-3ed.ss-inner::marker {
   content: "\e017";
 }
+.ss-fbb {
+  --aspect-ratio: ;
+}
 .ss-fbb::before {
   content: "\e018";
 }
@@ -118,6 +145,9 @@
 .ss-fbb.ss-inner::marker {
   content: "\e01a";
 }
+.ss-leg {
+  --aspect-ratio: ;
+}
 .ss-leg::before {
   content: "\e01b";
 }
@@ -127,6 +157,9 @@
 .ss-leg.ss-inner::marker {
   content: "\e01d";
 }
+.ss-sum {
+  --aspect-ratio: ;
+}
 .ss-sum::before {
   content: "\e01e";
 }
@@ -136,6 +169,9 @@
 .ss-sum.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pdrc {
+  --aspect-ratio: ;
+}
 .ss-pdrc::before {
   content: "\e021";
 }
@@ -145,6 +181,9 @@
 .ss-pdrc.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-drk {
+  --aspect-ratio: ;
+}
 .ss-drk::before {
   content: "\e024";
 }
@@ -154,6 +193,9 @@
 .ss-drk.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-phpr {
+  --aspect-ratio: ;
+}
 .ss-phpr::before {
   content: "\e027";
 }
@@ -163,6 +205,9 @@
 .ss-phpr.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-fem {
+  --aspect-ratio: ;
+}
 .ss-fem::before {
   content: "\e02a";
 }
@@ -172,6 +217,9 @@
 .ss-fem.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pmei {
+  --aspect-ratio: ;
+}
 .ss-pmei::before {
   content: "\e02d";
 }
@@ -217,6 +265,9 @@
 .ss-olep.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pmtg {
+  --aspect-ratio: ;
+}
 .ss-pmtg::before {
   content: "\e030";
 }
@@ -298,6 +349,9 @@
 .ss-wc98.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-4ed {
+  --aspect-ratio: ;
+}
 .ss-4ed::before {
   content: "\e033";
 }
@@ -307,6 +361,9 @@
 .ss-4ed.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-4bb {
+  --aspect-ratio: ;
+}
 .ss-4bb::before {
   content: "\e036";
 }
@@ -316,6 +373,9 @@
 .ss-4bb.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ice {
+  --aspect-ratio: ;
+}
 .ss-ice::before {
   content: "\e039";
 }
@@ -325,6 +385,9 @@
 .ss-ice.ss-inner::marker {
   content: "\e03b";
 }
+.ss-chr {
+  --aspect-ratio: ;
+}
 .ss-chr::before {
   content: "\e03c";
 }
@@ -334,6 +397,9 @@
 .ss-chr.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ren {
+  --aspect-ratio: ;
+}
 .ss-ren::before {
   content: "\e03f";
 }
@@ -343,6 +409,9 @@
 .ss-ren.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-rin {
+  --aspect-ratio: ;
+}
 .ss-rin::before {
   content: "\e042";
 }
@@ -352,6 +421,9 @@
 .ss-rin.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-hml {
+  --aspect-ratio: ;
+}
 .ss-hml::before {
   content: "\e045";
 }
@@ -361,6 +433,9 @@
 .ss-hml.ss-inner::marker {
   content: "\e047";
 }
+.ss-all {
+  --aspect-ratio: ;
+}
 .ss-all::before {
   content: "\e048";
 }
@@ -370,6 +445,9 @@
 .ss-all.ss-inner::marker {
   content: "\e04a";
 }
+.ss-mir {
+  --aspect-ratio: ;
+}
 .ss-mir::before {
   content: "\e04b";
 }
@@ -379,6 +457,9 @@
 .ss-mir.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-itp {
+  --aspect-ratio: ;
+}
 .ss-itp::before {
   content: "\e04e";
 }
@@ -388,6 +469,9 @@
 .ss-itp.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-vis {
+  --aspect-ratio: ;
+}
 .ss-vis::before {
   content: "\e051";
 }
@@ -406,6 +490,9 @@
 .ss-mgb.ss-inner::marker {
   content: "\e053";
 }
+.ss-5ed {
+  --aspect-ratio: ;
+}
 .ss-5ed::before {
   content: "\e054";
 }
@@ -415,6 +502,9 @@
 .ss-5ed.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-past {
+  --aspect-ratio: ;
+}
 .ss-past::before {
   content: "\e057";
 }
@@ -433,6 +523,9 @@
 .ss-pmic.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-por {
+  --aspect-ratio: ;
+}
 .ss-por::before {
   content: "\e05a";
 }
@@ -442,6 +535,9 @@
 .ss-por.ss-inner::marker {
   content: "\e05c";
 }
+.ss-pvan {
+  --aspect-ratio: ;
+}
 .ss-pvan::before {
   content: "\e05d";
 }
@@ -460,6 +556,9 @@
 .ss-van.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-wth {
+  --aspect-ratio: ;
+}
 .ss-wth::before {
   content: "\e060";
 }
@@ -469,6 +568,9 @@
 .ss-wth.ss-inner::marker {
   content: "\e062";
 }
+.ss-tmp {
+  --aspect-ratio: ;
+}
 .ss-tmp::before {
   content: "\e063";
 }
@@ -487,6 +589,9 @@
 .ss-ptmp.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-sth {
+  --aspect-ratio: ;
+}
 .ss-sth::before {
   content: "\e066";
 }
@@ -505,6 +610,9 @@
 .ss-psth.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-exo {
+  --aspect-ratio: ;
+}
 .ss-exo::before {
   content: "\e069";
 }
@@ -523,6 +631,9 @@
 .ss-pexo.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-p02 {
+  --aspect-ratio: ;
+}
 .ss-p02::before {
   content: "\e06c";
 }
@@ -532,6 +643,9 @@
 .ss-p02.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ugl {
+  --aspect-ratio: ;
+}
 .ss-ugl::before {
   content: "\e06f";
 }
@@ -550,6 +664,9 @@
 .ss-tugl.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-palp {
+  --aspect-ratio: ;
+}
 .ss-palp::before {
   content: "\e072";
 }
@@ -568,6 +685,9 @@
 .ss-papac.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-usg {
+  --aspect-ratio: ;
+}
 .ss-usg::before {
   content: "\e075";
 }
@@ -577,6 +697,9 @@
 .ss-usg.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ath {
+  --aspect-ratio: ;
+}
 .ss-ath::before {
   content: "\e078";
 }
@@ -586,6 +709,9 @@
 .ss-ath.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ulg {
+  --aspect-ratio: ;
+}
 .ss-ulg::before {
   content: "\e07b";
 }
@@ -595,6 +721,9 @@
 .ss-ulg.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-6ed {
+  --aspect-ratio: ;
+}
 .ss-6ed::before {
   content: "\e07e";
 }
@@ -613,6 +742,9 @@
 .ss-6e.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-uds {
+  --aspect-ratio: ;
+}
 .ss-uds::before {
   content: "\e081";
 }
@@ -622,6 +754,9 @@
 .ss-uds.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-s99 {
+  --aspect-ratio: ;
+}
 .ss-s99::before {
   content: "\e084";
 }
@@ -631,6 +766,9 @@
 .ss-s99.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ptk {
+  --aspect-ratio: ;
+}
 .ss-ptk::before {
   content: "\e087";
 }
@@ -649,6 +787,9 @@
 .ss-p3k.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pgru {
+  --aspect-ratio: ;
+}
 .ss-pgru::before {
   content: "\e08a";
 }
@@ -658,6 +799,9 @@
 .ss-pgru.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-mmq {
+  --aspect-ratio: ;
+}
 .ss-mmq::before {
   content: "\e08d";
 }
@@ -676,6 +820,9 @@
 .ss-mm.ss-inner::marker {
   content: "\e08f";
 }
+.ss-brb {
+  --aspect-ratio: ;
+}
 .ss-brb::before {
   content: "\e090";
 }
@@ -685,6 +832,9 @@
 .ss-brb.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-fnm {
+  --aspect-ratio: ;
+}
 .ss-fnm::before {
   content: "\e093";
 }
@@ -694,6 +844,9 @@
 .ss-fnm.ss-inner::marker {
   content: "\e095";
 }
+.ss-pal00 {
+  --aspect-ratio: ;
+}
 .ss-pal00::before {
   content: "\e096";
 }
@@ -712,6 +865,9 @@
 .ss-pal02.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pelp {
+  --aspect-ratio: ;
+}
 .ss-pelp::before {
   content: "\e099";
 }
@@ -730,6 +886,9 @@
 .ss-peuro.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-nem {
+  --aspect-ratio: ;
+}
 .ss-nem::before {
   content: "\e09c";
 }
@@ -757,6 +916,9 @@
 .ss-ne.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-s00 {
+  --aspect-ratio: ;
+}
 .ss-s00::before {
   content: "\e09f";
 }
@@ -775,6 +937,9 @@
 .ss-p4.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pcy {
+  --aspect-ratio: ;
+}
 .ss-pcy::before {
   content: "\e0a2";
 }
@@ -793,6 +958,9 @@
 .ss-py.ss-inner::marker {
   content: "\e0a4";
 }
+.ss-btd {
+  --aspect-ratio: ;
+}
 .ss-btd::before {
   content: "\e0a5";
 }
@@ -811,6 +979,9 @@
 .ss-bd.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-inv {
+  --aspect-ratio: ;
+}
 .ss-inv::before {
   content: "\e0a8";
 }
@@ -829,6 +1000,9 @@
 .ss-in.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-mpr {
+  --aspect-ratio: ;
+}
 .ss-mpr::before {
   content: "\e0ab";
 }
@@ -838,6 +1012,9 @@
 .ss-mpr.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pls {
+  --aspect-ratio: ;
+}
 .ss-pls::before {
   content: "\e0ae";
 }
@@ -856,6 +1033,9 @@
 .ss-ps.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-7ed {
+  --aspect-ratio: ;
+}
 .ss-7ed::before {
   content: "\e0b1";
 }
@@ -874,6 +1054,9 @@
 .ss-7e.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-apc {
+  --aspect-ratio: ;
+}
 .ss-apc::before {
   content: "\e0b4";
 }
@@ -892,6 +1075,9 @@
 .ss-ap.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-psdg {
+  --aspect-ratio: ;
+}
 .ss-psdg::before {
   content: "\e0b7";
 }
@@ -910,6 +1096,9 @@
 .ss-psega.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ody {
+  --aspect-ratio: ;
+}
 .ss-ody::before {
   content: "\e0ba";
 }
@@ -928,6 +1117,9 @@
 .ss-od.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-dkm {
+  --aspect-ratio: ;
+}
 .ss-dkm::before {
   content: "\e0bd";
 }
@@ -937,6 +1129,9 @@
 .ss-dkm.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-tor {
+  --aspect-ratio: ;
+}
 .ss-tor::before {
   content: "\e0c0";
 }
@@ -946,6 +1141,9 @@
 .ss-tor.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-jud {
+  --aspect-ratio: ;
+}
 .ss-jud::before {
   content: "\e0c3";
 }
@@ -955,6 +1153,9 @@
 .ss-jud.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-prm {
+  --aspect-ratio: ;
+}
 .ss-prm::before {
   content: "\e0c6";
 }
@@ -964,6 +1165,9 @@
 .ss-prm.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ons {
+  --aspect-ratio: ;
+}
 .ss-ons::before {
   content: "\e0c9";
 }
@@ -973,6 +1177,9 @@
 .ss-ons.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-lgn {
+  --aspect-ratio: ;
+}
 .ss-lgn::before {
   content: "\e0cc";
 }
@@ -982,6 +1189,9 @@
 .ss-lgn.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-scg {
+  --aspect-ratio: ;
+}
 .ss-scg::before {
   content: "\e0cf";
 }
@@ -991,6 +1201,45 @@
 .ss-scg.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-8ed {
+  --aspect-ratio: 0.9583;
+}
+.ss-8ed::before {
+  content: "\e0d2";
+}
+.ss-8ed.ss-border::after {
+  content: "\e0d3";
+}
+.ss-8ed.ss-inner::marker {
+  content: "\f8ff";
+}
+.ss-mrd {
+  --aspect-ratio: 1.3958;
+}
+.ss-mrd::before {
+  content: "\e0d5";
+}
+.ss-mrd.ss-border::after {
+  content: "\e0d6";
+}
+.ss-mrd.ss-inner::marker {
+  content: "\f8ff";
+}
+.ss-8edalt {
+  --aspect-ratio: 0.9583;
+}
+.ss-8edalt::before {
+  content: "\f8e7";
+}
+.ss-8edalt.ss-border::after {
+  content: "\f8ff";
+}
+.ss-8edalt.ss-inner::marker {
+  content: "\f8ff";
+}
+.ss-4eda {
+  --aspect-ratio: ;
+}
 .ss-4eda::before {
   content: "\f8f6";
 }
@@ -1000,6 +1249,9 @@
 .ss-4eda.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-legchr {
+  --aspect-ratio: ;
+}
 .ss-legchr::before {
   content: "\f8f4";
 }
@@ -1018,6 +1270,9 @@
 .ss-leg2.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pgc98 {
+  --aspect-ratio: ;
+}
 .ss-pgc98::before {
   content: "\f8f2";
 }
@@ -1036,6 +1291,9 @@
 .ss-o90p.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-po {
+  --aspect-ratio: ;
+}
 .ss-po::before {
   content: "\f8f0";
 }
@@ -1054,6 +1312,9 @@
 .ss-por2.ss-inner::marker {
   content: "\f8ee";
 }
+.ss-wl {
+  --aspect-ratio: ;
+}
 .ss-wl::before {
   content: "\f8ed";
 }
@@ -1072,6 +1333,9 @@
 .ss-wth2.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-brbalt {
+  --aspect-ratio: ;
+}
 .ss-brbalt::before {
   content: "\f8eb";
 }
@@ -1081,6 +1345,9 @@
 .ss-brbalt.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-s00alt {
+  --aspect-ratio: ;
+}
 .ss-s00alt::before {
   content: "\f8e9";
 }
@@ -1224,17 +1491,45 @@
   left: 50%;
   transform: translateX(-50%);
 }
-.ss.ss-fw.ss-fw-square {
+.ss.ss-uw {
+  align-items: center;
+  display: inline-flex;
+  height: 1em;
   width: 1em;
 }
-.ss.ss-fw.ss-fw-square::before {
+.ss.ss-uw::before, .ss.ss-uw::after {
-  transform: scale(0.5714);
+  font-size: calc(1em / var(--aspect-ratio));
-}
-.ss.ss-fw.ss-fw-square.ss-border::after, .ss.ss-fw.ss-fw-square.ss-inner::before, .ss.ss-fw.ss-fw-square.ss-inner::after, .ss.ss-fw.ss-fw-square.ss-inner::marker {
-  transform: translateX(-50%) scale(0.5714);
 }
 .ss.ss-white::before, .ss.ss-white::after, .ss.ss-white::marker {
   color: #fff;
 }
 
+@-moz-document url-prefix() {
+  .ss-fnm::before, .ss-pfnm::before {
+    margin-left: -0.4%;
+  }
+  .ss-7ed::before, .ss-7e::before {
+    margin-left: 0.5%;
+  }
+  .ss-ody::before, .ss-od::before {
+    margin-left: -1.3%;
+  }
+}
+_::-webkit-full-page-media .ss-inner, _:future .ss-inner, :root .safari_only .ss-inner {
+  display: none !important;
+}
+
+.ss-8ed:not(.ss-border):not(.ss-inner)::before {
+  content: "\f8e7";
+}
+.ss-8ed.ss-rarity-common.ss-border::after {
+  --ss-border: var(--ss-border-contrast);
+}
+.ss-8ed.ss-rarity-common.ss-inner::marker {
+  --ss-inner: #fff;
+}
+.ss-8ed.ss-rarity-uncommon.ss-inner::marker, .ss-8ed.ss-rarity-rare.ss-inner::marker, .ss-8ed.ss-rarity-mythic.ss-inner::marker, .ss-8ed.ss-rarity-foil.ss-inner::marker {
+  --ss-inner: var(--ss-border-contrast);
+}
+
 /*# sourceMappingURL=keyrune-full.css.map */

dist/css/keyrune.css

@@ -14,8 +14,8 @@
 
 @font-face {
   font-family: "keyrune";
-  src: url("../font/keyrune.eot?4.0.57");
+  src: url("../font/keyrune.eot?4.0.94");
-  src: url("../font/keyrune.eot?4.0.57#iefix") format("embedded-opentype"), url("../font/keyrune.woff2?4.0.57") format("woff2"), url("../font/keyrune.ttf?4.0.57") format("truetype"), url("../font/keyrune.woff?4.0.57") format("woff"), url("../font/keyrune.svg?4.0.57#keyrune") format("svg");
+  src: url("../font/keyrune.eot?4.0.94#iefix") format("embedded-opentype"), url("../font/keyrune.woff2?4.0.94") format("woff2"), url("../font/keyrune.ttf?4.0.94") format("truetype"), url("../font/keyrune.woff?4.0.94") format("woff"), url("../font/keyrune.svg?4.0.94#keyrune") format("svg");
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -37,6 +37,9 @@
 .ss::before {
   background: var(--ss-rarity-bg);
 }
+.ss-lea {
+  --aspect-ratio: ;
+}
 .ss-lea::before {
   content: "\e000";
 }
@@ -46,6 +49,9 @@
 .ss-lea.ss-inner::marker {
   content: "\e002";
 }
+.ss-leb {
+  --aspect-ratio: ;
+}
 .ss-leb::before {
   content: "\e003";
 }
@@ -55,6 +61,9 @@
 .ss-leb.ss-inner::marker {
   content: "\e005";
 }
+.ss-2ed {
+  --aspect-ratio: ;
+}
 .ss-2ed::before {
   content: "\e006";
 }
@@ -64,6 +73,9 @@
 .ss-2ed.ss-inner::marker {
   content: "\e008";
 }
+.ss-ced {
+  --aspect-ratio: ;
+}
 .ss-ced::before {
   content: "\e009";
 }
@@ -73,6 +85,9 @@
 .ss-ced.ss-inner::marker {
   content: "\e00b";
 }
+.ss-cei {
+  --aspect-ratio: ;
+}
 .ss-cei::before {
   content: "\e00c";
 }
@@ -82,6 +97,9 @@
 .ss-cei.ss-inner::marker {
   content: "\e00e";
 }
+.ss-arn {
+  --aspect-ratio: 1.75;
+}
 .ss-arn::before {
   content: "\e00f";
 }
@@ -91,6 +109,9 @@
 .ss-arn.ss-inner::marker {
   content: "\e011";
 }
+.ss-atq {
+  --aspect-ratio: 1.029;
+}
 .ss-atq::before {
   content: "\e012";
 }
@@ -100,6 +121,9 @@
 .ss-atq.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-3ed {
+  --aspect-ratio: ;
+}
 .ss-3ed::before {
   content: "\e015";
 }
@@ -109,6 +133,9 @@
 .ss-3ed.ss-inner::marker {
   content: "\e017";
 }
+.ss-fbb {
+  --aspect-ratio: ;
+}
 .ss-fbb::before {
   content: "\e018";
 }
@@ -118,6 +145,9 @@
 .ss-fbb.ss-inner::marker {
   content: "\e01a";
 }
+.ss-leg {
+  --aspect-ratio: ;
+}
 .ss-leg::before {
   content: "\e01b";
 }
@@ -127,6 +157,9 @@
 .ss-leg.ss-inner::marker {
   content: "\e01d";
 }
+.ss-sum {
+  --aspect-ratio: ;
+}
 .ss-sum::before {
   content: "\e01e";
 }
@@ -136,6 +169,9 @@
 .ss-sum.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pdrc {
+  --aspect-ratio: ;
+}
 .ss-pdrc::before {
   content: "\e021";
 }
@@ -145,6 +181,9 @@
 .ss-pdrc.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-drk {
+  --aspect-ratio: ;
+}
 .ss-drk::before {
   content: "\e024";
 }
@@ -154,6 +193,9 @@
 .ss-drk.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-phpr {
+  --aspect-ratio: ;
+}
 .ss-phpr::before {
   content: "\e027";
 }
@@ -163,6 +205,9 @@
 .ss-phpr.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-fem {
+  --aspect-ratio: ;
+}
 .ss-fem::before {
   content: "\e02a";
 }
@@ -172,6 +217,9 @@
 .ss-fem.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pmei {
+  --aspect-ratio: ;
+}
 .ss-pmei::before {
   content: "\e02d";
 }
@@ -190,6 +238,9 @@
 .ss-pleaf.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pmtg {
+  --aspect-ratio: ;
+}
 .ss-pmtg::before {
   content: "\e030";
 }
@@ -217,6 +268,9 @@
 .ss-parl.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-4ed {
+  --aspect-ratio: ;
+}
 .ss-4ed::before {
   content: "\e033";
 }
@@ -226,6 +280,9 @@
 .ss-4ed.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-4bb {
+  --aspect-ratio: ;
+}
 .ss-4bb::before {
   content: "\e036";
 }
@@ -235,6 +292,9 @@
 .ss-4bb.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ice {
+  --aspect-ratio: ;
+}
 .ss-ice::before {
   content: "\e039";
 }
@@ -244,6 +304,9 @@
 .ss-ice.ss-inner::marker {
   content: "\e03b";
 }
+.ss-chr {
+  --aspect-ratio: ;
+}
 .ss-chr::before {
   content: "\e03c";
 }
@@ -253,6 +316,9 @@
 .ss-chr.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ren {
+  --aspect-ratio: ;
+}
 .ss-ren::before {
   content: "\e03f";
 }
@@ -262,6 +328,9 @@
 .ss-ren.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-rin {
+  --aspect-ratio: ;
+}
 .ss-rin::before {
   content: "\e042";
 }
@@ -271,6 +340,9 @@
 .ss-rin.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-hml {
+  --aspect-ratio: ;
+}
 .ss-hml::before {
   content: "\e045";
 }
@@ -280,6 +352,9 @@
 .ss-hml.ss-inner::marker {
   content: "\e047";
 }
+.ss-all {
+  --aspect-ratio: ;
+}
 .ss-all::before {
   content: "\e048";
 }
@@ -289,6 +364,9 @@
 .ss-all.ss-inner::marker {
   content: "\e04a";
 }
+.ss-mir {
+  --aspect-ratio: ;
+}
 .ss-mir::before {
   content: "\e04b";
 }
@@ -298,6 +376,9 @@
 .ss-mir.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-itp {
+  --aspect-ratio: ;
+}
 .ss-itp::before {
   content: "\e04e";
 }
@@ -307,6 +388,9 @@
 .ss-itp.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-vis {
+  --aspect-ratio: ;
+}
 .ss-vis::before {
   content: "\e051";
 }
@@ -316,6 +400,9 @@
 .ss-vis.ss-inner::marker {
   content: "\e053";
 }
+.ss-5ed {
+  --aspect-ratio: ;
+}
 .ss-5ed::before {
   content: "\e054";
 }
@@ -325,6 +412,9 @@
 .ss-5ed.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-past {
+  --aspect-ratio: ;
+}
 .ss-past::before {
   content: "\e057";
 }
@@ -334,6 +424,9 @@
 .ss-past.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-por {
+  --aspect-ratio: ;
+}
 .ss-por::before {
   content: "\e05a";
 }
@@ -343,6 +436,9 @@
 .ss-por.ss-inner::marker {
   content: "\e05c";
 }
+.ss-pvan {
+  --aspect-ratio: ;
+}
 .ss-pvan::before {
   content: "\e05d";
 }
@@ -361,6 +457,9 @@
 .ss-van.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-wth {
+  --aspect-ratio: ;
+}
 .ss-wth::before {
   content: "\e060";
 }
@@ -370,6 +469,9 @@
 .ss-wth.ss-inner::marker {
   content: "\e062";
 }
+.ss-tmp {
+  --aspect-ratio: ;
+}
 .ss-tmp::before {
   content: "\e063";
 }
@@ -379,6 +481,9 @@
 .ss-tmp.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-sth {
+  --aspect-ratio: ;
+}
 .ss-sth::before {
   content: "\e066";
 }
@@ -388,6 +493,9 @@
 .ss-sth.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-exo {
+  --aspect-ratio: ;
+}
 .ss-exo::before {
   content: "\e069";
 }
@@ -397,6 +505,9 @@
 .ss-exo.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-p02 {
+  --aspect-ratio: ;
+}
 .ss-p02::before {
   content: "\e06c";
 }
@@ -406,6 +517,9 @@
 .ss-p02.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ugl {
+  --aspect-ratio: ;
+}
 .ss-ugl::before {
   content: "\e06f";
 }
@@ -415,6 +529,9 @@
 .ss-ugl.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-palp {
+  --aspect-ratio: ;
+}
 .ss-palp::before {
   content: "\e072";
 }
@@ -433,6 +550,9 @@
 .ss-papac.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-usg {
+  --aspect-ratio: ;
+}
 .ss-usg::before {
   content: "\e075";
 }
@@ -442,6 +562,9 @@
 .ss-usg.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ath {
+  --aspect-ratio: ;
+}
 .ss-ath::before {
   content: "\e078";
 }
@@ -451,6 +574,9 @@
 .ss-ath.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ulg {
+  --aspect-ratio: ;
+}
 .ss-ulg::before {
   content: "\e07b";
 }
@@ -460,6 +586,9 @@
 .ss-ulg.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-6ed {
+  --aspect-ratio: ;
+}
 .ss-6ed::before {
   content: "\e07e";
 }
@@ -469,6 +598,9 @@
 .ss-6ed.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-uds {
+  --aspect-ratio: ;
+}
 .ss-uds::before {
   content: "\e081";
 }
@@ -478,6 +610,9 @@
 .ss-uds.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-s99 {
+  --aspect-ratio: ;
+}
 .ss-s99::before {
   content: "\e084";
 }
@@ -487,6 +622,9 @@
 .ss-s99.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ptk {
+  --aspect-ratio: ;
+}
 .ss-ptk::before {
   content: "\e087";
 }
@@ -505,6 +643,9 @@
 .ss-p3k.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pgru {
+  --aspect-ratio: ;
+}
 .ss-pgru::before {
   content: "\e08a";
 }
@@ -514,6 +655,9 @@
 .ss-pgru.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-mmq {
+  --aspect-ratio: ;
+}
 .ss-mmq::before {
   content: "\e08d";
 }
@@ -523,6 +667,9 @@
 .ss-mmq.ss-inner::marker {
   content: "\e08f";
 }
+.ss-brb {
+  --aspect-ratio: ;
+}
 .ss-brb::before {
   content: "\e090";
 }
@@ -532,6 +679,9 @@
 .ss-brb.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-fnm {
+  --aspect-ratio: ;
+}
 .ss-fnm::before {
   content: "\e093";
 }
@@ -541,6 +691,9 @@
 .ss-fnm.ss-inner::marker {
   content: "\e095";
 }
+.ss-pal00 {
+  --aspect-ratio: ;
+}
 .ss-pal00::before {
   content: "\e096";
 }
@@ -550,6 +703,9 @@
 .ss-pal00.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pelp {
+  --aspect-ratio: ;
+}
 .ss-pelp::before {
   content: "\e099";
 }
@@ -568,6 +724,9 @@
 .ss-peuro.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-nem {
+  --aspect-ratio: ;
+}
 .ss-nem::before {
   content: "\e09c";
 }
@@ -586,6 +745,9 @@
 .ss-nms.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-s00 {
+  --aspect-ratio: ;
+}
 .ss-s00::before {
   content: "\e09f";
 }
@@ -595,6 +757,9 @@
 .ss-s00.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pcy {
+  --aspect-ratio: ;
+}
 .ss-pcy::before {
   content: "\e0a2";
 }
@@ -604,6 +769,9 @@
 .ss-pcy.ss-inner::marker {
   content: "\e0a4";
 }
+.ss-btd {
+  --aspect-ratio: ;
+}
 .ss-btd::before {
   content: "\e0a5";
 }
@@ -613,6 +781,9 @@
 .ss-btd.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-inv {
+  --aspect-ratio: ;
+}
 .ss-inv::before {
   content: "\e0a8";
 }
@@ -622,6 +793,9 @@
 .ss-inv.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-mpr {
+  --aspect-ratio: ;
+}
 .ss-mpr::before {
   content: "\e0ab";
 }
@@ -631,6 +805,9 @@
 .ss-mpr.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pls {
+  --aspect-ratio: ;
+}
 .ss-pls::before {
   content: "\e0ae";
 }
@@ -640,6 +817,9 @@
 .ss-pls.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-7ed {
+  --aspect-ratio: ;
+}
 .ss-7ed::before {
   content: "\e0b1";
 }
@@ -649,6 +829,9 @@
 .ss-7ed.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-apc {
+  --aspect-ratio: ;
+}
 .ss-apc::before {
   content: "\e0b4";
 }
@@ -658,6 +841,9 @@
 .ss-apc.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-psdg {
+  --aspect-ratio: ;
+}
 .ss-psdg::before {
   content: "\e0b7";
 }
@@ -676,6 +862,9 @@
 .ss-psega.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ody {
+  --aspect-ratio: ;
+}
 .ss-ody::before {
   content: "\e0ba";
 }
@@ -685,6 +874,9 @@
 .ss-ody.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-dkm {
+  --aspect-ratio: ;
+}
 .ss-dkm::before {
   content: "\e0bd";
 }
@@ -694,6 +886,9 @@
 .ss-dkm.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-tor {
+  --aspect-ratio: ;
+}
 .ss-tor::before {
   content: "\e0c0";
 }
@@ -703,6 +898,9 @@
 .ss-tor.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-jud {
+  --aspect-ratio: ;
+}
 .ss-jud::before {
   content: "\e0c3";
 }
@@ -712,6 +910,9 @@
 .ss-jud.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-prm {
+  --aspect-ratio: ;
+}
 .ss-prm::before {
   content: "\e0c6";
 }
@@ -721,6 +922,9 @@
 .ss-prm.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ons {
+  --aspect-ratio: ;
+}
 .ss-ons::before {
   content: "\e0c9";
 }
@@ -730,6 +934,9 @@
 .ss-ons.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-lgn {
+  --aspect-ratio: ;
+}
 .ss-lgn::before {
   content: "\e0cc";
 }
@@ -739,6 +946,9 @@
 .ss-lgn.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-scg {
+  --aspect-ratio: ;
+}
 .ss-scg::before {
   content: "\e0cf";
 }
@@ -748,6 +958,45 @@
 .ss-scg.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-8ed {
+  --aspect-ratio: 0.9583;
+}
+.ss-8ed::before {
+  content: "\e0d2";
+}
+.ss-8ed.ss-border::after {
+  content: "\e0d3";
+}
+.ss-8ed.ss-inner::marker {
+  content: "\f8ff";
+}
+.ss-mrd {
+  --aspect-ratio: 1.3958;
+}
+.ss-mrd::before {
+  content: "\e0d5";
+}
+.ss-mrd.ss-border::after {
+  content: "\e0d6";
+}
+.ss-mrd.ss-inner::marker {
+  content: "\f8ff";
+}
+.ss-8edalt {
+  --aspect-ratio: 0.9583;
+}
+.ss-8edalt::before {
+  content: "\f8e7";
+}
+.ss-8edalt.ss-border::after {
+  content: "\f8ff";
+}
+.ss-8edalt.ss-inner::marker {
+  content: "\f8ff";
+}
+.ss-4eda {
+  --aspect-ratio: ;
+}
 .ss-4eda::before {
   content: "\f8f6";
 }
@@ -757,6 +1006,9 @@
 .ss-4eda.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-legchr {
+  --aspect-ratio: ;
+}
 .ss-legchr::before {
   content: "\f8f4";
 }
@@ -775,6 +1027,9 @@
 .ss-leg2.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pgc98 {
+  --aspect-ratio: ;
+}
 .ss-pgc98::before {
   content: "\f8f2";
 }
@@ -784,6 +1039,9 @@
 .ss-pgc98.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-po {
+  --aspect-ratio: ;
+}
 .ss-po::before {
   content: "\f8f0";
 }
@@ -802,6 +1060,9 @@
 .ss-por2.ss-inner::marker {
   content: "\f8ee";
 }
+.ss-wl {
+  --aspect-ratio: ;
+}
 .ss-wl::before {
   content: "\f8ed";
 }
@@ -820,6 +1081,9 @@
 .ss-wth2.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-brbalt {
+  --aspect-ratio: ;
+}
 .ss-brbalt::before {
   content: "\f8eb";
 }
@@ -829,6 +1093,9 @@
 .ss-brbalt.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-s00alt {
+  --aspect-ratio: ;
+}
 .ss-s00alt::before {
   content: "\f8e9";
 }
@@ -972,14 +1239,14 @@
   left: 50%;
   transform: translateX(-50%);
 }
-.ss.ss-fw.ss-fw-square {
+.ss.ss-uw {
+  align-items: center;
+  display: inline-flex;
+  height: 1em;
   width: 1em;
 }
-.ss.ss-fw.ss-fw-square::before {
+.ss.ss-uw::before, .ss.ss-uw::after {
-  transform: scale(0.5714);
+  font-size: calc(1em / var(--aspect-ratio));
-}
-.ss.ss-fw.ss-fw-square.ss-border::after, .ss.ss-fw.ss-fw-square.ss-inner::before, .ss.ss-fw.ss-fw-square.ss-inner::after, .ss.ss-fw.ss-fw-square.ss-inner::marker {
-  transform: translateX(-50%) scale(0.5714);
 }
 .ss.ss-white::before, .ss.ss-white::after, .ss.ss-white::marker {
   color: #fff;
@@ -996,5 +1263,21 @@
     margin-left: -1.3%;
   }
 }
+_::-webkit-full-page-media .ss-inner, _:future .ss-inner, :root .safari_only .ss-inner {
+  display: none !important;
+}
+
+.ss-8ed:not(.ss-border):not(.ss-inner)::before {
+  content: "\f8e7";
+}
+.ss-8ed.ss-rarity-common.ss-border::after {
+  --ss-border: var(--ss-border-contrast);
+}
+.ss-8ed.ss-rarity-common.ss-inner::marker {
+  --ss-inner: #fff;
+}
+.ss-8ed.ss-rarity-uncommon.ss-inner::marker, .ss-8ed.ss-rarity-rare.ss-inner::marker, .ss-8ed.ss-rarity-mythic.ss-inner::marker, .ss-8ed.ss-rarity-foil.ss-inner::marker {
+  --ss-inner: var(--ss-border-contrast);
+}
 
 /*# sourceMappingURL=keyrune.css.map */

docs/assets/css/keyrune.css

@@ -14,8 +14,8 @@
 
 @font-face {
   font-family: "keyrune";
-  src: url("../font/keyrune.eot?4.0.57");
+  src: url("../font/keyrune.eot?4.0.94");
-  src: url("../font/keyrune.eot?4.0.57#iefix") format("embedded-opentype"), url("../font/keyrune.woff2?4.0.57") format("woff2"), url("../font/keyrune.ttf?4.0.57") format("truetype"), url("../font/keyrune.woff?4.0.57") format("woff"), url("../font/keyrune.svg?4.0.57#keyrune") format("svg");
+  src: url("../font/keyrune.eot?4.0.94#iefix") format("embedded-opentype"), url("../font/keyrune.woff2?4.0.94") format("woff2"), url("../font/keyrune.ttf?4.0.94") format("truetype"), url("../font/keyrune.woff?4.0.94") format("woff"), url("../font/keyrune.svg?4.0.94#keyrune") format("svg");
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -37,6 +37,9 @@
 .ss::before {
   background: var(--ss-rarity-bg);
 }
+.ss-lea {
+  --aspect-ratio: ;
+}
 .ss-lea::before {
   content: "\e000";
 }
@@ -46,6 +49,9 @@
 .ss-lea.ss-inner::marker {
   content: "\e002";
 }
+.ss-leb {
+  --aspect-ratio: ;
+}
 .ss-leb::before {
   content: "\e003";
 }
@@ -55,6 +61,9 @@
 .ss-leb.ss-inner::marker {
   content: "\e005";
 }
+.ss-2ed {
+  --aspect-ratio: ;
+}
 .ss-2ed::before {
   content: "\e006";
 }
@@ -64,6 +73,9 @@
 .ss-2ed.ss-inner::marker {
   content: "\e008";
 }
+.ss-ced {
+  --aspect-ratio: ;
+}
 .ss-ced::before {
   content: "\e009";
 }
@@ -73,6 +85,9 @@
 .ss-ced.ss-inner::marker {
   content: "\e00b";
 }
+.ss-cei {
+  --aspect-ratio: ;
+}
 .ss-cei::before {
   content: "\e00c";
 }
@@ -82,6 +97,9 @@
 .ss-cei.ss-inner::marker {
   content: "\e00e";
 }
+.ss-arn {
+  --aspect-ratio: 1.75;
+}
 .ss-arn::before {
   content: "\e00f";
 }
@@ -91,6 +109,9 @@
 .ss-arn.ss-inner::marker {
   content: "\e011";
 }
+.ss-atq {
+  --aspect-ratio: 1.029;
+}
 .ss-atq::before {
   content: "\e012";
 }
@@ -100,6 +121,9 @@
 .ss-atq.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-3ed {
+  --aspect-ratio: ;
+}
 .ss-3ed::before {
   content: "\e015";
 }
@@ -109,6 +133,9 @@
 .ss-3ed.ss-inner::marker {
   content: "\e017";
 }
+.ss-fbb {
+  --aspect-ratio: ;
+}
 .ss-fbb::before {
   content: "\e018";
 }
@@ -118,6 +145,9 @@
 .ss-fbb.ss-inner::marker {
   content: "\e01a";
 }
+.ss-leg {
+  --aspect-ratio: ;
+}
 .ss-leg::before {
   content: "\e01b";
 }
@@ -127,6 +157,9 @@
 .ss-leg.ss-inner::marker {
   content: "\e01d";
 }
+.ss-sum {
+  --aspect-ratio: ;
+}
 .ss-sum::before {
   content: "\e01e";
 }
@@ -136,6 +169,9 @@
 .ss-sum.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pdrc {
+  --aspect-ratio: ;
+}
 .ss-pdrc::before {
   content: "\e021";
 }
@@ -145,6 +181,9 @@
 .ss-pdrc.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-drk {
+  --aspect-ratio: ;
+}
 .ss-drk::before {
   content: "\e024";
 }
@@ -154,6 +193,9 @@
 .ss-drk.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-phpr {
+  --aspect-ratio: ;
+}
 .ss-phpr::before {
   content: "\e027";
 }
@@ -163,6 +205,9 @@
 .ss-phpr.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-fem {
+  --aspect-ratio: ;
+}
 .ss-fem::before {
   content: "\e02a";
 }
@@ -172,6 +217,9 @@
 .ss-fem.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pmei {
+  --aspect-ratio: ;
+}
 .ss-pmei::before {
   content: "\e02d";
 }
@@ -190,6 +238,9 @@
 .ss-pleaf.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pmtg {
+  --aspect-ratio: ;
+}
 .ss-pmtg::before {
   content: "\e030";
 }
@@ -217,6 +268,9 @@
 .ss-parl.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-4ed {
+  --aspect-ratio: ;
+}
 .ss-4ed::before {
   content: "\e033";
 }
@@ -226,6 +280,9 @@
 .ss-4ed.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-4bb {
+  --aspect-ratio: ;
+}
 .ss-4bb::before {
   content: "\e036";
 }
@@ -235,6 +292,9 @@
 .ss-4bb.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ice {
+  --aspect-ratio: ;
+}
 .ss-ice::before {
   content: "\e039";
 }
@@ -244,6 +304,9 @@
 .ss-ice.ss-inner::marker {
   content: "\e03b";
 }
+.ss-chr {
+  --aspect-ratio: ;
+}
 .ss-chr::before {
   content: "\e03c";
 }
@@ -253,6 +316,9 @@
 .ss-chr.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ren {
+  --aspect-ratio: ;
+}
 .ss-ren::before {
   content: "\e03f";
 }
@@ -262,6 +328,9 @@
 .ss-ren.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-rin {
+  --aspect-ratio: ;
+}
 .ss-rin::before {
   content: "\e042";
 }
@@ -271,6 +340,9 @@
 .ss-rin.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-hml {
+  --aspect-ratio: ;
+}
 .ss-hml::before {
   content: "\e045";
 }
@@ -280,6 +352,9 @@
 .ss-hml.ss-inner::marker {
   content: "\e047";
 }
+.ss-all {
+  --aspect-ratio: ;
+}
 .ss-all::before {
   content: "\e048";
 }
@@ -289,6 +364,9 @@
 .ss-all.ss-inner::marker {
   content: "\e04a";
 }
+.ss-mir {
+  --aspect-ratio: ;
+}
 .ss-mir::before {
   content: "\e04b";
 }
@@ -298,6 +376,9 @@
 .ss-mir.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-itp {
+  --aspect-ratio: ;
+}
 .ss-itp::before {
   content: "\e04e";
 }
@@ -307,6 +388,9 @@
 .ss-itp.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-vis {
+  --aspect-ratio: ;
+}
 .ss-vis::before {
   content: "\e051";
 }
@@ -316,6 +400,9 @@
 .ss-vis.ss-inner::marker {
   content: "\e053";
 }
+.ss-5ed {
+  --aspect-ratio: ;
+}
 .ss-5ed::before {
   content: "\e054";
 }
@@ -325,6 +412,9 @@
 .ss-5ed.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-past {
+  --aspect-ratio: ;
+}
 .ss-past::before {
   content: "\e057";
 }
@@ -334,6 +424,9 @@
 .ss-past.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-por {
+  --aspect-ratio: ;
+}
 .ss-por::before {
   content: "\e05a";
 }
@@ -343,6 +436,9 @@
 .ss-por.ss-inner::marker {
   content: "\e05c";
 }
+.ss-pvan {
+  --aspect-ratio: ;
+}
 .ss-pvan::before {
   content: "\e05d";
 }
@@ -361,6 +457,9 @@
 .ss-van.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-wth {
+  --aspect-ratio: ;
+}
 .ss-wth::before {
   content: "\e060";
 }
@@ -370,6 +469,9 @@
 .ss-wth.ss-inner::marker {
   content: "\e062";
 }
+.ss-tmp {
+  --aspect-ratio: ;
+}
 .ss-tmp::before {
   content: "\e063";
 }
@@ -379,6 +481,9 @@
 .ss-tmp.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-sth {
+  --aspect-ratio: ;
+}
 .ss-sth::before {
   content: "\e066";
 }
@@ -388,6 +493,9 @@
 .ss-sth.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-exo {
+  --aspect-ratio: ;
+}
 .ss-exo::before {
   content: "\e069";
 }
@@ -397,6 +505,9 @@
 .ss-exo.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-p02 {
+  --aspect-ratio: ;
+}
 .ss-p02::before {
   content: "\e06c";
 }
@@ -406,6 +517,9 @@
 .ss-p02.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ugl {
+  --aspect-ratio: ;
+}
 .ss-ugl::before {
   content: "\e06f";
 }
@@ -415,6 +529,9 @@
 .ss-ugl.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-palp {
+  --aspect-ratio: ;
+}
 .ss-palp::before {
   content: "\e072";
 }
@@ -433,6 +550,9 @@
 .ss-papac.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-usg {
+  --aspect-ratio: ;
+}
 .ss-usg::before {
   content: "\e075";
 }
@@ -442,6 +562,9 @@
 .ss-usg.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ath {
+  --aspect-ratio: ;
+}
 .ss-ath::before {
   content: "\e078";
 }
@@ -451,6 +574,9 @@
 .ss-ath.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ulg {
+  --aspect-ratio: ;
+}
 .ss-ulg::before {
   content: "\e07b";
 }
@@ -460,6 +586,9 @@
 .ss-ulg.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-6ed {
+  --aspect-ratio: ;
+}
 .ss-6ed::before {
   content: "\e07e";
 }
@@ -469,6 +598,9 @@
 .ss-6ed.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-uds {
+  --aspect-ratio: ;
+}
 .ss-uds::before {
   content: "\e081";
 }
@@ -478,6 +610,9 @@
 .ss-uds.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-s99 {
+  --aspect-ratio: ;
+}
 .ss-s99::before {
   content: "\e084";
 }
@@ -487,6 +622,9 @@
 .ss-s99.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ptk {
+  --aspect-ratio: ;
+}
 .ss-ptk::before {
   content: "\e087";
 }
@@ -505,6 +643,9 @@
 .ss-p3k.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pgru {
+  --aspect-ratio: ;
+}
 .ss-pgru::before {
   content: "\e08a";
 }
@@ -514,6 +655,9 @@
 .ss-pgru.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-mmq {
+  --aspect-ratio: ;
+}
 .ss-mmq::before {
   content: "\e08d";
 }
@@ -523,6 +667,9 @@
 .ss-mmq.ss-inner::marker {
   content: "\e08f";
 }
+.ss-brb {
+  --aspect-ratio: ;
+}
 .ss-brb::before {
   content: "\e090";
 }
@@ -532,6 +679,9 @@
 .ss-brb.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-fnm {
+  --aspect-ratio: ;
+}
 .ss-fnm::before {
   content: "\e093";
 }
@@ -541,6 +691,9 @@
 .ss-fnm.ss-inner::marker {
   content: "\e095";
 }
+.ss-pal00 {
+  --aspect-ratio: ;
+}
 .ss-pal00::before {
   content: "\e096";
 }
@@ -550,6 +703,9 @@
 .ss-pal00.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pelp {
+  --aspect-ratio: ;
+}
 .ss-pelp::before {
   content: "\e099";
 }
@@ -568,6 +724,9 @@
 .ss-peuro.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-nem {
+  --aspect-ratio: ;
+}
 .ss-nem::before {
   content: "\e09c";
 }
@@ -586,6 +745,9 @@
 .ss-nms.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-s00 {
+  --aspect-ratio: ;
+}
 .ss-s00::before {
   content: "\e09f";
 }
@@ -595,6 +757,9 @@
 .ss-s00.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pcy {
+  --aspect-ratio: ;
+}
 .ss-pcy::before {
   content: "\e0a2";
 }
@@ -604,6 +769,9 @@
 .ss-pcy.ss-inner::marker {
   content: "\e0a4";
 }
+.ss-btd {
+  --aspect-ratio: ;
+}
 .ss-btd::before {
   content: "\e0a5";
 }
@@ -613,6 +781,9 @@
 .ss-btd.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-inv {
+  --aspect-ratio: ;
+}
 .ss-inv::before {
   content: "\e0a8";
 }
@@ -622,6 +793,9 @@
 .ss-inv.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-mpr {
+  --aspect-ratio: ;
+}
 .ss-mpr::before {
   content: "\e0ab";
 }
@@ -631,6 +805,9 @@
 .ss-mpr.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pls {
+  --aspect-ratio: ;
+}
 .ss-pls::before {
   content: "\e0ae";
 }
@@ -640,6 +817,9 @@
 .ss-pls.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-7ed {
+  --aspect-ratio: ;
+}
 .ss-7ed::before {
   content: "\e0b1";
 }
@@ -649,6 +829,9 @@
 .ss-7ed.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-apc {
+  --aspect-ratio: ;
+}
 .ss-apc::before {
   content: "\e0b4";
 }
@@ -658,6 +841,9 @@
 .ss-apc.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-psdg {
+  --aspect-ratio: ;
+}
 .ss-psdg::before {
   content: "\e0b7";
 }
@@ -676,6 +862,9 @@
 .ss-psega.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ody {
+  --aspect-ratio: ;
+}
 .ss-ody::before {
   content: "\e0ba";
 }
@@ -685,6 +874,9 @@
 .ss-ody.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-dkm {
+  --aspect-ratio: ;
+}
 .ss-dkm::before {
   content: "\e0bd";
 }
@@ -694,6 +886,9 @@
 .ss-dkm.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-tor {
+  --aspect-ratio: ;
+}
 .ss-tor::before {
   content: "\e0c0";
 }
@@ -703,6 +898,9 @@
 .ss-tor.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-jud {
+  --aspect-ratio: ;
+}
 .ss-jud::before {
   content: "\e0c3";
 }
@@ -712,6 +910,9 @@
 .ss-jud.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-prm {
+  --aspect-ratio: ;
+}
 .ss-prm::before {
   content: "\e0c6";
 }
@@ -721,6 +922,9 @@
 .ss-prm.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ons {
+  --aspect-ratio: ;
+}
 .ss-ons::before {
   content: "\e0c9";
 }
@@ -730,6 +934,9 @@
 .ss-ons.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-lgn {
+  --aspect-ratio: ;
+}
 .ss-lgn::before {
   content: "\e0cc";
 }
@@ -739,6 +946,9 @@
 .ss-lgn.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-scg {
+  --aspect-ratio: ;
+}
 .ss-scg::before {
   content: "\e0cf";
 }
@@ -748,6 +958,45 @@
 .ss-scg.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-8ed {
+  --aspect-ratio: 0.9583;
+}
+.ss-8ed::before {
+  content: "\e0d2";
+}
+.ss-8ed.ss-border::after {
+  content: "\e0d3";
+}
+.ss-8ed.ss-inner::marker {
+  content: "\f8ff";
+}
+.ss-mrd {
+  --aspect-ratio: 1.3958;
+}
+.ss-mrd::before {
+  content: "\e0d5";
+}
+.ss-mrd.ss-border::after {
+  content: "\e0d6";
+}
+.ss-mrd.ss-inner::marker {
+  content: "\f8ff";
+}
+.ss-8edalt {
+  --aspect-ratio: 0.9583;
+}
+.ss-8edalt::before {
+  content: "\f8e7";
+}
+.ss-8edalt.ss-border::after {
+  content: "\f8ff";
+}
+.ss-8edalt.ss-inner::marker {
+  content: "\f8ff";
+}
+.ss-4eda {
+  --aspect-ratio: ;
+}
 .ss-4eda::before {
   content: "\f8f6";
 }
@@ -757,6 +1006,9 @@
 .ss-4eda.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-legchr {
+  --aspect-ratio: ;
+}
 .ss-legchr::before {
   content: "\f8f4";
 }
@@ -775,6 +1027,9 @@
 .ss-leg2.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pgc98 {
+  --aspect-ratio: ;
+}
 .ss-pgc98::before {
   content: "\f8f2";
 }
@@ -784,6 +1039,9 @@
 .ss-pgc98.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-po {
+  --aspect-ratio: ;
+}
 .ss-po::before {
   content: "\f8f0";
 }
@@ -802,6 +1060,9 @@
 .ss-por2.ss-inner::marker {
   content: "\f8ee";
 }
+.ss-wl {
+  --aspect-ratio: ;
+}
 .ss-wl::before {
   content: "\f8ed";
 }
@@ -820,6 +1081,9 @@
 .ss-wth2.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-brbalt {
+  --aspect-ratio: ;
+}
 .ss-brbalt::before {
   content: "\f8eb";
 }
@@ -829,6 +1093,9 @@
 .ss-brbalt.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-s00alt {
+  --aspect-ratio: ;
+}
 .ss-s00alt::before {
   content: "\f8e9";
 }
@@ -972,19 +1239,56 @@
   left: 50%;
   transform: translateX(-50%);
 }
-.ss.ss-fw.ss-fw-square {
+.ss.ss-uw {
+  align-items: center;
+  display: inline-flex;
+  height: 1em;
   width: 1em;
 }
-.ss.ss-fw.ss-fw-square::before {
+.ss.ss-uw::before, .ss.ss-uw::after {
-  transform: scale(0.5714);
+  font-size: calc(1em / var(--aspect-ratio));
-}
-.ss.ss-fw.ss-fw-square.ss-border::after, .ss.ss-fw.ss-fw-square.ss-inner::before, .ss.ss-fw.ss-fw-square.ss-inner::after, .ss.ss-fw.ss-fw-square.ss-inner::marker {
-  transform: translateX(-50%) scale(0.5714);
 }
 .ss.ss-white::before, .ss.ss-white::after, .ss.ss-white::marker {
   color: #fff;
 }
 
+.svg {
+  background-color: var(--ss-border);
+  mask-repeat: no-repeat;
+  mask-position: 50% 0;
+  width: 84px;
+  height: 48px;
+  display: block;
+  position: relative;
+  display: block;
+}
+.svg::before, .svg::after {
+  display: block;
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  mask-repeat: no-repeat;
+  mask-position: 50% 0;
+}
+.svg::before {
+  background-color: var(--ss-rarity);
+}
+.svg::after {
+  background-color: var(--ss-inner);
+}
+.svg.ss-pcy {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 48 48'%3E%3Cpath d='M44.01 33.54a8.57 8.57 0 0 1 2.72 2.03A4.7 4.7 0 0 1 48 38.63c0 1.69-.9 2.62-1.9 3.1-.5.25-1.51.43-1.67.44-.57.08-6.37.8-9.19.1-2.56-.64-6.12-.34-10.26.82-4.8 1.36-7.63-.27-11.3-1.24-2.68-.71-5.03-.6-6.95-.52-1.53.08-2.83.12-3.89-.11a2.46 2.46 0 0 1-2.02-2.33 2.96 2.96 0 0 1 1.54-2.66c.84-.52 2.42-.92 5.55-.76L0 22.2l3.11-7.51 8.58 1.62 4.04 6.46.01-10.04L25.8 4.39l10.7 9.03-.62 12.19 2.8-2.82 7.64-.12.66 7.29-2.97 3.58Z'/%3E%3C/svg%3E%0A");
+}
+.svg.ss-pcy::before {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 48 48'%3E%3Cpath d='m10.25 36.27-8.47-14.2L4.1 16.5l6.62 1.25 6.62 10.58.01-14.85 8.45-7 9.07 7.65-.8 15.57 5.3-5.33 5.5-.08.47 5.16-4.16 5s.62 0 1.54.28c1.46.46 3.7 2.1 3.7 3.9 0 1.81-2.16 1.96-2.16 1.96s-5.85.83-8.62.13c-2.77-.7-6.61-.42-11.08.84-4.46 1.25-7.06-.35-10.46-1.26-4.78-1.26-8.56-.13-10.9-.64-.94-.2-1.12-1.38 0-2.07.9-.54 2.72-.79 6.75-.35 0 0 .46-.83.3-.97Zm21.84-20.75-2.3-2.09L28.4 33.2s.3 2.65 2.62 2.1l1.07-19.78Zm5.08 17.26 1.08 1.12 4.31-4.73-.08-2.1-5.3 5.71ZM9.32 20.74l-2.92-.48 7.38 12.8s2.62 1.4 2.31-1.39L9.32 20.74Z'/%3E%3C/svg%3E%0A");
+}
+.svg.ss-pcy::after {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 48 48'%3E%3Cpath d='m37.17 32.78 5.31-5.7.08 2.09-4.3 4.73-1.09-1.12ZM9.32 20.74l6.77 10.93c.3 2.79-2.3 1.4-2.3 1.4l-7.4-12.81 2.93.48Zm22.77-5.22L31.02 35.3c-2.31.56-2.62-2.09-2.62-2.09l1.39-19.77 2.3 2.1Z'/%3E%3C/svg%3E%0A");
+}
+
 @-moz-document url-prefix() {
   .ss-fnm::before, .ss-pfnm::before {
     margin-left: -0.4%;
@@ -996,5 +1300,21 @@
     margin-left: -1.3%;
   }
 }
+_::-webkit-full-page-media .ss-inner, _:future .ss-inner, :root .safari_only .ss-inner {
+  display: none !important;
+}
+
+.ss-8ed:not(.ss-border):not(.ss-inner)::before {
+  content: "\f8e7";
+}
+.ss-8ed.ss-rarity-common.ss-border::after {
+  --ss-border: var(--ss-border-contrast);
+}
+.ss-8ed.ss-rarity-common.ss-inner::marker {
+  --ss-inner: #fff;
+}
+.ss-8ed.ss-rarity-uncommon.ss-inner::marker, .ss-8ed.ss-rarity-rare.ss-inner::marker, .ss-8ed.ss-rarity-mythic.ss-inner::marker, .ss-8ed.ss-rarity-foil.ss-inner::marker {
+  --ss-inner: var(--ss-border-contrast);
+}
 
 /*# sourceMappingURL=keyrune.css.map */

docs/src/content/docs/index.html

@@ -5,5 +5,8 @@ modal: true
 ---
 
 <section id="docs" class="border-t-light pt-8 pb-16 flex flex-col flex-align-center">
-    Documentation
+    <h1>Documentation</h1>
+    <div>
+        <i class="svg ss-pcy"></i>
+    </div>
 </section>

docs/src/data/sets.json

@@ -207,6 +207,27 @@
           "7th",
           "7e"
         ]
+      },
+      "8ed": {
+        "code": "8ed",
+        "name": "Eighth Edition",
+        "display": "Eighth Edition",
+        "nicknames": [
+          "8th Edition"
+        ],
+        "rarity": "e0d2",
+        "border": "e0d3",
+        "inner": "e0d4",
+        "release": "2003-07-28",
+        "subgroup": false,
+        "version": "4.0.0",
+        "official": true,
+        "aliases": false,
+        "tags": [
+          "core",
+          "eighth",
+          "8th"
+        ]
       }
     }
   },
@@ -911,6 +932,25 @@
           "dominaria",
           "otaria"
         ]
+      },
+      "mrd": {
+        "code": "mrd",
+        "name": "Mirrodin",
+        "display": "Mirrodin",
+        "nicknames": false,
+        "rarity": "e0d5",
+        "border": "e0d6",
+        "inner": false,
+        "release": "2003-10-02",
+        "subgroup": false,
+        "version": "4.0.0",
+        "official": true,
+        "aliases": false,
+        "tags": [
+          "mirrodin",
+          "sword",
+          "kaldra"
+        ]
       }
     }
   },
@@ -1879,6 +1919,28 @@
           "axe",
           "community"
         ]
+      },
+      "8edalt": {
+        "code": "8edalt",
+        "name": "Eighth Edition (Alternative)",
+        "display": "Eighth Edition (Alternative)",
+        "nicknames": [
+          "8th Edition (Alternative)"
+        ],
+        "rarity": "f8e7",
+        "border": false,
+        "inner": false,
+        "release": "2003-07-28",
+        "subgroup": false,
+        "version": "4.0.0",
+        "official": false,
+        "aliases": false,
+        "tags": [
+          "alternative",
+          "eighth",
+          "8th",
+          "core"
+        ]
       }
     }
   },

docs/src/layouts/partials/header.html

@@ -16,7 +16,7 @@
         </svg>
     </a>
     <nav>
-        <a href="sets">
+        <a href="/sets">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
               <polyline points="2 17 12 22 22 17"></polyline>
@@ -26,7 +26,7 @@
                 Sets
             </span>
         </a>
-        <a href="docs">
+        <a href="/docs">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
               <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
@@ -35,7 +35,7 @@
                 Documentation
             </span>
         </a>
-        <a href="examples">
+        <a href="/examples">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M15 4V2"></path>
               <path d="M15 16v-2"></path>

docs/src/static/assets/css/keyrune.css

@@ -14,8 +14,8 @@
 
 @font-face {
   font-family: "keyrune";
-  src: url("../font/keyrune.eot?4.0.57");
+  src: url("../font/keyrune.eot?4.0.94");
-  src: url("../font/keyrune.eot?4.0.57#iefix") format("embedded-opentype"), url("../font/keyrune.woff2?4.0.57") format("woff2"), url("../font/keyrune.ttf?4.0.57") format("truetype"), url("../font/keyrune.woff?4.0.57") format("woff"), url("../font/keyrune.svg?4.0.57#keyrune") format("svg");
+  src: url("../font/keyrune.eot?4.0.94#iefix") format("embedded-opentype"), url("../font/keyrune.woff2?4.0.94") format("woff2"), url("../font/keyrune.ttf?4.0.94") format("truetype"), url("../font/keyrune.woff?4.0.94") format("woff"), url("../font/keyrune.svg?4.0.94#keyrune") format("svg");
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -37,6 +37,9 @@
 .ss::before {
   background: var(--ss-rarity-bg);
 }
+.ss-lea {
+  --aspect-ratio: ;
+}
 .ss-lea::before {
   content: "\e000";
 }
@@ -46,6 +49,9 @@
 .ss-lea.ss-inner::marker {
   content: "\e002";
 }
+.ss-leb {
+  --aspect-ratio: ;
+}
 .ss-leb::before {
   content: "\e003";
 }
@@ -55,6 +61,9 @@
 .ss-leb.ss-inner::marker {
   content: "\e005";
 }
+.ss-2ed {
+  --aspect-ratio: ;
+}
 .ss-2ed::before {
   content: "\e006";
 }
@@ -64,6 +73,9 @@
 .ss-2ed.ss-inner::marker {
   content: "\e008";
 }
+.ss-ced {
+  --aspect-ratio: ;
+}
 .ss-ced::before {
   content: "\e009";
 }
@@ -73,6 +85,9 @@
 .ss-ced.ss-inner::marker {
   content: "\e00b";
 }
+.ss-cei {
+  --aspect-ratio: ;
+}
 .ss-cei::before {
   content: "\e00c";
 }
@@ -82,6 +97,9 @@
 .ss-cei.ss-inner::marker {
   content: "\e00e";
 }
+.ss-arn {
+  --aspect-ratio: 1.75;
+}
 .ss-arn::before {
   content: "\e00f";
 }
@@ -91,6 +109,9 @@
 .ss-arn.ss-inner::marker {
   content: "\e011";
 }
+.ss-atq {
+  --aspect-ratio: 1.029;
+}
 .ss-atq::before {
   content: "\e012";
 }
@@ -100,6 +121,9 @@
 .ss-atq.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-3ed {
+  --aspect-ratio: ;
+}
 .ss-3ed::before {
   content: "\e015";
 }
@@ -109,6 +133,9 @@
 .ss-3ed.ss-inner::marker {
   content: "\e017";
 }
+.ss-fbb {
+  --aspect-ratio: ;
+}
 .ss-fbb::before {
   content: "\e018";
 }
@@ -118,6 +145,9 @@
 .ss-fbb.ss-inner::marker {
   content: "\e01a";
 }
+.ss-leg {
+  --aspect-ratio: ;
+}
 .ss-leg::before {
   content: "\e01b";
 }
@@ -127,6 +157,9 @@
 .ss-leg.ss-inner::marker {
   content: "\e01d";
 }
+.ss-sum {
+  --aspect-ratio: ;
+}
 .ss-sum::before {
   content: "\e01e";
 }
@@ -136,6 +169,9 @@
 .ss-sum.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pdrc {
+  --aspect-ratio: ;
+}
 .ss-pdrc::before {
   content: "\e021";
 }
@@ -145,6 +181,9 @@
 .ss-pdrc.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-drk {
+  --aspect-ratio: ;
+}
 .ss-drk::before {
   content: "\e024";
 }
@@ -154,6 +193,9 @@
 .ss-drk.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-phpr {
+  --aspect-ratio: ;
+}
 .ss-phpr::before {
   content: "\e027";
 }
@@ -163,6 +205,9 @@
 .ss-phpr.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-fem {
+  --aspect-ratio: ;
+}
 .ss-fem::before {
   content: "\e02a";
 }
@@ -172,6 +217,9 @@
 .ss-fem.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pmei {
+  --aspect-ratio: ;
+}
 .ss-pmei::before {
   content: "\e02d";
 }
@@ -190,6 +238,9 @@
 .ss-pleaf.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pmtg {
+  --aspect-ratio: ;
+}
 .ss-pmtg::before {
   content: "\e030";
 }
@@ -217,6 +268,9 @@
 .ss-parl.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-4ed {
+  --aspect-ratio: ;
+}
 .ss-4ed::before {
   content: "\e033";
 }
@@ -226,6 +280,9 @@
 .ss-4ed.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-4bb {
+  --aspect-ratio: ;
+}
 .ss-4bb::before {
   content: "\e036";
 }
@@ -235,6 +292,9 @@
 .ss-4bb.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ice {
+  --aspect-ratio: ;
+}
 .ss-ice::before {
   content: "\e039";
 }
@@ -244,6 +304,9 @@
 .ss-ice.ss-inner::marker {
   content: "\e03b";
 }
+.ss-chr {
+  --aspect-ratio: ;
+}
 .ss-chr::before {
   content: "\e03c";
 }
@@ -253,6 +316,9 @@
 .ss-chr.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ren {
+  --aspect-ratio: ;
+}
 .ss-ren::before {
   content: "\e03f";
 }
@@ -262,6 +328,9 @@
 .ss-ren.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-rin {
+  --aspect-ratio: ;
+}
 .ss-rin::before {
   content: "\e042";
 }
@@ -271,6 +340,9 @@
 .ss-rin.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-hml {
+  --aspect-ratio: ;
+}
 .ss-hml::before {
   content: "\e045";
 }
@@ -280,6 +352,9 @@
 .ss-hml.ss-inner::marker {
   content: "\e047";
 }
+.ss-all {
+  --aspect-ratio: ;
+}
 .ss-all::before {
   content: "\e048";
 }
@@ -289,6 +364,9 @@
 .ss-all.ss-inner::marker {
   content: "\e04a";
 }
+.ss-mir {
+  --aspect-ratio: ;
+}
 .ss-mir::before {
   content: "\e04b";
 }
@@ -298,6 +376,9 @@
 .ss-mir.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-itp {
+  --aspect-ratio: ;
+}
 .ss-itp::before {
   content: "\e04e";
 }
@@ -307,6 +388,9 @@
 .ss-itp.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-vis {
+  --aspect-ratio: ;
+}
 .ss-vis::before {
   content: "\e051";
 }
@@ -316,6 +400,9 @@
 .ss-vis.ss-inner::marker {
   content: "\e053";
 }
+.ss-5ed {
+  --aspect-ratio: ;
+}
 .ss-5ed::before {
   content: "\e054";
 }
@@ -325,6 +412,9 @@
 .ss-5ed.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-past {
+  --aspect-ratio: ;
+}
 .ss-past::before {
   content: "\e057";
 }
@@ -334,6 +424,9 @@
 .ss-past.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-por {
+  --aspect-ratio: ;
+}
 .ss-por::before {
   content: "\e05a";
 }
@@ -343,6 +436,9 @@
 .ss-por.ss-inner::marker {
   content: "\e05c";
 }
+.ss-pvan {
+  --aspect-ratio: ;
+}
 .ss-pvan::before {
   content: "\e05d";
 }
@@ -361,6 +457,9 @@
 .ss-van.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-wth {
+  --aspect-ratio: ;
+}
 .ss-wth::before {
   content: "\e060";
 }
@@ -370,6 +469,9 @@
 .ss-wth.ss-inner::marker {
   content: "\e062";
 }
+.ss-tmp {
+  --aspect-ratio: ;
+}
 .ss-tmp::before {
   content: "\e063";
 }
@@ -379,6 +481,9 @@
 .ss-tmp.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-sth {
+  --aspect-ratio: ;
+}
 .ss-sth::before {
   content: "\e066";
 }
@@ -388,6 +493,9 @@
 .ss-sth.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-exo {
+  --aspect-ratio: ;
+}
 .ss-exo::before {
   content: "\e069";
 }
@@ -397,6 +505,9 @@
 .ss-exo.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-p02 {
+  --aspect-ratio: ;
+}
 .ss-p02::before {
   content: "\e06c";
 }
@@ -406,6 +517,9 @@
 .ss-p02.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ugl {
+  --aspect-ratio: ;
+}
 .ss-ugl::before {
   content: "\e06f";
 }
@@ -415,6 +529,9 @@
 .ss-ugl.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-palp {
+  --aspect-ratio: ;
+}
 .ss-palp::before {
   content: "\e072";
 }
@@ -433,6 +550,9 @@
 .ss-papac.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-usg {
+  --aspect-ratio: ;
+}
 .ss-usg::before {
   content: "\e075";
 }
@@ -442,6 +562,9 @@
 .ss-usg.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ath {
+  --aspect-ratio: ;
+}
 .ss-ath::before {
   content: "\e078";
 }
@@ -451,6 +574,9 @@
 .ss-ath.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ulg {
+  --aspect-ratio: ;
+}
 .ss-ulg::before {
   content: "\e07b";
 }
@@ -460,6 +586,9 @@
 .ss-ulg.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-6ed {
+  --aspect-ratio: ;
+}
 .ss-6ed::before {
   content: "\e07e";
 }
@@ -469,6 +598,9 @@
 .ss-6ed.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-uds {
+  --aspect-ratio: ;
+}
 .ss-uds::before {
   content: "\e081";
 }
@@ -478,6 +610,9 @@
 .ss-uds.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-s99 {
+  --aspect-ratio: ;
+}
 .ss-s99::before {
   content: "\e084";
 }
@@ -487,6 +622,9 @@
 .ss-s99.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ptk {
+  --aspect-ratio: ;
+}
 .ss-ptk::before {
   content: "\e087";
 }
@@ -505,6 +643,9 @@
 .ss-p3k.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pgru {
+  --aspect-ratio: ;
+}
 .ss-pgru::before {
   content: "\e08a";
 }
@@ -514,6 +655,9 @@
 .ss-pgru.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-mmq {
+  --aspect-ratio: ;
+}
 .ss-mmq::before {
   content: "\e08d";
 }
@@ -523,6 +667,9 @@
 .ss-mmq.ss-inner::marker {
   content: "\e08f";
 }
+.ss-brb {
+  --aspect-ratio: ;
+}
 .ss-brb::before {
   content: "\e090";
 }
@@ -532,6 +679,9 @@
 .ss-brb.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-fnm {
+  --aspect-ratio: ;
+}
 .ss-fnm::before {
   content: "\e093";
 }
@@ -541,6 +691,9 @@
 .ss-fnm.ss-inner::marker {
   content: "\e095";
 }
+.ss-pal00 {
+  --aspect-ratio: ;
+}
 .ss-pal00::before {
   content: "\e096";
 }
@@ -550,6 +703,9 @@
 .ss-pal00.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pelp {
+  --aspect-ratio: ;
+}
 .ss-pelp::before {
   content: "\e099";
 }
@@ -568,6 +724,9 @@
 .ss-peuro.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-nem {
+  --aspect-ratio: ;
+}
 .ss-nem::before {
   content: "\e09c";
 }
@@ -586,6 +745,9 @@
 .ss-nms.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-s00 {
+  --aspect-ratio: ;
+}
 .ss-s00::before {
   content: "\e09f";
 }
@@ -595,6 +757,9 @@
 .ss-s00.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pcy {
+  --aspect-ratio: ;
+}
 .ss-pcy::before {
   content: "\e0a2";
 }
@@ -604,6 +769,9 @@
 .ss-pcy.ss-inner::marker {
   content: "\e0a4";
 }
+.ss-btd {
+  --aspect-ratio: ;
+}
 .ss-btd::before {
   content: "\e0a5";
 }
@@ -613,6 +781,9 @@
 .ss-btd.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-inv {
+  --aspect-ratio: ;
+}
 .ss-inv::before {
   content: "\e0a8";
 }
@@ -622,6 +793,9 @@
 .ss-inv.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-mpr {
+  --aspect-ratio: ;
+}
 .ss-mpr::before {
   content: "\e0ab";
 }
@@ -631,6 +805,9 @@
 .ss-mpr.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pls {
+  --aspect-ratio: ;
+}
 .ss-pls::before {
   content: "\e0ae";
 }
@@ -640,6 +817,9 @@
 .ss-pls.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-7ed {
+  --aspect-ratio: ;
+}
 .ss-7ed::before {
   content: "\e0b1";
 }
@@ -649,6 +829,9 @@
 .ss-7ed.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-apc {
+  --aspect-ratio: ;
+}
 .ss-apc::before {
   content: "\e0b4";
 }
@@ -658,6 +841,9 @@
 .ss-apc.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-psdg {
+  --aspect-ratio: ;
+}
 .ss-psdg::before {
   content: "\e0b7";
 }
@@ -676,6 +862,9 @@
 .ss-psega.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ody {
+  --aspect-ratio: ;
+}
 .ss-ody::before {
   content: "\e0ba";
 }
@@ -685,6 +874,9 @@
 .ss-ody.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-dkm {
+  --aspect-ratio: ;
+}
 .ss-dkm::before {
   content: "\e0bd";
 }
@@ -694,6 +886,9 @@
 .ss-dkm.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-tor {
+  --aspect-ratio: ;
+}
 .ss-tor::before {
   content: "\e0c0";
 }
@@ -703,6 +898,9 @@
 .ss-tor.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-jud {
+  --aspect-ratio: ;
+}
 .ss-jud::before {
   content: "\e0c3";
 }
@@ -712,6 +910,9 @@
 .ss-jud.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-prm {
+  --aspect-ratio: ;
+}
 .ss-prm::before {
   content: "\e0c6";
 }
@@ -721,6 +922,9 @@
 .ss-prm.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-ons {
+  --aspect-ratio: ;
+}
 .ss-ons::before {
   content: "\e0c9";
 }
@@ -730,6 +934,9 @@
 .ss-ons.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-lgn {
+  --aspect-ratio: ;
+}
 .ss-lgn::before {
   content: "\e0cc";
 }
@@ -739,6 +946,9 @@
 .ss-lgn.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-scg {
+  --aspect-ratio: ;
+}
 .ss-scg::before {
   content: "\e0cf";
 }
@@ -748,6 +958,45 @@
 .ss-scg.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-8ed {
+  --aspect-ratio: 0.9583;
+}
+.ss-8ed::before {
+  content: "\e0d2";
+}
+.ss-8ed.ss-border::after {
+  content: "\e0d3";
+}
+.ss-8ed.ss-inner::marker {
+  content: "\f8ff";
+}
+.ss-mrd {
+  --aspect-ratio: 1.3958;
+}
+.ss-mrd::before {
+  content: "\e0d5";
+}
+.ss-mrd.ss-border::after {
+  content: "\e0d6";
+}
+.ss-mrd.ss-inner::marker {
+  content: "\f8ff";
+}
+.ss-8edalt {
+  --aspect-ratio: 0.9583;
+}
+.ss-8edalt::before {
+  content: "\f8e7";
+}
+.ss-8edalt.ss-border::after {
+  content: "\f8ff";
+}
+.ss-8edalt.ss-inner::marker {
+  content: "\f8ff";
+}
+.ss-4eda {
+  --aspect-ratio: ;
+}
 .ss-4eda::before {
   content: "\f8f6";
 }
@@ -757,6 +1006,9 @@
 .ss-4eda.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-legchr {
+  --aspect-ratio: ;
+}
 .ss-legchr::before {
   content: "\f8f4";
 }
@@ -775,6 +1027,9 @@
 .ss-leg2.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-pgc98 {
+  --aspect-ratio: ;
+}
 .ss-pgc98::before {
   content: "\f8f2";
 }
@@ -784,6 +1039,9 @@
 .ss-pgc98.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-po {
+  --aspect-ratio: ;
+}
 .ss-po::before {
   content: "\f8f0";
 }
@@ -802,6 +1060,9 @@
 .ss-por2.ss-inner::marker {
   content: "\f8ee";
 }
+.ss-wl {
+  --aspect-ratio: ;
+}
 .ss-wl::before {
   content: "\f8ed";
 }
@@ -820,6 +1081,9 @@
 .ss-wth2.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-brbalt {
+  --aspect-ratio: ;
+}
 .ss-brbalt::before {
   content: "\f8eb";
 }
@@ -829,6 +1093,9 @@
 .ss-brbalt.ss-inner::marker {
   content: "\f8ff";
 }
+.ss-s00alt {
+  --aspect-ratio: ;
+}
 .ss-s00alt::before {
   content: "\f8e9";
 }
@@ -972,19 +1239,56 @@
   left: 50%;
   transform: translateX(-50%);
 }
-.ss.ss-fw.ss-fw-square {
+.ss.ss-uw {
+  align-items: center;
+  display: inline-flex;
+  height: 1em;
   width: 1em;
 }
-.ss.ss-fw.ss-fw-square::before {
+.ss.ss-uw::before, .ss.ss-uw::after {
-  transform: scale(0.5714);
+  font-size: calc(1em / var(--aspect-ratio));
-}
-.ss.ss-fw.ss-fw-square.ss-border::after, .ss.ss-fw.ss-fw-square.ss-inner::before, .ss.ss-fw.ss-fw-square.ss-inner::after, .ss.ss-fw.ss-fw-square.ss-inner::marker {
-  transform: translateX(-50%) scale(0.5714);
 }
 .ss.ss-white::before, .ss.ss-white::after, .ss.ss-white::marker {
   color: #fff;
 }
 
+.svg {
+  background-color: var(--ss-border);
+  mask-repeat: no-repeat;
+  mask-position: 50% 0;
+  width: 84px;
+  height: 48px;
+  display: block;
+  position: relative;
+  display: block;
+}
+.svg::before, .svg::after {
+  display: block;
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  mask-repeat: no-repeat;
+  mask-position: 50% 0;
+}
+.svg::before {
+  background-color: var(--ss-rarity);
+}
+.svg::after {
+  background-color: var(--ss-inner);
+}
+.svg.ss-pcy {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 48 48'%3E%3Cpath d='M44.01 33.54a8.57 8.57 0 0 1 2.72 2.03A4.7 4.7 0 0 1 48 38.63c0 1.69-.9 2.62-1.9 3.1-.5.25-1.51.43-1.67.44-.57.08-6.37.8-9.19.1-2.56-.64-6.12-.34-10.26.82-4.8 1.36-7.63-.27-11.3-1.24-2.68-.71-5.03-.6-6.95-.52-1.53.08-2.83.12-3.89-.11a2.46 2.46 0 0 1-2.02-2.33 2.96 2.96 0 0 1 1.54-2.66c.84-.52 2.42-.92 5.55-.76L0 22.2l3.11-7.51 8.58 1.62 4.04 6.46.01-10.04L25.8 4.39l10.7 9.03-.62 12.19 2.8-2.82 7.64-.12.66 7.29-2.97 3.58Z'/%3E%3C/svg%3E%0A");
+}
+.svg.ss-pcy::before {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 48 48'%3E%3Cpath d='m10.25 36.27-8.47-14.2L4.1 16.5l6.62 1.25 6.62 10.58.01-14.85 8.45-7 9.07 7.65-.8 15.57 5.3-5.33 5.5-.08.47 5.16-4.16 5s.62 0 1.54.28c1.46.46 3.7 2.1 3.7 3.9 0 1.81-2.16 1.96-2.16 1.96s-5.85.83-8.62.13c-2.77-.7-6.61-.42-11.08.84-4.46 1.25-7.06-.35-10.46-1.26-4.78-1.26-8.56-.13-10.9-.64-.94-.2-1.12-1.38 0-2.07.9-.54 2.72-.79 6.75-.35 0 0 .46-.83.3-.97Zm21.84-20.75-2.3-2.09L28.4 33.2s.3 2.65 2.62 2.1l1.07-19.78Zm5.08 17.26 1.08 1.12 4.31-4.73-.08-2.1-5.3 5.71ZM9.32 20.74l-2.92-.48 7.38 12.8s2.62 1.4 2.31-1.39L9.32 20.74Z'/%3E%3C/svg%3E%0A");
+}
+.svg.ss-pcy::after {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 48 48'%3E%3Cpath d='m37.17 32.78 5.31-5.7.08 2.09-4.3 4.73-1.09-1.12ZM9.32 20.74l6.77 10.93c.3 2.79-2.3 1.4-2.3 1.4l-7.4-12.81 2.93.48Zm22.77-5.22L31.02 35.3c-2.31.56-2.62-2.09-2.62-2.09l1.39-19.77 2.3 2.1Z'/%3E%3C/svg%3E%0A");
+}
+
 @-moz-document url-prefix() {
   .ss-fnm::before, .ss-pfnm::before {
     margin-left: -0.4%;
@@ -996,5 +1300,21 @@
     margin-left: -1.3%;
   }
 }
+_::-webkit-full-page-media .ss-inner, _:future .ss-inner, :root .safari_only .ss-inner {
+  display: none !important;
+}
+
+.ss-8ed:not(.ss-border):not(.ss-inner)::before {
+  content: "\f8e7";
+}
+.ss-8ed.ss-rarity-common.ss-border::after {
+  --ss-border: var(--ss-border-contrast);
+}
+.ss-8ed.ss-rarity-common.ss-inner::marker {
+  --ss-inner: #fff;
+}
+.ss-8ed.ss-rarity-uncommon.ss-inner::marker, .ss-8ed.ss-rarity-rare.ss-inner::marker, .ss-8ed.ss-rarity-mythic.ss-inner::marker, .ss-8ed.ss-rarity-foil.ss-inner::marker {
+  --ss-inner: var(--ss-border-contrast);
+}
 
 /*# sourceMappingURL=keyrune.css.map */

src/scss/_fixes.scss

@@ -18,3 +18,43 @@
         }
     }
 }
+
+// safari specific overrides
+_::-webkit-full-page-media, _:future, :root .safari_only {
+    .#{$keyrune-prefix}-inner {
+        display: none !important;
+    }
+}
+
+// set specific corrections
+//
+// 8ed alt
+.#{$keyrune-prefix}-8ed {
+
+    // if there's no border or inner, show the alternative version
+    &:not(.#{$keyrune-prefix}-border):not(.#{$keyrune-prefix}-inner) {
+        &::before {
+            content: "\f8e7";
+        }
+    }
+
+    // common: border is always black and inner is always white
+    &.#{$keyrune-prefix}-rarity-common {
+        &.#{$keyrune-prefix}-border::after {
+            --ss-border: var(--ss-border-contrast);
+        }
+        &.#{$keyrune-prefix}-inner::marker {
+            --ss-inner: #fff;
+        }
+    }
+
+    // uncommon, rare, mythic is black border and black inner
+    &.#{$keyrune-prefix}-rarity-uncommon,
+    &.#{$keyrune-prefix}-rarity-rare,
+    &.#{$keyrune-prefix}-rarity-mythic,
+    &.#{$keyrune-prefix}-rarity-foil {
+        &.#{$keyrune-prefix}-inner::marker {
+            --ss-inner: var(--ss-border-contrast);
+        }
+    }
+}

src/scss/_helpers.scss

@@ -1,6 +1,5 @@
 //
 // output the correct glyphs for the 3 layers' pseudoelements
-//
 @mixin layers($layers) {
     &::before {
         content: glyph-content(map-get($layers, rarity));
@@ -17,9 +16,12 @@
     }
 }
 
-//
+// return the css variable for the glyph's aspect ratio
+@mixin ratio($ratio) {
+    --aspect-ratio: #{$ratio};
+}
+
 // correctly parse the glyph's unicode for css
-//
 @function glyph_content($glyph) {
     @return unquote("\"#{$glyph}\"");
 }

src/scss/_sets.scss

@@ -38,16 +38,17 @@
     // ::before is the symbol layer
     // ::after is the border layer
     // ::marker is the (experimental) inner layer
-    @each $set, $layers in $keyrune-sets {
+    @each $set, $attributes in $keyrune-sets {
         &-#{$set} {
-            @include layers($layers);
+            @include ratio(map-get($attributes, ratio));
+            @include layers($attributes);
         }
         // check for aliases and assign the same glyphs
         @if ($keyrune-include-aliases) {
             @if map-get($keyrune-aliases, $set) {
                 @each $alias in map-get($keyrune-aliases, $set) {
                     &-#{$alias} {
-                        @include layers($layers);
+                        @include layers($attributes);
                     }
                 }
             }
@@ -57,7 +58,7 @@
             @if map-get($keyrune-aliases-complete, $set) {
                 @each $alias in map-get($keyrune-aliases-complete, $set) {
                     &-#{$alias} {
-                        @include layers($layers);
+                        @include layers($attributes);
                     }
                 }
             }
@@ -67,6 +68,7 @@
     // accessory features
     &.#{$keyrune-prefix} {
 
+        //
         // border
         &-border {
             // default and common border styles
@@ -92,8 +94,8 @@
             }
         }
 
-        // inner
+        //
-        // requires advanced positional styles for glyphs taller than they are wide
+        // inner (requires advanced positional styles for glyphs taller than they are wide)
         &-inner {
 
             // must be list-item for this to appear
@@ -120,6 +122,7 @@
             }
         }
 
+        //
         // rarity colors
         &-rarity {
 
@@ -167,6 +170,7 @@
             }
         }
 
+        //
         // fixed width
         &-fw {
 
@@ -186,24 +190,29 @@
                 left: 50%;
                 transform: translateX(-50%);
             }
+        }
 
-            &.#{$keyrune-prefix}-fw-square {
+        //
+        // uniform width
+        // currently this does not support the inner ::marker b/c we need to use inline-flex
+        &-uw {
+
+            // set the font size to 2rem and resize icons based on aspect ratio
+            align-items: center;
+            display: inline-flex;
+            height: 1em;
             width: 1em;
 
-                &::before {
+            // set the glyphs' font-size based on aspect ratio
-                    transform: scale(.5714);
+            &::before,
+            &::after {
+                font-size: calc(1em / var(--aspect-ratio));
             }
 
-                &.#{$keyrune-prefix}-border::after,
-                &.#{$keyrune-prefix}-inner::before, 
-                &.#{$keyrune-prefix}-inner::after, 
-                &.#{$keyrune-prefix}-inner::marker {
-                    transform: translateX(-50%) scale(.5714); // scale everything 1/1.75em
-                }
-            }
         }
 
-        // colors
+        //
+        // color overrides
         &-white {
             &::before,
             &::after,
@@ -213,3 +222,47 @@
         }
     }
 }
+
+.svg {
+    background-color: var(--ss-border);
+    mask-repeat: no-repeat;
+    mask-position: 50% 0;
+    width: 84px;
+    height: 48px;
+    display: block;
+    position: relative;
+    display: block;
+
+    &::before,
+    &::after {
+        display: block;
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        bottom: 0;
+        mask-repeat: no-repeat;
+        mask-position: 50% 0;
+    }
+
+    &::before {
+        background-color: var(--ss-rarity);  
+    }
+
+    &::after {
+        background-color: var(--ss-inner);  
+    }
+
+    &.#{$keyrune-prefix}-pcy {
+        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 48 48'%3E%3Cpath d='M44.01 33.54a8.57 8.57 0 0 1 2.72 2.03A4.7 4.7 0 0 1 48 38.63c0 1.69-.9 2.62-1.9 3.1-.5.25-1.51.43-1.67.44-.57.08-6.37.8-9.19.1-2.56-.64-6.12-.34-10.26.82-4.8 1.36-7.63-.27-11.3-1.24-2.68-.71-5.03-.6-6.95-.52-1.53.08-2.83.12-3.89-.11a2.46 2.46 0 0 1-2.02-2.33 2.96 2.96 0 0 1 1.54-2.66c.84-.52 2.42-.92 5.55-.76L0 22.2l3.11-7.51 8.58 1.62 4.04 6.46.01-10.04L25.8 4.39l10.7 9.03-.62 12.19 2.8-2.82 7.64-.12.66 7.29-2.97 3.58Z'/%3E%3C/svg%3E%0A");
+
+        &::before {
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 48 48'%3E%3Cpath d='m10.25 36.27-8.47-14.2L4.1 16.5l6.62 1.25 6.62 10.58.01-14.85 8.45-7 9.07 7.65-.8 15.57 5.3-5.33 5.5-.08.47 5.16-4.16 5s.62 0 1.54.28c1.46.46 3.7 2.1 3.7 3.9 0 1.81-2.16 1.96-2.16 1.96s-5.85.83-8.62.13c-2.77-.7-6.61-.42-11.08.84-4.46 1.25-7.06-.35-10.46-1.26-4.78-1.26-8.56-.13-10.9-.64-.94-.2-1.12-1.38 0-2.07.9-.54 2.72-.79 6.75-.35 0 0 .46-.83.3-.97Zm21.84-20.75-2.3-2.09L28.4 33.2s.3 2.65 2.62 2.1l1.07-19.78Zm5.08 17.26 1.08 1.12 4.31-4.73-.08-2.1-5.3 5.71ZM9.32 20.74l-2.92-.48 7.38 12.8s2.62 1.4 2.31-1.39L9.32 20.74Z'/%3E%3C/svg%3E%0A");
+        }
+
+        &::after {
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 48 48'%3E%3Cpath d='m37.17 32.78 5.31-5.7.08 2.09-4.3 4.73-1.09-1.12ZM9.32 20.74l6.77 10.93c.3 2.79-2.3 1.4-2.3 1.4l-7.4-12.81 2.93.48Zm22.77-5.22L31.02 35.3c-2.31.56-2.62-2.09-2.62-2.09l1.39-19.77 2.3 2.1Z'/%3E%3C/svg%3E%0A");
+        }
+    }
+}

src/scss/_variables.scss

@@ -2,7 +2,7 @@
 $keyrune-font-family:        "keyrune" !default;
 $keyrune-font-path:          "../font" !default;
 $keyrune-prefix:             "ss" !default;
-$keyrune-version:            "4.0.57" !default;
+$keyrune-version:            "4.0.94" !default;
 
 // build options
 $keyrune-include-aliases:    true;
@@ -57,7 +57,6 @@ $keyrune-sets: (
         rarity: "\e000",
         border: "\e001",
         inner: "\e002",
-        print: 3
     ),
     leb: (
         rarity: "\e003",
@@ -83,11 +82,13 @@ $keyrune-sets: (
         rarity: "\e00f",
         border: "\e010",
         inner: "\e011",
+        ratio: 1.75,
     ),
     atq: (
         rarity: "\e012",
         border: "\e013",
         inner: "\f8ff", // empty
+        ratio: 1.029,
     ),
     3ed: (
         rarity: "\e015",
@@ -404,8 +405,26 @@ $keyrune-sets: (
         border: "\e0d0",
         inner: "\f8ff", // empty
     ),
+    8ed: (
+        rarity: "\e0d2",
+        border: "\e0d3",
+        inner: "\f8ff", // empty
+        ratio: 0.9583,
+    ),
+    mrd: (
+        rarity: "\e0d5",
+        border: "\e0d6",
+        inner: "\f8ff", // empty
+        ratio: 1.3958,
+    ),
     //
     // backwards from the end for alternatives/oddities
+    8edalt: (
+        rarity: "\f8e7",
+        border: "\f8ff", // empty
+        inner: "\f8ff", // empty
+        ratio: 0.9583,
+    ),
     4eda: (
         rarity: "\f8f6",
         border: "\f8f5",

src/scss/keyrune-full.scss

@@ -6,3 +6,4 @@
 
 $keyrune-include-everything: true;
 @import "sets";
+@import "fixes";