@dta-au/civictheme-twig 1.13.1

package/dist/civictheme.stories.css

@@ -0,0 +1,2807 @@
+.story-container {
+  margin-bottom: 1rem;
+}
+.story-container .story-container__title {
+  font-size: var(--ct-typography-label-large-font-size);
+  line-height: var(--ct-typography-label-large-line-height);
+  font-family: var(--ct-typography-label-large-font-name);
+  font-weight: var(--ct-typography-label-large-font-weight);
+  letter-spacing: var(--ct-typography-label-large-letter-spacing);
+}
+.story-container .story-container__title {
+  margin: 0 auto;
+}
+.story-container .story-container__title {
+  max-width: calc(100vw - 48px);
+}
+@media (min-width: 368px) {
+  .story-container .story-container__title {
+    max-width: 320px;
+  }
+}
+@media (min-width: 576px) {
+  .story-container .story-container__title {
+    max-width: 528px;
+  }
+}
+@media (min-width: 768px) {
+  .story-container .story-container__title {
+    max-width: 720px;
+  }
+}
+@media (min-width: 992px) {
+  .story-container .story-container__title {
+    max-width: 896px;
+  }
+}
+@media (min-width: 1280px) {
+  .story-container .story-container__title {
+    max-width: 1184px;
+  }
+}
+@media (min-width: 1440px) {
+  .story-container .story-container__title {
+    max-width: 1248px;
+  }
+}
+.story-container .story-container__title {
+  border-bottom: solid 0.0625rem;
+  margin-bottom: 1rem;
+  margin-top: 2rem;
+}
+.story-container .story-container__subtitle {
+  font-size: var(--ct-typography-label-regular-font-size);
+  line-height: var(--ct-typography-label-regular-line-height);
+  font-family: var(--ct-typography-label-regular-font-name);
+  font-weight: var(--ct-typography-label-regular-font-weight);
+  letter-spacing: var(--ct-typography-label-regular-letter-spacing);
+}
+.story-container .story-container__subtitle {
+  margin: 0 auto;
+}
+.story-container .story-container__subtitle {
+  max-width: calc(100vw - 48px);
+}
+@media (min-width: 368px) {
+  .story-container .story-container__subtitle {
+    max-width: 320px;
+  }
+}
+@media (min-width: 576px) {
+  .story-container .story-container__subtitle {
+    max-width: 528px;
+  }
+}
+@media (min-width: 768px) {
+  .story-container .story-container__subtitle {
+    max-width: 720px;
+  }
+}
+@media (min-width: 992px) {
+  .story-container .story-container__subtitle {
+    max-width: 896px;
+  }
+}
+@media (min-width: 1280px) {
+  .story-container .story-container__subtitle {
+    max-width: 1184px;
+  }
+}
+@media (min-width: 1440px) {
+  .story-container .story-container__subtitle {
+    max-width: 1248px;
+  }
+}
+.story-container .story-container__subtitle {
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+}
+.story-container .story-container__content {
+  margin: 0 auto;
+}
+.story-container .story-container__content {
+  max-width: calc(100vw - 48px);
+}
+@media (min-width: 368px) {
+  .story-container .story-container__content {
+    max-width: 320px;
+  }
+}
+@media (min-width: 576px) {
+  .story-container .story-container__content {
+    max-width: 528px;
+  }
+}
+@media (min-width: 768px) {
+  .story-container .story-container__content {
+    max-width: 720px;
+  }
+}
+@media (min-width: 992px) {
+  .story-container .story-container__content {
+    max-width: 896px;
+  }
+}
+@media (min-width: 1280px) {
+  .story-container .story-container__content {
+    max-width: 1184px;
+  }
+}
+@media (min-width: 1440px) {
+  .story-container .story-container__content {
+    max-width: 1248px;
+  }
+}
+.story-container .story-container__content {
+  margin-bottom: 2rem;
+}
+.story-container .story-container__subcontent {
+  margin-bottom: 2rem;
+}
+.story-container.story-container--columns {
+  display: flex;
+}
+.story-container.story-container--columns--2 .story-container__column {
+  width: 50%;
+  padding: 1rem;
+}
+.story-container .story-container__column {
+  flex: 1;
+}
+.story-container .story-container__column--light {
+  background: var(--ct-color-light-background-light);
+}
+.story-container .story-container__column--light .story-container__title,
+.story-container .story-container__column--light .story-container__subtitle {
+  color: var(--ct-color-light-heading);
+}
+.story-container .story-container__column--light .story-container__content,
+.story-container .story-container__column--light .story-container__subcontent {
+  color: var(--ct-color-light-body);
+}
+.story-container .story-container__column--dark {
+  background: var(--ct-color-dark-background);
+}
+.story-container .story-container__column--dark .story-container__title,
+.story-container .story-container__column--dark .story-container__subtitle {
+  color: var(--ct-color-dark-heading);
+}
+.story-container .story-container__column--dark .story-container__content,
+.story-container .story-container__column--dark .story-container__subcontent {
+  color: var(--ct-color-dark-body);
+}
+
+code {
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  border: 1px solid #e1e1e8;
+  color: #d63384;
+  display: inline-block;
+  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  font-size: 0.9em;
+  padding: 0 0.25em;
+  vertical-align: top;
+}
+
+#root > .story-docs {
+  border: solid 0.0625rem #ccc;
+  padding: 2rem;
+  margin: 2rem auto;
+  max-width: 60%;
+  text-align: center;
+  line-height: 150%;
+}
+#root > .story-docs.story-docs-size--small {
+  max-width: 368px;
+}
+#root > .story-docs.story-docs-size--medium {
+  max-width: 576px;
+}
+#root > .story-docs.story-docs-size--large {
+  margin: 4rem auto;
+  min-width: 1440px;
+}
+#root > .story-docs.story-docs-size--fluid {
+  width: fit-content;
+  max-width: 80%;
+}
+#root > .story-docs #root > .story-docs__title {
+  font-size: var(--ct-typography-label-large-font-size);
+  line-height: var(--ct-typography-label-large-line-height);
+  font-family: var(--ct-typography-label-large-font-name);
+  font-weight: var(--ct-typography-label-large-font-weight);
+  letter-spacing: var(--ct-typography-label-large-letter-spacing);
+}
+#root > .story-docs #root > .story-docs__content {
+  margin-bottom: 2rem;
+}
+#root .test-docs-align-right {
+  text-align: right !important;
+}
+#root .test-docs-align-right > * {
+  text-align: right !important;
+}
+
+.sb-show-main {
+  overflow-y: scroll;
+  transition: background-color 0s !important;
+}
+.sb-show-main.sb-main-fullscreen #root, .sb-show-main.sb-main-centered #root {
+  padding: 0;
+}
+
+#root {
+  font-family: sans-serif;
+  padding: 1rem;
+}
+#root > .story-layout.story-layout-size--small {
+  max-width: 336px;
+}
+@media (min-width: 576px) {
+  #root > .story-layout.story-layout-size--small {
+    max-width: 544px;
+  }
+}
+#root > .story-layout.story-layout-size--medium {
+  max-width: 768px;
+}
+#root > .story-layout.story-layout-size--large {
+  max-width: 1440px;
+}
+#root > .story-layout.story-layout--resizable {
+  border: solid 0.0625rem yellowgreen;
+  padding: 1rem;
+  width: 85vw;
+  height: 95vh;
+  resize: horizontal;
+  overflow: auto;
+}
+#root > .story-layout.story-layout--container {
+  container-type: inline-size;
+}
+#root > .story-layout.story-layout--resizable.story-layout-size--small, #root > .story-layout.story-layout--container.story-layout-size--small {
+  max-width: initial;
+  width: 27rem;
+}
+#root > .story-layout.story-layout--resizable.story-layout-size--medium, #root > .story-layout.story-layout--container.story-layout-size--medium {
+  max-width: initial;
+  width: 40rem;
+}
+#root > .story-layout.story-layout--resizable.story-layout-size--large, #root > .story-layout.story-layout--container.story-layout-size--large {
+  max-width: initial;
+  width: 94rem;
+}
+
+.sb-main-fullscreen #root .story-layout.story-layout--centered-vertically {
+  margin-top: 30vh;
+}
+
+.story-placeholder,
+.story-placeholder--hugged,
+.story-placeholder--fixed {
+  display: inline-block;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  text-align: center;
+  font-family: sans-serif;
+  background-color: rgba(84, 137, 146, 0.3);
+  border: dashed 1px rgba(84, 137, 146, 0.7);
+  color: #1c2e31;
+}
+.ct-theme-dark .story-placeholder,
+.ct-theme-dark .story-placeholder--hugged,
+.ct-theme-dark .story-placeholder--fixed {
+  background-color: rgba(110, 162, 171, 0.7);
+  border: dashed 1px rgba(239, 245, 246, 0.9);
+  color: #eff5f6;
+}
+
+.story-placeholder {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.story-placeholder--hugged {
+  width: auto;
+}
+
+.story-placeholder--fixed {
+  width: 184px;
+}
+
+.story-slot {
+  display: grid;
+  align-items: center;
+  background-color: rgba(128, 0, 128, 0.3);
+  padding: 1em;
+  text-align: center;
+  font-family: sans-serif;
+  font-size: 0.8em;
+  border: dotted 0.0625rem purple;
+  white-space: nowrap;
+  height: 100%;
+}
+.ct-theme-dark .story-slot {
+  background-color: rgba(255, 255, 255, 0.3);
+  border: dotted 0.0625rem purple;
+}
+.story-slot code {
+  background-color: transparent;
+  border: none;
+  color: inherit;
+}
+
+.story-slot--image_over {
+  position: absolute;
+  top: 4em;
+  left: 0;
+  right: 0;
+}
+
+.story-about-civictheme {
+  background-color: #003f56;
+}
+.story-about-civictheme .ct-logo .ct-logo__image--mobile {
+  max-height: 3rem;
+}
+.story-about-civictheme .ct-logo .ct-logo__image--desktop {
+  max-height: 6rem;
+}
+.story-about-civictheme .ct-heading {
+  margin-top: 1.5rem;
+}
+@media (min-width: 768px) {
+  .story-about-civictheme .ct-heading {
+    margin-top: 0;
+  }
+}
+.story-about-civictheme .ct-item-list__item {
+  display: flex;
+  padding-left: 0;
+  align-items: center;
+}
+.story-about-civictheme .ct-item-list__item .ct-paragraph {
+  padding-left: 1rem;
+  margin-bottom: 0;
+}
+.story-about-civictheme .ct-item-list__item .ct-icon {
+  overflow: visible;
+}
+
+.story-background-wrapper {
+  position: absolute;
+  width: 80%;
+  height: 80%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.story-background-wrapper .ct-background {
+  height: 100%;
+  width: 100%;
+}
+
+.story-menu-multiple-inline-with-absolute-panels [data-collapsible] {
+  position: relative;
+}
+
+.story-menu-multiple-inline-with-absolute-panels [data-collapsible] [data-collapsible-panel] {
+  top: 1.5em;
+}
+
+.story-menu-multiple-inline-with-absolute-panels ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.story-menu-multiple-inline-with-absolute-panels ul li {
+  white-space: nowrap;
+}
+
+.story-menu-multiple-inline-with-absolute-panels ul li[data-collapsible] li a {
+  display: block;
+  padding: 1em;
+}
+
+.story-menu-multiple-inline-with-absolute-panels ul li[data-collapsible] li a:hover {
+  background: cornflowerblue;
+}
+
+.story-menu-focus *:focus {
+  outline: solid 2px green;
+}
+
+.story-menu-focus button:focus {
+  outline: solid 2px orange;
+}
+
+.story-menu-focus [data-collapsible-trigger]:focus {
+  outline: solid 2px red;
+}
+
+.story-colors-wrapper {
+  display: flex;
+  flex-flow: row wrap;
+}
+.story-colors-wrapper .story-color-light--brand1 {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--brand1 .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #003f56;
+  position: relative;
+  background-color: #00698f;
+}
+.story-colors-wrapper .story-color-light--brand1 .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--brand1 .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--brand1 .story-color-text::after {
+  content: "#00698F";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--brand2 {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--brand2 .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #7f8e98;
+  position: relative;
+  background-color: #e6e9eb;
+}
+.story-colors-wrapper .story-color-light--brand2 .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--brand2 .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--brand2 .story-color-text::after {
+  content: "#E6E9EB";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--brand3 {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--brand3 .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #0b0b0b;
+  position: relative;
+  background-color: #121313;
+}
+.story-colors-wrapper .story-color-light--brand3 .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--brand3 .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--brand3 .story-color-text::after {
+  content: "#121313";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--brand1 {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--brand1 .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #00a2d3;
+  position: relative;
+  background-color: #61daff;
+}
+.story-colors-wrapper .story-color-dark--brand1 .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--brand1 .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--brand1 .story-color-text::after {
+  content: "#61DAFF";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--brand2 {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--brand2 .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #00232f;
+  position: relative;
+  background-color: #003a4f;
+}
+.story-colors-wrapper .story-color-dark--brand2 .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--brand2 .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--brand2 .story-color-text::after {
+  content: "#003A4F";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--brand3 {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--brand3 .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #003f56;
+  position: relative;
+  background-color: #00698f;
+}
+.story-colors-wrapper .story-color-dark--brand3 .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--brand3 .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--brand3 .story-color-text::after {
+  content: "#00698F";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--heading {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--heading .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #001922;
+  position: relative;
+  background-color: #002a39;
+}
+.story-colors-wrapper .story-color-light--heading .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--heading .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--heading .story-color-text::after {
+  content: "#002A39";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--body {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--body .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #1f292c;
+  position: relative;
+  background-color: #33444a;
+}
+.story-colors-wrapper .story-color-light--body .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--body .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--body .story-color-text::after {
+  content: "#33444A";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--background-light {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--background-light .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #989898;
+  position: relative;
+  background-color: #fdfdfd;
+}
+.story-colors-wrapper .story-color-light--background-light .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--background-light .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--background-light .story-color-text::after {
+  content: "#FDFDFD";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--background {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--background .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #7f8e98;
+  position: relative;
+  background-color: #e6e9eb;
+}
+.story-colors-wrapper .story-color-light--background .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--background .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--background .story-color-text::after {
+  content: "#E6E9EB";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--background-dark {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--background-dark .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #6c7073;
+  position: relative;
+  background-color: #b8babc;
+}
+.story-colors-wrapper .story-color-light--background-dark .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--background-dark .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--background-dark .story-color-text::after {
+  content: "#B8BABC";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--border-light {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--border-light .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #67696b;
+  position: relative;
+  background-color: #adafb0;
+}
+.story-colors-wrapper .story-color-light--border-light .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--border-light .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--border-light .story-color-text::after {
+  content: "#ADAFB0";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--border {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--border .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #373838;
+  position: relative;
+  background-color: #5c5d5e;
+}
+.story-colors-wrapper .story-color-light--border .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--border .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--border .story-color-text::after {
+  content: "#5C5D5E";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--border-dark {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--border-dark .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #0e0e0e;
+  position: relative;
+  background-color: #171718;
+}
+.story-colors-wrapper .story-color-light--border-dark .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--border-dark .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--border-dark .story-color-text::after {
+  content: "#171718";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--interaction-text {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--interaction-text .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #8ba2a2;
+  position: relative;
+  background-color: #fafbfb;
+}
+.story-colors-wrapper .story-color-light--interaction-text .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--interaction-text .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--interaction-text .story-color-text::after {
+  content: "#FAFBFB";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--interaction-background {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--interaction-background .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #003f56;
+  position: relative;
+  background-color: #00698f;
+}
+.story-colors-wrapper .story-color-light--interaction-background .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--interaction-background .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--interaction-background .story-color-text::after {
+  content: "#00698F";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--interaction-hover-text {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--interaction-hover-text .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #8ba2a2;
+  position: relative;
+  background-color: #fafbfb;
+}
+.story-colors-wrapper .story-color-light--interaction-hover-text .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--interaction-hover-text .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--interaction-hover-text .story-color-text::after {
+  content: "#FAFBFB";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--interaction-hover-background {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--interaction-hover-background .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #002634;
+  position: relative;
+  background-color: #003f56;
+}
+.story-colors-wrapper .story-color-light--interaction-hover-background .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--interaction-hover-background .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--interaction-hover-background .story-color-text::after {
+  content: "#003F56";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--interaction-focus {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--interaction-focus .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #4f2494;
+  position: relative;
+  background-color: #8b5cd7;
+}
+.story-colors-wrapper .story-color-light--interaction-focus .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--interaction-focus .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--interaction-focus .story-color-text::after {
+  content: "#8B5CD7";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--highlight {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--highlight .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #0b0b0b;
+  position: relative;
+  background-color: #121313;
+}
+.story-colors-wrapper .story-color-light--highlight .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--highlight .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--highlight .story-color-text::after {
+  content: "#121313";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--information {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--information .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #004a73;
+  position: relative;
+  background-color: #007cbf;
+}
+.story-colors-wrapper .story-color-light--information .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--information .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--information .story-color-text::after {
+  content: "#007CBF";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--warning {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--warning .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #793100;
+  position: relative;
+  background-color: #c95100;
+}
+.story-colors-wrapper .story-color-light--warning .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--warning .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--warning .story-color-text::after {
+  content: "#C95100";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--error {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--error .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #7d201f;
+  position: relative;
+  background-color: #ce3836;
+}
+.story-colors-wrapper .story-color-light--error .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--error .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--error .story-color-text::after {
+  content: "#CE3836";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-light--success {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-light--success .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #004f4e;
+  position: relative;
+  background-color: #008482;
+}
+.story-colors-wrapper .story-color-light--success .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-light--success .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-light--success .story-color-text::after {
+  content: "#008482";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--heading {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--heading .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #2ecbff;
+  position: relative;
+  background-color: #f7fdff;
+}
+.story-colors-wrapper .story-color-dark--heading .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--heading .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--heading .story-color-text::after {
+  content: "#F7FDFF";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--body {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--body .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #25c8ff;
+  position: relative;
+  background-color: #e7f9ff;
+}
+.story-colors-wrapper .story-color-dark--body .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--body .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--body .story-color-text::after {
+  content: "#E7F9FF";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--background-light {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--background-light .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #082935;
+  position: relative;
+  background-color: #0d4458;
+}
+.story-colors-wrapper .story-color-dark--background-light .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--background-light .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--background-light .story-color-text::after {
+  content: "#0D4458";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--background {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--background .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #00232f;
+  position: relative;
+  background-color: #003a4f;
+}
+.story-colors-wrapper .story-color-dark--background .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--background .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--background .story-color-text::after {
+  content: "#003A4F";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--background-dark {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--background-dark .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #001921;
+  position: relative;
+  background-color: #002937;
+}
+.story-colors-wrapper .story-color-dark--background-dark .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--background-dark .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--background-dark .story-color-text::after {
+  content: "#002937";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--border-light {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--border-light .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #58757f;
+  position: relative;
+  background-color: #a6bac1;
+}
+.story-colors-wrapper .story-color-dark--border-light .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--border-light .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--border-light .story-color-text::after {
+  content: "#A6BAC1";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--border {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--border .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #102f3a;
+  position: relative;
+  background-color: #1a4e61;
+}
+.story-colors-wrapper .story-color-dark--border .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--border .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--border .story-color-text::after {
+  content: "#1A4E61";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--border-dark {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--border-dark .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #001921;
+  position: relative;
+  background-color: #002937;
+}
+.story-colors-wrapper .story-color-dark--border-dark .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--border-dark .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--border-dark .story-color-text::after {
+  content: "#002937";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--interaction-text {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--interaction-text .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #00232f;
+  position: relative;
+  background-color: #003a4f;
+}
+.story-colors-wrapper .story-color-dark--interaction-text .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--interaction-text .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--interaction-text .story-color-text::after {
+  content: "#003A4F";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--interaction-background {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--interaction-background .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #00a2d3;
+  position: relative;
+  background-color: #61daff;
+}
+.story-colors-wrapper .story-color-dark--interaction-background .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--interaction-background .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--interaction-background .story-color-text::after {
+  content: "#61DAFF";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--interaction-hover-text {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--interaction-hover-text .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #001921;
+  position: relative;
+  background-color: #002937;
+}
+.story-colors-wrapper .story-color-dark--interaction-hover-text .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--interaction-hover-text .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--interaction-hover-text .story-color-text::after {
+  content: "#002937";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--interaction-hover-background {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--interaction-hover-background .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #00bff9;
+  position: relative;
+  background-color: #a0e9ff;
+}
+.story-colors-wrapper .story-color-dark--interaction-hover-background .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--interaction-hover-background .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--interaction-hover-background .story-color-text::after {
+  content: "#A0E9FF";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--interaction-focus {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--interaction-focus .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #4f2494;
+  position: relative;
+  background-color: #8b5cd7;
+}
+.story-colors-wrapper .story-color-dark--interaction-focus .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--interaction-focus .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--interaction-focus .story-color-text::after {
+  content: "#8B5CD7";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--highlight {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--highlight .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #003f56;
+  position: relative;
+  background-color: #00698f;
+}
+.story-colors-wrapper .story-color-dark--highlight .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--highlight .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--highlight .story-color-text::after {
+  content: "#00698F";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--information {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--information .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #0385c2;
+  position: relative;
+  background-color: #4cc4fc;
+}
+.story-colors-wrapper .story-color-dark--information .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--information .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--information .story-color-text::after {
+  content: "#4CC4FC";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--warning {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--warning .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #9a4c17;
+  position: relative;
+  background-color: #e38444;
+}
+.story-colors-wrapper .story-color-dark--warning .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--warning .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--warning .story-color-text::after {
+  content: "#E38444";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--error {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--error .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #a71916;
+  position: relative;
+  background-color: #e85653;
+}
+.story-colors-wrapper .story-color-dark--error .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--error .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--error .story-color-text::after {
+  content: "#E85653";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+.story-colors-wrapper .story-color-dark--success {
+  margin: 0 1rem 1rem 0;
+  position: relative;
+  width: 6rem;
+}
+.story-colors-wrapper .story-color-dark--success .story-color-element {
+  display: block;
+  height: 3.75rem;
+  box-shadow: inset 0 0 0 0.0625rem #0b6a68;
+  position: relative;
+  background-color: #12b0ae;
+}
+.story-colors-wrapper .story-color-dark--success .story-color-text {
+  display: block;
+  font-size: var(--ct-typography-label-extra-small-font-size);
+  line-height: var(--ct-typography-label-extra-small-line-height);
+  font-family: var(--ct-typography-label-extra-small-font-name);
+  font-weight: var(--ct-typography-label-extra-small-font-weight);
+  letter-spacing: var(--ct-typography-label-extra-small-letter-spacing);
+}
+.story-colors-wrapper .story-color-dark--success .story-color-text {
+  text-align: center;
+  margin: 0.5rem 0;
+}
+.story-colors-wrapper .story-color-dark--success .story-color-text::after {
+  content: "#12B0AE";
+  font-family: "Courier New", monospace, sans-serif;
+  text-align: center;
+  display: block;
+  position: absolute;
+  line-height: 150%;
+  width: 100%;
+}
+
+.story-elevation-wrapper {
+  display: flex;
+  flex-flow: row wrap;
+}
+.story-elevation-wrapper .story-elevation--1 {
+  width: 10rem;
+  height: 10rem;
+  margin: 3rem 5rem 6rem 0;
+  border-radius: 0.25rem;
+  position: relative;
+  background-color: white;
+}
+.story-elevation-wrapper .story-elevation--1 {
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
+}
+.story-elevation-wrapper .story-elevation--2 {
+  width: 10rem;
+  height: 10rem;
+  margin: 3rem 5rem 6rem 0;
+  border-radius: 0.25rem;
+  position: relative;
+  background-color: white;
+}
+.story-elevation-wrapper .story-elevation--2 {
+  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.2);
+}
+.story-elevation-wrapper .story-elevation--3 {
+  width: 10rem;
+  height: 10rem;
+  margin: 3rem 5rem 6rem 0;
+  border-radius: 0.25rem;
+  position: relative;
+  background-color: white;
+}
+.story-elevation-wrapper .story-elevation--3 {
+  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
+}
+.story-elevation-wrapper .story-elevation--4 {
+  width: 10rem;
+  height: 10rem;
+  margin: 3rem 5rem 6rem 0;
+  border-radius: 0.25rem;
+  position: relative;
+  background-color: white;
+}
+.story-elevation-wrapper .story-elevation--4 {
+  box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.2);
+}
+
+#flyout-story1 [data-flyout-panel] {
+  box-shadow: 0 0 0.0625rem 0.0625rem #f00 inset;
+  padding: 1rem;
+}
+
+#flyout-story2 [data-flyout-panel] {
+  box-shadow: 0 0 0.0625rem 0.0625rem #00f inset;
+  padding: 1rem;
+}
+
+#flyout-story3 [data-flyout-panel] {
+  box-shadow: 0 0 0.0625rem 0.0625rem #0f0 inset;
+  padding: 1rem;
+}
+
+#flyout-story4 [data-flyout-panel] {
+  box-shadow: 0 0 0.0625rem 0.0625rem #c95100 inset;
+  padding: 1rem;
+}
+
+#flyout-story5 [data-flyout-panel] {
+  box-shadow: 0 0 0.0625rem 0.0625rem #b388ff inset;
+  padding: 1rem;
+}
+
+.story-fonts-wrapper .story-font--thin--primary {
+  font-family: "Lexend", sans-serif;
+  font-weight: 100;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--thin--secondary {
+  font-family: "Public Sans", sans-serif;
+  font-weight: 100;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--italic--thin--primary {
+  font-family: "Lexend", sans-serif;
+  font-weight: 100;
+  font-style: italic;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--italic--thin--secondary {
+  font-family: "Public Sans", sans-serif;
+  font-weight: 100;
+  font-style: italic;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--extralight--primary {
+  font-family: "Lexend", sans-serif;
+  font-weight: 200;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--extralight--secondary {
+  font-family: "Public Sans", sans-serif;
+  font-weight: 200;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--italic--extralight--primary {
+  font-family: "Lexend", sans-serif;
+  font-weight: 200;
+  font-style: italic;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--italic--extralight--secondary {
+  font-family: "Public Sans", sans-serif;
+  font-weight: 200;
+  font-style: italic;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--regular--primary {
+  font-family: "Lexend", sans-serif;
+  font-weight: 400;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--regular--secondary {
+  font-family: "Public Sans", sans-serif;
+  font-weight: 400;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--italic--regular--primary {
+  font-family: "Lexend", sans-serif;
+  font-weight: 400;
+  font-style: italic;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--italic--regular--secondary {
+  font-family: "Public Sans", sans-serif;
+  font-weight: 400;
+  font-style: italic;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--medium--primary {
+  font-family: "Lexend", sans-serif;
+  font-weight: 500;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--medium--secondary {
+  font-family: "Public Sans", sans-serif;
+  font-weight: 500;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--italic--medium--primary {
+  font-family: "Lexend", sans-serif;
+  font-weight: 500;
+  font-style: italic;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--italic--medium--secondary {
+  font-family: "Public Sans", sans-serif;
+  font-weight: 500;
+  font-style: italic;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--semibold--primary {
+  font-family: "Lexend", sans-serif;
+  font-weight: 600;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--semibold--secondary {
+  font-family: "Public Sans", sans-serif;
+  font-weight: 600;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--italic--semibold--primary {
+  font-family: "Lexend", sans-serif;
+  font-weight: 600;
+  font-style: italic;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--italic--semibold--secondary {
+  font-family: "Public Sans", sans-serif;
+  font-weight: 600;
+  font-style: italic;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--bold--primary {
+  font-family: "Lexend", sans-serif;
+  font-weight: 700;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--bold--secondary {
+  font-family: "Public Sans", sans-serif;
+  font-weight: 700;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--italic--bold--primary {
+  font-family: "Lexend", sans-serif;
+  font-weight: 700;
+  font-style: italic;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--italic--bold--secondary {
+  font-family: "Public Sans", sans-serif;
+  font-weight: 700;
+  font-style: italic;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--extrabold--primary {
+  font-family: "Lexend", sans-serif;
+  font-weight: 800;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--extrabold--secondary {
+  font-family: "Public Sans", sans-serif;
+  font-weight: 800;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--italic--extrabold--primary {
+  font-family: "Lexend", sans-serif;
+  font-weight: 800;
+  font-style: italic;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--italic--extrabold--secondary {
+  font-family: "Public Sans", sans-serif;
+  font-weight: 800;
+  font-style: italic;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--black--primary {
+  font-family: "Lexend", sans-serif;
+  font-weight: 900;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--black--secondary {
+  font-family: "Public Sans", sans-serif;
+  font-weight: 900;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--italic--black--primary {
+  font-family: "Lexend", sans-serif;
+  font-weight: 900;
+  font-style: italic;
+  font-size: 3rem;
+}
+.story-fonts-wrapper .story-font--italic--black--secondary {
+  font-family: "Public Sans", sans-serif;
+  font-weight: 900;
+  font-style: italic;
+  font-size: 3rem;
+}
+
+.story-grid-outlines .container,
+.story-grid-outlines .container-fluid {
+  background-color: rgba(255, 0, 0, 0.025);
+  box-shadow: 0 0 1px 1px red inset;
+}
+.story-grid-outlines .container .row,
+.story-grid-outlines .container ul,
+.story-grid-outlines .container-fluid .row,
+.story-grid-outlines .container-fluid ul {
+  counter-reset: story-coloumn-counter;
+  background-color: rgba(255, 165, 0, 0.2);
+  outline: 1px solid rgba(255, 165, 0, 0.2);
+}
+.story-grid-outlines .container .row > .col,
+.story-grid-outlines .container .row > [class*=col-],
+.story-grid-outlines .container .row > li,
+.story-grid-outlines .container ul > .col,
+.story-grid-outlines .container ul > [class*=col-],
+.story-grid-outlines .container ul > li,
+.story-grid-outlines .container-fluid .row > .col,
+.story-grid-outlines .container-fluid .row > [class*=col-],
+.story-grid-outlines .container-fluid .row > li,
+.story-grid-outlines .container-fluid ul > .col,
+.story-grid-outlines .container-fluid ul > [class*=col-],
+.story-grid-outlines .container-fluid ul > li {
+  counter-increment: story-coloumn-counter;
+  position: relative;
+}
+.story-grid-outlines .container .row > .col::after,
+.story-grid-outlines .container .row > [class*=col-]::after,
+.story-grid-outlines .container .row > li::after,
+.story-grid-outlines .container ul > .col::after,
+.story-grid-outlines .container ul > [class*=col-]::after,
+.story-grid-outlines .container ul > li::after,
+.story-grid-outlines .container-fluid .row > .col::after,
+.story-grid-outlines .container-fluid .row > [class*=col-]::after,
+.story-grid-outlines .container-fluid .row > li::after,
+.story-grid-outlines .container-fluid ul > .col::after,
+.story-grid-outlines .container-fluid ul > [class*=col-]::after,
+.story-grid-outlines .container-fluid ul > li::after {
+  content: counter(story-coloumn-counter) " of " attr(data-story-total-columns);
+  position: absolute;
+  bottom: 2px;
+  right: 0;
+  left: 0;
+  text-align: center;
+  font-size: 0.6em;
+}
+.story-grid-outlines .container .row > .col .row,
+.story-grid-outlines .container .row > .col ul,
+.story-grid-outlines .container .row > [class*=col-] .row,
+.story-grid-outlines .container .row > [class*=col-] ul,
+.story-grid-outlines .container .row > li .row,
+.story-grid-outlines .container .row > li ul,
+.story-grid-outlines .container ul > .col .row,
+.story-grid-outlines .container ul > .col ul,
+.story-grid-outlines .container ul > [class*=col-] .row,
+.story-grid-outlines .container ul > [class*=col-] ul,
+.story-grid-outlines .container ul > li .row,
+.story-grid-outlines .container ul > li ul,
+.story-grid-outlines .container-fluid .row > .col .row,
+.story-grid-outlines .container-fluid .row > .col ul,
+.story-grid-outlines .container-fluid .row > [class*=col-] .row,
+.story-grid-outlines .container-fluid .row > [class*=col-] ul,
+.story-grid-outlines .container-fluid .row > li .row,
+.story-grid-outlines .container-fluid .row > li ul,
+.story-grid-outlines .container-fluid ul > .col .row,
+.story-grid-outlines .container-fluid ul > .col ul,
+.story-grid-outlines .container-fluid ul > [class*=col-] .row,
+.story-grid-outlines .container-fluid ul > [class*=col-] ul,
+.story-grid-outlines .container-fluid ul > li .row,
+.story-grid-outlines .container-fluid ul > li ul {
+  counter-reset: story-column-nested-counter;
+}
+.story-grid-outlines .container .row > .col .row > .col,
+.story-grid-outlines .container .row > .col .row > [class*=col-],
+.story-grid-outlines .container .row > .col .row > li,
+.story-grid-outlines .container .row > .col ul > .col,
+.story-grid-outlines .container .row > .col ul > [class*=col-],
+.story-grid-outlines .container .row > .col ul > li,
+.story-grid-outlines .container .row > [class*=col-] .row > .col,
+.story-grid-outlines .container .row > [class*=col-] .row > [class*=col-],
+.story-grid-outlines .container .row > [class*=col-] .row > li,
+.story-grid-outlines .container .row > [class*=col-] ul > .col,
+.story-grid-outlines .container .row > [class*=col-] ul > [class*=col-],
+.story-grid-outlines .container .row > [class*=col-] ul > li,
+.story-grid-outlines .container .row > li .row > .col,
+.story-grid-outlines .container .row > li .row > [class*=col-],
+.story-grid-outlines .container .row > li .row > li,
+.story-grid-outlines .container .row > li ul > .col,
+.story-grid-outlines .container .row > li ul > [class*=col-],
+.story-grid-outlines .container .row > li ul > li,
+.story-grid-outlines .container ul > .col .row > .col,
+.story-grid-outlines .container ul > .col .row > [class*=col-],
+.story-grid-outlines .container ul > .col .row > li,
+.story-grid-outlines .container ul > .col ul > .col,
+.story-grid-outlines .container ul > .col ul > [class*=col-],
+.story-grid-outlines .container ul > .col ul > li,
+.story-grid-outlines .container ul > [class*=col-] .row > .col,
+.story-grid-outlines .container ul > [class*=col-] .row > [class*=col-],
+.story-grid-outlines .container ul > [class*=col-] .row > li,
+.story-grid-outlines .container ul > [class*=col-] ul > .col,
+.story-grid-outlines .container ul > [class*=col-] ul > [class*=col-],
+.story-grid-outlines .container ul > [class*=col-] ul > li,
+.story-grid-outlines .container ul > li .row > .col,
+.story-grid-outlines .container ul > li .row > [class*=col-],
+.story-grid-outlines .container ul > li .row > li,
+.story-grid-outlines .container ul > li ul > .col,
+.story-grid-outlines .container ul > li ul > [class*=col-],
+.story-grid-outlines .container ul > li ul > li,
+.story-grid-outlines .container-fluid .row > .col .row > .col,
+.story-grid-outlines .container-fluid .row > .col .row > [class*=col-],
+.story-grid-outlines .container-fluid .row > .col .row > li,
+.story-grid-outlines .container-fluid .row > .col ul > .col,
+.story-grid-outlines .container-fluid .row > .col ul > [class*=col-],
+.story-grid-outlines .container-fluid .row > .col ul > li,
+.story-grid-outlines .container-fluid .row > [class*=col-] .row > .col,
+.story-grid-outlines .container-fluid .row > [class*=col-] .row > [class*=col-],
+.story-grid-outlines .container-fluid .row > [class*=col-] .row > li,
+.story-grid-outlines .container-fluid .row > [class*=col-] ul > .col,
+.story-grid-outlines .container-fluid .row > [class*=col-] ul > [class*=col-],
+.story-grid-outlines .container-fluid .row > [class*=col-] ul > li,
+.story-grid-outlines .container-fluid .row > li .row > .col,
+.story-grid-outlines .container-fluid .row > li .row > [class*=col-],
+.story-grid-outlines .container-fluid .row > li .row > li,
+.story-grid-outlines .container-fluid .row > li ul > .col,
+.story-grid-outlines .container-fluid .row > li ul > [class*=col-],
+.story-grid-outlines .container-fluid .row > li ul > li,
+.story-grid-outlines .container-fluid ul > .col .row > .col,
+.story-grid-outlines .container-fluid ul > .col .row > [class*=col-],
+.story-grid-outlines .container-fluid ul > .col .row > li,
+.story-grid-outlines .container-fluid ul > .col ul > .col,
+.story-grid-outlines .container-fluid ul > .col ul > [class*=col-],
+.story-grid-outlines .container-fluid ul > .col ul > li,
+.story-grid-outlines .container-fluid ul > [class*=col-] .row > .col,
+.story-grid-outlines .container-fluid ul > [class*=col-] .row > [class*=col-],
+.story-grid-outlines .container-fluid ul > [class*=col-] .row > li,
+.story-grid-outlines .container-fluid ul > [class*=col-] ul > .col,
+.story-grid-outlines .container-fluid ul > [class*=col-] ul > [class*=col-],
+.story-grid-outlines .container-fluid ul > [class*=col-] ul > li,
+.story-grid-outlines .container-fluid ul > li .row > .col,
+.story-grid-outlines .container-fluid ul > li .row > [class*=col-],
+.story-grid-outlines .container-fluid ul > li .row > li,
+.story-grid-outlines .container-fluid ul > li ul > .col,
+.story-grid-outlines .container-fluid ul > li ul > [class*=col-],
+.story-grid-outlines .container-fluid ul > li ul > li {
+  counter-increment: story-column-nested-counter;
+}
+.story-grid-outlines .container .row > .col .row > .col::after,
+.story-grid-outlines .container .row > .col .row > [class*=col-]::after,
+.story-grid-outlines .container .row > .col .row > li::after,
+.story-grid-outlines .container .row > .col ul > .col::after,
+.story-grid-outlines .container .row > .col ul > [class*=col-]::after,
+.story-grid-outlines .container .row > .col ul > li::after,
+.story-grid-outlines .container .row > [class*=col-] .row > .col::after,
+.story-grid-outlines .container .row > [class*=col-] .row > [class*=col-]::after,
+.story-grid-outlines .container .row > [class*=col-] .row > li::after,
+.story-grid-outlines .container .row > [class*=col-] ul > .col::after,
+.story-grid-outlines .container .row > [class*=col-] ul > [class*=col-]::after,
+.story-grid-outlines .container .row > [class*=col-] ul > li::after,
+.story-grid-outlines .container .row > li .row > .col::after,
+.story-grid-outlines .container .row > li .row > [class*=col-]::after,
+.story-grid-outlines .container .row > li .row > li::after,
+.story-grid-outlines .container .row > li ul > .col::after,
+.story-grid-outlines .container .row > li ul > [class*=col-]::after,
+.story-grid-outlines .container .row > li ul > li::after,
+.story-grid-outlines .container ul > .col .row > .col::after,
+.story-grid-outlines .container ul > .col .row > [class*=col-]::after,
+.story-grid-outlines .container ul > .col .row > li::after,
+.story-grid-outlines .container ul > .col ul > .col::after,
+.story-grid-outlines .container ul > .col ul > [class*=col-]::after,
+.story-grid-outlines .container ul > .col ul > li::after,
+.story-grid-outlines .container ul > [class*=col-] .row > .col::after,
+.story-grid-outlines .container ul > [class*=col-] .row > [class*=col-]::after,
+.story-grid-outlines .container ul > [class*=col-] .row > li::after,
+.story-grid-outlines .container ul > [class*=col-] ul > .col::after,
+.story-grid-outlines .container ul > [class*=col-] ul > [class*=col-]::after,
+.story-grid-outlines .container ul > [class*=col-] ul > li::after,
+.story-grid-outlines .container ul > li .row > .col::after,
+.story-grid-outlines .container ul > li .row > [class*=col-]::after,
+.story-grid-outlines .container ul > li .row > li::after,
+.story-grid-outlines .container ul > li ul > .col::after,
+.story-grid-outlines .container ul > li ul > [class*=col-]::after,
+.story-grid-outlines .container ul > li ul > li::after,
+.story-grid-outlines .container-fluid .row > .col .row > .col::after,
+.story-grid-outlines .container-fluid .row > .col .row > [class*=col-]::after,
+.story-grid-outlines .container-fluid .row > .col .row > li::after,
+.story-grid-outlines .container-fluid .row > .col ul > .col::after,
+.story-grid-outlines .container-fluid .row > .col ul > [class*=col-]::after,
+.story-grid-outlines .container-fluid .row > .col ul > li::after,
+.story-grid-outlines .container-fluid .row > [class*=col-] .row > .col::after,
+.story-grid-outlines .container-fluid .row > [class*=col-] .row > [class*=col-]::after,
+.story-grid-outlines .container-fluid .row > [class*=col-] .row > li::after,
+.story-grid-outlines .container-fluid .row > [class*=col-] ul > .col::after,
+.story-grid-outlines .container-fluid .row > [class*=col-] ul > [class*=col-]::after,
+.story-grid-outlines .container-fluid .row > [class*=col-] ul > li::after,
+.story-grid-outlines .container-fluid .row > li .row > .col::after,
+.story-grid-outlines .container-fluid .row > li .row > [class*=col-]::after,
+.story-grid-outlines .container-fluid .row > li .row > li::after,
+.story-grid-outlines .container-fluid .row > li ul > .col::after,
+.story-grid-outlines .container-fluid .row > li ul > [class*=col-]::after,
+.story-grid-outlines .container-fluid .row > li ul > li::after,
+.story-grid-outlines .container-fluid ul > .col .row > .col::after,
+.story-grid-outlines .container-fluid ul > .col .row > [class*=col-]::after,
+.story-grid-outlines .container-fluid ul > .col .row > li::after,
+.story-grid-outlines .container-fluid ul > .col ul > .col::after,
+.story-grid-outlines .container-fluid ul > .col ul > [class*=col-]::after,
+.story-grid-outlines .container-fluid ul > .col ul > li::after,
+.story-grid-outlines .container-fluid ul > [class*=col-] .row > .col::after,
+.story-grid-outlines .container-fluid ul > [class*=col-] .row > [class*=col-]::after,
+.story-grid-outlines .container-fluid ul > [class*=col-] .row > li::after,
+.story-grid-outlines .container-fluid ul > [class*=col-] ul > .col::after,
+.story-grid-outlines .container-fluid ul > [class*=col-] ul > [class*=col-]::after,
+.story-grid-outlines .container-fluid ul > [class*=col-] ul > li::after,
+.story-grid-outlines .container-fluid ul > li .row > .col::after,
+.story-grid-outlines .container-fluid ul > li .row > [class*=col-]::after,
+.story-grid-outlines .container-fluid ul > li .row > li::after,
+.story-grid-outlines .container-fluid ul > li ul > .col::after,
+.story-grid-outlines .container-fluid ul > li ul > [class*=col-]::after,
+.story-grid-outlines .container-fluid ul > li ul > li::after {
+  content: "Nested " counter(story-column-nested-counter) " of " attr(data-story-total-columns);
+  left: auto;
+  font-size: 0.4em;
+}
+.story-grid-outlines .container .row > .col .story-placeholder,
+.story-grid-outlines .container .row > [class*=col-] .story-placeholder,
+.story-grid-outlines .container .row > li .story-placeholder,
+.story-grid-outlines .container ul > .col .story-placeholder,
+.story-grid-outlines .container ul > [class*=col-] .story-placeholder,
+.story-grid-outlines .container ul > li .story-placeholder,
+.story-grid-outlines .container-fluid .row > .col .story-placeholder,
+.story-grid-outlines .container-fluid .row > [class*=col-] .story-placeholder,
+.story-grid-outlines .container-fluid .row > li .story-placeholder,
+.story-grid-outlines .container-fluid ul > .col .story-placeholder,
+.story-grid-outlines .container-fluid ul > [class*=col-] .story-placeholder,
+.story-grid-outlines .container-fluid ul > li .story-placeholder {
+  position: relative;
+}
+.story-grid-outlines .container .row > .col .story-placeholder::before,
+.story-grid-outlines .container .row > [class*=col-] .story-placeholder::before,
+.story-grid-outlines .container .row > li .story-placeholder::before,
+.story-grid-outlines .container ul > .col .story-placeholder::before,
+.story-grid-outlines .container ul > [class*=col-] .story-placeholder::before,
+.story-grid-outlines .container ul > li .story-placeholder::before,
+.story-grid-outlines .container-fluid .row > .col .story-placeholder::before,
+.story-grid-outlines .container-fluid .row > [class*=col-] .story-placeholder::before,
+.story-grid-outlines .container-fluid .row > li .story-placeholder::before,
+.story-grid-outlines .container-fluid ul > .col .story-placeholder::before,
+.story-grid-outlines .container-fluid ul > [class*=col-] .story-placeholder::before,
+.story-grid-outlines .container-fluid ul > li .story-placeholder::before {
+  content: "100%";
+  color: grey;
+  position: absolute;
+  top: 2px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font-size: 0.6em;
+  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  white-space: nowrap;
+}
+.story-grid-outlines .container .row > .col .story-placeholder--hugged,
+.story-grid-outlines .container .row > [class*=col-] .story-placeholder--hugged,
+.story-grid-outlines .container .row > li .story-placeholder--hugged,
+.story-grid-outlines .container ul > .col .story-placeholder--hugged,
+.story-grid-outlines .container ul > [class*=col-] .story-placeholder--hugged,
+.story-grid-outlines .container ul > li .story-placeholder--hugged,
+.story-grid-outlines .container-fluid .row > .col .story-placeholder--hugged,
+.story-grid-outlines .container-fluid .row > [class*=col-] .story-placeholder--hugged,
+.story-grid-outlines .container-fluid .row > li .story-placeholder--hugged,
+.story-grid-outlines .container-fluid ul > .col .story-placeholder--hugged,
+.story-grid-outlines .container-fluid ul > [class*=col-] .story-placeholder--hugged,
+.story-grid-outlines .container-fluid ul > li .story-placeholder--hugged {
+  position: relative;
+}
+.story-grid-outlines .container .row > .col .story-placeholder--hugged::before,
+.story-grid-outlines .container .row > [class*=col-] .story-placeholder--hugged::before,
+.story-grid-outlines .container .row > li .story-placeholder--hugged::before,
+.story-grid-outlines .container ul > .col .story-placeholder--hugged::before,
+.story-grid-outlines .container ul > [class*=col-] .story-placeholder--hugged::before,
+.story-grid-outlines .container ul > li .story-placeholder--hugged::before,
+.story-grid-outlines .container-fluid .row > .col .story-placeholder--hugged::before,
+.story-grid-outlines .container-fluid .row > [class*=col-] .story-placeholder--hugged::before,
+.story-grid-outlines .container-fluid .row > li .story-placeholder--hugged::before,
+.story-grid-outlines .container-fluid ul > .col .story-placeholder--hugged::before,
+.story-grid-outlines .container-fluid ul > [class*=col-] .story-placeholder--hugged::before,
+.story-grid-outlines .container-fluid ul > li .story-placeholder--hugged::before {
+  content: "auto";
+  color: grey;
+  position: absolute;
+  top: 2px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font-size: 0.6em;
+  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  white-space: nowrap;
+}
+.story-grid-outlines .container .row > .col .story-placeholder--fixed,
+.story-grid-outlines .container .row > [class*=col-] .story-placeholder--fixed,
+.story-grid-outlines .container .row > li .story-placeholder--fixed,
+.story-grid-outlines .container ul > .col .story-placeholder--fixed,
+.story-grid-outlines .container ul > [class*=col-] .story-placeholder--fixed,
+.story-grid-outlines .container ul > li .story-placeholder--fixed,
+.story-grid-outlines .container-fluid .row > .col .story-placeholder--fixed,
+.story-grid-outlines .container-fluid .row > [class*=col-] .story-placeholder--fixed,
+.story-grid-outlines .container-fluid .row > li .story-placeholder--fixed,
+.story-grid-outlines .container-fluid ul > .col .story-placeholder--fixed,
+.story-grid-outlines .container-fluid ul > [class*=col-] .story-placeholder--fixed,
+.story-grid-outlines .container-fluid ul > li .story-placeholder--fixed {
+  position: relative;
+}
+.story-grid-outlines .container .row > .col .story-placeholder--fixed::before,
+.story-grid-outlines .container .row > [class*=col-] .story-placeholder--fixed::before,
+.story-grid-outlines .container .row > li .story-placeholder--fixed::before,
+.story-grid-outlines .container ul > .col .story-placeholder--fixed::before,
+.story-grid-outlines .container ul > [class*=col-] .story-placeholder--fixed::before,
+.story-grid-outlines .container ul > li .story-placeholder--fixed::before,
+.story-grid-outlines .container-fluid .row > .col .story-placeholder--fixed::before,
+.story-grid-outlines .container-fluid .row > [class*=col-] .story-placeholder--fixed::before,
+.story-grid-outlines .container-fluid .row > li .story-placeholder--fixed::before,
+.story-grid-outlines .container-fluid ul > .col .story-placeholder--fixed::before,
+.story-grid-outlines .container-fluid ul > [class*=col-] .story-placeholder--fixed::before,
+.story-grid-outlines .container-fluid ul > li .story-placeholder--fixed::before {
+  content: "184px";
+  color: grey;
+  position: absolute;
+  top: 2px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  font-size: 0.6em;
+  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  white-space: nowrap;
+}
+.story-grid-outlines .container .row > [class*=col-],
+.story-grid-outlines .container ul > [class*=col-],
+.story-grid-outlines .container-fluid .row > [class*=col-],
+.story-grid-outlines .container-fluid ul > [class*=col-] {
+  background-color: rgba(0, 128, 0, 0.1);
+  outline: 1px solid rgba(0, 128, 0, 0.5);
+}
+.story-grid-outlines .container .row > [class*=col-]::after,
+.story-grid-outlines .container ul > [class*=col-]::after,
+.story-grid-outlines .container-fluid .row > [class*=col-]::after,
+.story-grid-outlines .container-fluid ul > [class*=col-]::after {
+  color: green;
+}
+.story-grid-outlines .container .row > .col,
+.story-grid-outlines .container .row > li,
+.story-grid-outlines .container ul > .col,
+.story-grid-outlines .container ul > li,
+.story-grid-outlines .container-fluid .row > .col,
+.story-grid-outlines .container-fluid .row > li,
+.story-grid-outlines .container-fluid ul > .col,
+.story-grid-outlines .container-fluid ul > li {
+  background-color: rgba(0, 0, 255, 0.1);
+  outline: 1px solid rgba(0, 0, 255, 0.5);
+}
+.story-grid-outlines .container .row > .col::after,
+.story-grid-outlines .container .row > li::after,
+.story-grid-outlines .container ul > .col::after,
+.story-grid-outlines .container ul > li::after,
+.story-grid-outlines .container-fluid .row > .col::after,
+.story-grid-outlines .container-fluid .row > li::after,
+.story-grid-outlines .container-fluid ul > .col::after,
+.story-grid-outlines .container-fluid ul > li::after {
+  color: blue;
+}
+.story-grid-outlines .container-fluid {
+  background-color: rgba(128, 0, 128, 0.025);
+  box-shadow: 0 0 1px 1px purple inset;
+}
+.story-grid-outlines.grid-story-docs {
+  row-gap: 1em;
+}
+.story-grid-outlines.grid-story-docs > * {
+  margin-right: 1em;
+  white-space: nowrap;
+}
+.story-grid-outlines.grid-story-docs .grid-story-docs-color-container-contained::before {
+  content: "";
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  background-color: red;
+  margin-right: 0.5em;
+  vertical-align: top;
+}
+.story-grid-outlines.grid-story-docs .grid-story-docs-color-container-fluid::before {
+  content: "";
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  background-color: purple;
+  margin-right: 0.5em;
+  vertical-align: top;
+}
+.story-grid-outlines.grid-story-docs .grid-story-docs-color-row::before {
+  content: "";
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  background-color: orange;
+  margin-right: 0.5em;
+  vertical-align: top;
+}
+.story-grid-outlines.grid-story-docs .grid-story-docs-color-template-column::before {
+  content: "";
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  background-color: green;
+  margin-right: 0.5em;
+  vertical-align: top;
+}
+.story-grid-outlines.grid-story-docs .grid-story-docs-color-auto-column::before {
+  content: "";
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  background-color: blue;
+  margin-right: 0.5em;
+  vertical-align: top;
+}
+.story-grid-outlines.grid-story-docs .grid-story-docs-color-placeholder::before {
+  content: "";
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  background-color: grey;
+  margin-right: 0.5em;
+  vertical-align: top;
+}
+.story-grid-outlines .story-container__title,
+.story-grid-outlines .story-container__subtitle {
+  margin-top: 0;
+  margin-bottom: 0;
+  box-shadow: 0 0 1px 1px #25324d inset;
+}
+.story-grid-outlines .story-container__title {
+  padding-bottom: 1rem;
+  padding-top: 2rem;
+}
+.story-grid-outlines .story-container__subtitle {
+  padding-top: 1.5rem;
+  padding-bottom: 1rem;
+}
+
+.story-docs.story-docs--conditional:has(+ .story-grid-outlines) {
+  display: block;
+}
+
+.story-docs.story-docs--conditional:not(:has(+ .story-grid-outlines)) {
+  display: none;
+}
+
+.ct-layout .ct-layout .story-placeholder {
+  background-color: rgba(107, 83, 148, 0.3);
+  border: dashed 1px rgba(107, 83, 148, 0.7);
+  color: #241c32;
+}
+
+.story-layout-outlines {
+  overflow: auto;
+  background-color: rgba(0, 0, 255, 0.025);
+  box-shadow: 0 0 1px 1px blue inset;
+}
+.story-layout-outlines .ct-layout {
+  background-color: rgba(0, 128, 0, 0.025);
+  box-shadow: 0 0 1px 1px green inset;
+}
+.story-layout-outlines .ct-layout__main,
+.story-layout-outlines .ct-layout__sidebar_top_left,
+.story-layout-outlines .ct-layout__sidebar_top_right,
+.story-layout-outlines .ct-layout__sidebar_bottom_left,
+.story-layout-outlines .ct-layout__sidebar_bottom_right {
+  background-color: rgba(255, 165, 0, 0.025);
+  box-shadow: 0 0 1px 1px orange inset;
+}
+.story-layout-outlines .container,
+.story-layout-outlines .container-fluid {
+  background-color: rgba(255, 0, 0, 0.025);
+  box-shadow: 0 0 1px 1px red inset;
+}
+.story-layout-outlines .container-fluid {
+  background-color: rgba(128, 0, 128, 0.025);
+  box-shadow: 0 0 1px 1px purple inset;
+}
+
+.ct-menu__item--active-trail > .ct-menu__item__link::after {
+  content: " (A)";
+}
+
+.story-container__page-content.story-scrollspy {
+  height: 2000px;
+}
+.story-container__page-content.story-scrollspy::before {
+  box-shadow: 0 0 0.0625rem 0.0625rem #f00 inset;
+  height: 400px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: block;
+  content: "";
+}
+.story-container__page-content.story-scrollspy::after {
+  box-shadow: 0 0 0.0625rem 0.0625rem #00f inset;
+  height: 600px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: block;
+  content: "";
+}
+
+.story-scrollspy-target1 {
+  position: fixed;
+  bottom: 6rem;
+  right: 6rem;
+}
+
+.story-scrollspy-target2 {
+  position: fixed;
+  bottom: 10px;
+  right: 6rem;
+}
+
+.story-scrollspy-target1.ct-scrollspy-scrolled {
+  border: solid 0.0625rem red;
+}
+
+.story-scrollspy-target2.ct-scrollspy-scrolled {
+  border: solid 0.0625rem blue;
+}
+
+.story-spacing-wrapper div {
+  position: relative;
+  width: 100%;
+  min-height: 0.5rem;
+}
+.story-spacing-wrapper .story-spacing--1 {
+  box-sizing: border-box;
+  padding: 0.5rem 0 0 0.5rem;
+  background-color: #d8f6ff;
+}
+.story-spacing-wrapper .story-spacing--1::before {
+  content: "spacing 1";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+}
+.story-spacing-wrapper .story-spacing--2 {
+  box-sizing: border-box;
+  padding: 1rem 0 0 1rem;
+  background-color: #b0edff;
+}
+.story-spacing-wrapper .story-spacing--2::before {
+  content: "spacing 2";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+}
+.story-spacing-wrapper .story-spacing--3 {
+  box-sizing: border-box;
+  padding: 1.5rem 0 0 1.5rem;
+  background-color: #d8f6ff;
+}
+.story-spacing-wrapper .story-spacing--3::before {
+  content: "spacing 3";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+}
+.story-spacing-wrapper .story-spacing--4 {
+  box-sizing: border-box;
+  padding: 2rem 0 0 2rem;
+  background-color: #b0edff;
+}
+.story-spacing-wrapper .story-spacing--4::before {
+  content: "spacing 4";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+}
+.story-spacing-wrapper .story-spacing--5 {
+  box-sizing: border-box;
+  padding: 2.5rem 0 0 2.5rem;
+  background-color: #d8f6ff;
+}
+.story-spacing-wrapper .story-spacing--5::before {
+  content: "spacing 5";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+}
+.story-spacing-wrapper .story-spacing--6 {
+  box-sizing: border-box;
+  padding: 3rem 0 0 3rem;
+  background-color: #b0edff;
+}
+.story-spacing-wrapper .story-spacing--6::before {
+  content: "spacing 6";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+}
+.story-spacing-wrapper .story-spacing--7 {
+  box-sizing: border-box;
+  padding: 3.5rem 0 0 3.5rem;
+  background-color: #d8f6ff;
+}
+.story-spacing-wrapper .story-spacing--7::before {
+  content: "spacing 7";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+}
+.story-spacing-wrapper .story-spacing--8 {
+  box-sizing: border-box;
+  padding: 4rem 0 0 4rem;
+  background-color: #b0edff;
+}
+.story-spacing-wrapper .story-spacing--8::before {
+  content: "spacing 8";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+}
+.story-spacing-wrapper .story-spacing--9 {
+  box-sizing: border-box;
+  padding: 4.5rem 0 0 4.5rem;
+  background-color: #d8f6ff;
+}
+.story-spacing-wrapper .story-spacing--9::before {
+  content: "spacing 9";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+}
+.story-spacing-wrapper .story-spacing--10 {
+  box-sizing: border-box;
+  padding: 5rem 0 0 5rem;
+  background-color: #b0edff;
+}
+.story-spacing-wrapper .story-spacing--10::before {
+  content: "spacing 10";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+}
+.story-spacing-wrapper .story-spacing--11 {
+  box-sizing: border-box;
+  padding: 5.5rem 0 0 5.5rem;
+  background-color: #d8f6ff;
+}
+.story-spacing-wrapper .story-spacing--11::before {
+  content: "spacing 11";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+}
+
+.story-vertical-spacing-wrapper .story-vertical-spacing-container {
+  box-shadow: 0 0 0.0625rem 0.0625rem red inset;
+  position: relative;
+  overflow: hidden;
+}
+.story-vertical-spacing-wrapper .story-vertical-spacing-container::before {
+  border: 0.0625rem solid red;
+  color: red;
+  content: "Component container";
+  padding: 2px;
+  position: absolute;
+  z-index: 10000;
+  left: 0;
+}
+.story-vertical-spacing-wrapper .story-vertical-spacing {
+  box-shadow: 0 0 0.0625rem 0.0625rem blue inset;
+  position: relative;
+}
+.story-vertical-spacing-wrapper .story-vertical-spacing::before {
+  border: 0.0625rem solid blue;
+  color: blue;
+  content: "Component";
+  padding: 2px;
+  position: absolute;
+  z-index: 10000;
+  right: 0;
+}
+
+.story-welcome {
+  height: 100vh;
+  width: 100%;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #003f56;
+}
+
+.story-welcome__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.story-welcome__inner .ct-logo {
+  margin-bottom: 2em;
+}
+.story-welcome__inner .ct-logo .ct-logo__image {
+  max-height: 5em;
+}
+.story-welcome__inner .ct-paragraph {
+  margin-top: 2em;
+  max-width: 50em;
+}
+
+.story-container__page-content.story-ct-back-to-top {
+  height: 2000px;
+}
+.story-container__page-content.story-ct-back-to-top::before {
+  box-shadow: 0 0 0.0625rem 0.0625rem #f00 inset;
+  height: 400px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: block;
+  content: "";
+}
+
+@media (min-width: 768px) {
+  .story-container__page-content.story-ct-mobile-navigation .ct-mobile-navigation {
+    display: block;
+  }
+}
+@media (min-width: 768px) {
+  .story-container__page-content.story-ct-mobile-navigation .ct-mobile-navigation-trigger {
+    display: inline;
+  }
+}