@import "font.custom-props.css";
/* @import "spacing.custom-props.css"; */
@import "shadow.custom-props.css";
@import "sds-grid.css";
@import "common.css";

/**
 * This CSS is full of lazy hacks, didn't expect this project to become a thing.
 */

:root {
  --button-spacing-inline-value: var(--sds-g-spacing-6);
  --button-spacing-block-value: var(--sds-g-spacing-1);
  --container-spacing-inline-value: var(--sds-g-spacing-4);
  --container-spacing-block-value: var(--sds-g-spacing-4);

  --sds-g-sizing-border-1: 1px;

  --sds-g-color-brand-base-contrast-95: var(--sds-g-color-neutral-base-10);
  --sds-g-color-brand-base-contrast-40: var(--sds-g-color-neutral-base-100);

  /**
   * Rework font scaling
   * We need the global scaling font hooks to be relational, not absolute values.
   */
  --increment-font-scale: 1.125;
  --sds-g-font-scale-neg-1: calc(
    var(--sds-g-font-size-base) / var(--increment-font-scale)
  );
  --sds-g-font-scale-1: calc(
    var(--sds-g-font-size-base) * var(--increment-font-scale)
  );
  --sds-g-font-scale-2: calc(
    var(--sds-g-font-scale-1) * var(--increment-font-scale)
  );
  --sds-g-font-scale-3: calc(
    var(--sds-g-font-scale-2) * var(--increment-font-scale)
  );
  --sds-g-font-scale-4: calc(
    var(--sds-g-font-scale-3) * var(--increment-font-scale)
  );
  --sds-g-font-scale-5: calc(
    var(--sds-g-font-scale-4) * var(--increment-font-scale)
  );
  --sds-g-font-scale-6: calc(
    var(--sds-g-font-scale-5) * var(--increment-font-scale)
  );

  /**
   * Rework space scaling
   * We need the global scaling spacing hooks to be relational, not absolute values.
   */
  --increment-spacing: 1.15;
  --sds-g-spacing-base: 0.5rem;
  --sds-g-spacing-1: calc(var(--sds-g-spacing-base) * var(--increment-spacing));
  --sds-g-spacing-2: calc(var(--sds-g-spacing-1) * var(--increment-spacing));
  --sds-g-spacing-3: calc(var(--sds-g-spacing-2) * var(--increment-spacing));
  --sds-g-spacing-4: calc(var(--sds-g-spacing-3) * var(--increment-spacing));
  --sds-g-spacing-5: calc(var(--sds-g-spacing-4) * var(--increment-spacing));
  --sds-g-spacing-6: calc(var(--sds-g-spacing-5) * var(--increment-spacing));
  --sds-g-spacing-7: calc(var(--sds-g-spacing-6) * var(--increment-spacing));
  --sds-g-spacing-8: calc(var(--sds-g-spacing-7) * var(--increment-spacing));

  /**
   * Component level changes
   */
  --sds-c-icon-sizing: 1em;
  --sds-c-icon-color-foreground: var(--sds-g-color-neutral-base-40);
  --slds-c-button-neutral-shadow-focus: 0 0 3px var(--sds-g-color-brand-base-50);
  --sds-c-tabs-item-spacing-inline: var(--sds-g-spacing-3);
  --slds-c-tabs-panel-spacing-block: var(--sds-g-spacing-3);
}

.decorative-icons {
  --sds-c-icon-sizing: 1em;
  --sds-c-icon-spacing: 0.5em;
  --sds-c-icon-color-background: var(--sds-g-color-brand-base-60);
  --sds-c-icon-radius-border: 100%;
}

body {
  background: var(--sds-g-color-brand-base-30);
  color: var(--sds-g-color-neutral-base-10);
  margin: 0;
  font-family: var(--sds-g-font-family);
  font-size: var(--sds-g-font-size-base);
  line-height: 1.68;
}

body:before {
  position: fixed;
  content: "";
  background: url("/assets/images/banner-brand-default.png");
  height: 20rem;
  width: 100%;
  opacity: 0.2;
}

body:after {
  position: fixed;
  content: "";
  background-image: linear-gradient(
    0deg,
    var(--sds-g-color-neutral-base-95),
    0%,
    var(--sds-g-color-neutral-base-95) 70%,
    transparent 100%
  );
  height: 100vh;
  width: 100%;
  top: 0;
}

a {
  color: var(--sds-g-color-brand-base-40);
}

h2 {
  font-size: var(--sds-g-font-scale-8);
  font-weight: var(--sds-g-font-weight-bold);
  margin-bottom: var(--sds-g-spacing-2);
}

[controls] h2 {
  font-size: 1.125em;
  margin-bottom: 1.5em;
}

[controls] h2 ~ h2 {
  margin-top: 32px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.18;
}

img {
  box-shadow: var(--sds-g-shadow-3);
  display: block;
  width: 100%;
  border-radius: var(--sds-g-radius-border-3);
}

p {
  font-size: var(--sds-g-font-size-base);
}

p:not(:last-child) {
  margin-bottom: var(--sds-g-spacing-3);
}

[target] {
  min-height: 100vh;
  position: relative;
}

[targetcontainer] {
  padding: 2rem;
}

[controls] {
  /* padding: var(--sds-g-spacing-6); */
  padding: 2.5rem 4rem;
}

[target],
[controls],
#control-toggle {
  /* IT'S SO JANKY */
  transition-property: flex, min-width, right;
  transition-duration: 0.65s;
  transition-timing-function: ease-in-out;
  z-index: 2;
}

[controls] {
  background-color: var(--sds-g-color-neutral-base-10);
  color: var(--sds-g-color-neutral-base-100);
  font-size: 16px;
  padding: 2.5em 4em;
  position: fixed;
  bottom: 0;
  top: 0;
  right: 0;
  overflow-y: auto;
  width: calc((1 / 3) * 100%);
}

[controls] p {
  margin-bottom: 1em;
  font-size: 1em;
}

[controls] p span {
  display: block;
  color: #888;
  font-size: 0.75em;
}

[controls] h2 ~ h2 {
  margin-top: 2em;
}

[controls] .value {
  display: inline-block;
  font-size: 0.875em;
}

[controls]::-webkit-scrollbar {
  width: 0;
  height: 0;
}

[ml="3"] {
  margin-left: var(--sds-g-spacing-3);
}

[mb="0"] {
  margin-bottom: 0;
}

[mb="base"] {
  margin-bottom: var(--sds-g-spacing-base);
}

[mb="1"] {
  margin-bottom: var(--sds-g-spacing-1);
}

[mb="2"] {
  margin-bottom: var(--sds-g-spacing-2);
}

[mb="3"] {
  margin-bottom: var(--sds-g-spacing-3);
}

[mb="4"] {
  margin-bottom: var(--sds-g-spacing-4);
}

[mb="5"] {
  margin-bottom: var(--sds-g-spacing-5);
}

[mb="6"] {
  margin-bottom: var(--sds-g-spacing-6);
}

[mt="base"] {
  margin-top: var(--sds-g-spacing-base);
}

[mt="2"] {
  margin-top: var(--sds-g-spacing-2);
}

[mt="3"] {
  margin-top: var(--sds-g-spacing-3);
}

[mt="4"] {
  margin-top: var(--sds-g-spacing-4);
}

[mt="5"] {
  margin-top: var(--sds-g-spacing-5);
}

[mt="6"] {
  margin-top: var(--sds-g-spacing-6);
}

[mt="7"] {
  margin-top: var(--sds-g-spacing-7);
}

[mt="8"] {
  margin-top: var(--sds-g-spacing-8);
}

[mr="5"] {
  margin-right: var(--sds-g-spacing-5);
}

[mv="4"] {
  margin-top: var(--sds-g-spacing-4);
  margin-bottom: var(--sds-g-spacing-4);
}

[textalign="center"] {
  text-align: center;
}

[textalign="right"] {
  text-align: right;
}

input[type="range"] {
  display: block;
  width: 100%;
  appearance: none;
  background: transparent;
  margin-bottom: 0.75em;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  background-color: var(--sds-g-color-neutral-base-60);
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  background-color: var(--sds-g-color-neutral-base-20);
}

input[type="range"]::-moz-range-progress {
  background-color: var(--sds-g-color-neutral-base-60);
  height: 1px;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  height: 0.65em;
  width: 0.65em;
  background: #fff;
  border-radius: 100%;
  margin-top: -0.31em;
}

input[type="range"]::-moz-range-thumb {
  appearance: none;
  height: 0.65em;
  width: 0.65em;
  background: #fff;
  border-radius: 100%;
  margin-top: -0.31em;
  border: none;
  cursor: pointer;
}

/* Grid Hacks */

[gap="large"] {
  margin-inline: calc((var(--sds-g-spacing-5) / 2) * -1);
}

[gap="large"] [size] {
  padding-inline: calc((var(--sds-g-spacing-5) / 2));
}

[gap="x-small"] {
  margin-inline: calc((var(--sds-g-spacing-2) / 2) * -1);
}

[gap="x-small"] [size] {
  padding-inline: calc((var(--sds-g-spacing-2) / 2));
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
}

/* Controls */

.control {
  background: rgba(255, 255, 255, 0.032);
  margin-bottom: 1.5em;
  padding: 1.25em;
  border-radius: 12px;
}

.control-button {
  display: block;
  background: none;
  border: 1px solid #fff;
  border-radius: 24px;
  padding: 0.75em 0;
  width: 100%;
}

.control-button:hover {
  background: rgba(255, 255, 255, 0.06);
}

#control-toggle {
  position: fixed;
  background-color: var(--sds-g-color-neutral-base-10);
  color: var(--sds-g-color-neutral-base-100);
  top: 0;
  right: 0;
  line-height: 1;
  padding: 0.62em 0.72em;
  border-bottom-left-radius: 12px;
  cursor: pointer;
}

/* Icon hacks until I get the component working */

sds-icon[variant="decorative"] {
  --sds-c-icon-sizing: 1em;
  --sds-c-icon-spacing: 0.5em;
  --sds-c-icon-color-background: var(--sds-g-color-brand-base-95);
  --sds-c-icon-color-foreground: var(--sds-g-color-brand-base-contrast-95);
  --sds-c-icon-radius-border: 100%;
}

sds-icon[variant="halo"] {
  --sds-c-icon-sizing: 2em;
  --sds-c-icon-spacing: 1em;
  --sds-c-icon-color-background: var(--sds-g-color-brand-base-95);
  --sds-c-icon-color-foreground: var(--sds-g-color-brand-base-contrast-95);
  --sds-c-icon-radius-border: 100%;
}

sds-icon[size="x-large"] {
  --sds-c-icon-sizing: 3rem;
}

sds-icon[size="large"] {
  --sds-c-icon-sizing: 2.5rem;
}

sds-icon[size="medium"] {
  --sds-c-icon-sizing: 2rem;
}

sds-icon[size="small"] {
  --sds-c-icon-sizing: 1.5rem;
}

sds-icon[size="base"] {
  --sds-c-icon-sizing: 1em;
}

/* Type cmp hack */

[type~="subheader"] {
  color: var(--subheader-text-color, var(--sds-g-color-neutral-base-60));
  font-size: var(--sds-g-font-scale-neg-1);
}

[type~="small"] {
  font-size: var(--sds-g-font-scale-neg-1);
}

[type~="large"] {
  font-size: var(--sds-g-font-scale-5);
  font-weight: var(--sds-g-font-weight-bold);
}

[type~="x-large"] {
  font-size: var(--sds-g-font-scale-6);
  font-weight: var(--sds-g-font-weight-bold);
}

[type~="impact"] {
  font-size: var(--sds-g-font-scale-9);
  font-weight: var(--sds-g-font-weight-bold);
  line-height: 1.08;
}

.callout {
  border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
  font-size: 0.84em;
  padding: 0 0 2em;
  margin-bottom: 2em;
  color: var(--sds-g-color-neutral-base-60);
}

.callout a {
  color: #fff;
}

.callout a:hover {
  text-decoration: underline;
}

/**
 * SDS Fixes
 */

/* Prevent grid from causing side effects */
sds-icon {
  padding: 0 !important;
}

/**
 * Product Subsystem Fixes
 */

:root {
  --slds-c-card-color-background: var(--sds-g-color-neutral-base-100);
  --slds-c-card-body-spacing-inline: var(--sds-g-spacing-3);

  --slds-c-button-neutral-font-lineheight: 1;
  --slds-c-button-neutral-spacing-block: var(
    --sds-s-button-spacing-block,
    var(--sds-g-spacing-1)
  );
  --slds-c-button-neutral-spacing-inline: var(
    --sds-s-button-spacing-inline,
    var(--sds-g-spacing-6)
  );

  --slds-c-tabs-item-color-border-hover: var(--sds-g-color-brand-base-50);
  --slds-c-tabs-item-color-border-active: var(--sds-g-color-brand-base-50);
}

/* Let the header resize to its content */
.slds-global-header {
  height: auto;
  padding: var(--sds-g-spacing-2) 0;
}

/* Better overlay positioning than fixed */
.slds-global-header_container {
  position: sticky;
  box-shadow: var(--sds-g-shadow-1);
}

.slds-global-header__item {
  padding: 0 var(--sds-g-spacing-4);
}

.slds-global-actions__item.add {
  --sds-c-icon-color-background: var(--sds-g-color-neutral-base-50);
  --sds-c-icon-color-foreground: var(--sds-g-color-neutral-base-100);
  --sds-c-icon-radius-border: var(--sds-g-radius-border-2);
}

.slds-global-header__logo {
  width: 5rem;
}

.slds-context-bar {
  border-color: var(--sds-g-color-brand-base-50);
  padding: 0 0 0 var(--sds-g-spacing-5);
}

.slds-context-bar__item.slds-is-active:before {
  background: var(--sds-g-color-brand-base-50);
}

.slds-context-bar__item.slds-is-active,
.slds-context-bar__item:not(.slds-no-hover):hover {
  background: var(--sds-g-color-brand-base-95);
  color: var(--sds-g-color-brand-base-contrast-95);
  animation: none;
}

.slds-context-bar__label-action {
  padding: 0 var(--sds-g-spacing-3);
}

.slds-context-bar__icon-action {
  padding: 0 var(--sds-g-spacing-2);
}

.slds-page-header {
  box-shadow: var(--sds-g-shadow-1);
  border-radius: var(--sds-g-radius-border-2);
  overflow: hidden;
  padding: var(--sds-s-container-spacing-block, var(--sds-g-spacing-4));
}

.slds-page-header__title {
  font-size: var(--sds-g-font-scale-1);
}

.slds-page-header__col-title sds-icon {
  --sds-c-icon-spacing: 0.25rem;
}

.slds-page-header .slds-media {
  align-items: center;
}

.slds-page-header .slds-media__figure {
  line-height: 1;
}

.slds-page-header__col-details {
  padding-left: var(--sds-s-container-spacing-block, var(--sds-g-spacing-4));
  padding-right: var(--sds-s-container-spacing-block, var(--sds-g-spacing-4));
}

.slds-page-header__row_gutters {
  margin-left: calc(
    var(--sds-s-container-spacing-block, var(--sds-g-spacing-4)) * -1
  );
  margin-right: calc(
    var(--sds-s-container-spacing-block, var(--sds-g-spacing-4)) * -1
  );
}

.slds-page-header__detail-row {
  margin: var(--sds-g-spacing-3)
    calc(var(--sds-s-container-spacing-block, var(--sds-g-spacing-4)) * -1)
    calc(var(--sds-s-container-spacing-block, var(--sds-g-spacing-4)) * -1)
    calc(var(--sds-s-container-spacing-block, var(--sds-g-spacing-4)) * -1);
  padding: var(--sds-s-container-spacing-block, var(--sds-g-spacing-4));
}

.slds-path .slds-grid {
  align-items: center;
}

.slds-path__nav .slds-is-active,
.slds-path__nav .slds-is-active:first-child:after,
.slds-path__nav .slds-is-active:first-child:before,
.slds-path__nav .slds-is-current:first-child:hover,
.slds-path__nav .slds-is-current:first-child:hover:after,
.slds-path__nav .slds-is-current:first-child:hover:before {
  background: var(--sds-g-color-brand-base-50);
}

.slds-path__nav .slds-is-current:first-child:hover {
  border-color: var(--sds-g-color-brand-base-50);
}

.slds-path__nav .slds-is-active .slds-path__link {
  color: var(--sds-g-color-brand-base-contrast-40);
}

.slds-timeline__icon {
  --sds-c-icon-spacing: calc(var(--sds-g-spacing-1) / 2);
  --sds-c-icon-color-foreground: #fff;
}

.slds-timeline__item_expandable .slds-media__figure .slds-button_icon {
  margin-right: 0.1rem;
}

.slds-timeline__item_expandable {
  padding-bottom: var(--sds-g-spacing-4);
}

.slds-timeline__item_expandable .slds-media__body {
  padding-inline: var(--sds-g-spacing-1);
}

.slds-icon-standard-opportunity {
  background: var(--sds-g-color-brand-base-50);
  --sds-c-icon-color-foreground: var(--sds-g-color-brand-base-contrast-40);
}

.slds-button {
  --slds-c-button-shadow-focus: 0 0 3px var(--sds-g-color-brand-base-50);
}

slds-button[variant~="brand"] {
  --sds-c-icon-color-foreground: var(--sds-g-color-brand-base-contrast-40);
  --slds-c-button-brand-text-color: var(--sds-g-color-brand-base-contrast-40);
}

slds-button::part(button) {
  --sds-c-icon-sizing: 11px;
  font-size: inherit;
}

slds-card {
  --slds-c-card-body-spacing-block-start: var(
    --sds-s-container-spacing-block,
    var(--sds-g-spacing-3)
  );
  --slds-c-card-body-spacing-block-end: var(
    --sds-s-container-spacing-block,
    var(--sds-g-spacing-3)
  );
  --slds-c-card-body-spacing-inline: var(
    --sds-s-container-spacing-inline,
    var(--sds-g-spacing-3)
  );
  --slds-c-card-header-spacing-block-start: var(
    --sds-s-container-spacing-block,
    var(--sds-g-spacing-3)
  );
  --slds-c-card-header-spacing-inline: var(
    --sds-s-container-spacing-inline,
    var(--sds-g-spacing-3)
  );
  font-size: inherit;
}

/**
 * Custom Components
 */
.foo-metric {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  border-radius: var(--sds-g-radius-border-2);
}

.foo-number {
  font-size: var(--sds-g-font-scale-6);
  font-weight: var(--sds-g-font-weight-bold);
}

.foo-meta {
  display: inline-block;
  font-size: var(--sds-g-font-scale-1);
  background: var(--sds-g-color-brand-base-95);
  color: var(--sds-g-color-brand-base-contrast-95);
  padding: calc(var(--sds-g-spacing-base) / 4) var(--sds-g-spacing-base);
  border-radius: var(--sds-g-radius-border-2);
}

.foo-subtitle {
  color: var(--sds-g-color-neutral-base-60);
  --sds-c-icon-color-foreground: var(--sds-g-color-neutral-base-60);
  font-size: var(--sds-g-font-scale-neg-1);
}

[variant="c-level"] {
  text-align: center;
  --slds-c-card-color-background: var(--sds-g-color-brand-base-50);
  --slds-c-card-text-color: var(--sds-g-color-brand-base-contrast-40);
}

[variant="c-level"] .foo-metric {
  grid-template-columns: 1fr;
  justify-items: center;
}

[variant="c-level"] .foo-number {
  font-size: calc(var(--sds-g-font-scale-6) * 1.4);
  line-height: 1.1;
}

[variant="c-level"] .foo-meta {
  background: none;
  padding: 0;
  margin-bottom: var(--sds-g-spacing-base);
  color: var(
    --slds-c-card-text-color,
    var(--sds-g-color-brand-base-contrast-40)
  );
}

[variant="c-level"] .foo-subtitle {
  color: var(
    --slds-c-card-text-color,
    var(--sds-g-color-brand-base-contrast-40)
  );
}

/**
 * Graph
 */

.foo-bar-graph {
  display: grid;
  grid-template-columns: 5em repeat(5, 1fr);
  grid-template-rows: 1fr 2ex;
  gap: calc(var(--sds-g-spacing-2));
  row-gap: var(--sds-g-spacing-2);
  min-height: 440px;
  padding: var(--sds-g-spacing-6);
  overflow: hidden;
  position: relative;
}

.foo-bar-viz {
  position: relative;
}

.foo-bar-3d {
  width: 32%;
  bottom: 6%;
  left: 50%;
  position: absolute;
  transform-origin: bottom left;
  box-sizing: content-box;
}

.foo-bar-3d.left {
  background: var(--sds-g-color-brand-base-60);
  transform: skew(0, 20deg);
  margin-left: -32%;
  border-right: 1px solid var(--sds-g-color-brand-base-60);
  z-index: 1;
}

.foo-bar-3d.right {
  background: var(--sds-g-color-brand-base-50);
  transform: skew(0, -20deg);
  z-index: 1;
  transform-origin: bottom right;
}

.foo-bar-3d.topleft {
  background: var(--sds-g-color-brand-base-65);
  border-right: 1px solid var(--sds-g-color-brand-base-65);
  margin-left: -32%;
  transform: skew(0, -20deg);
}

.foo-bar-3d.topright {
  background: var(--sds-g-color-brand-base-65);
  border-left: 1px solid var(--sds-g-color-brand-base-65);
  transform: skew(0, 20deg);
  transform-origin: bottom right;
}

.foo-bar-viz:hover .foo-bar-3d.left {
  background: var(--sds-g-color-brand-base-50);
  border-color: var(--sds-g-color-brand-base-50);
}

.foo-bar-viz:hover .foo-bar-3d.right {
  background: var(--sds-g-color-brand-base-40);
  border-color: var(--sds-g-color-brand-base-40);
}

.foo-bar-viz:hover .foo-bar-3d.topleft,
.foo-bar-viz:hover .foo-bar-3d.topright {
  background: var(--sds-g-color-brand-base-60);
  border-color: var(--sds-g-color-brand-base-60);
}

.foo-bar-label-x {
  text-align: center;
}

.foo-bar-label-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.foo-bar-label-y-unit:after {
  content: "";
  width: 90%;
  border-top: 1px dashed var(--sds-g-color-neutral-base-90);
  position: absolute;
  transform: translate(1em, 0.7em);
}

.height-80 {
  height: 80%;
}

.height-66 {
  height: 66%;
}

.height-60 {
  height: 60%;
}

.height-40 {
  height: 40%;
}

.height-30 {
  height: 30%;
}

.foo-bar-value {
  text-align: center;
  background: var(--sds-g-color-brand-base-95);
  color: var(--sds-g-color-brand-base-contrast-95);
  position: absolute;
  padding: 0 var(--sds-g-spacing-1);
  border-radius: var(--sds-g-radius-border-2);
  left: 50%;
  transform: translateX(-50%);
  height: auto;
}

.foo-bar-value.height-80 {
  bottom: 92%;
}

.foo-bar-value.height-66 {
  bottom: 78%;
}

.foo-bar-value.height-60 {
  bottom: 72%;
}

.foo-bar-value.height-40 {
  bottom: 52%;
}

.foo-bar-value.height-30 {
  bottom: 42%;
}

[variant~="omtm"] {
  --slds-c-card-color-background: var(--sds-g-color-brand-base-9);
}

.slds-progress-ring {
  width: 4rem;
  height: 4rem;
}

.slds-progress-bar__value {
  background: var(--sds-g-color-brand-base-60);
}

[grid~="align-between"] {
  justify-content: space-between;
}

[grid~="align-center"] {
  align-items: center;
}

.component-level code,
.component-level input {
  font-size: 0.72rem;
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
    "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
    "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
    monospace;
}

.component-level p {
  margin-bottom: 0.5em;
}

.control input[type="text"] {
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  padding: 6px 12px;
  width: 100%;
  border-radius: 12px;
}

.control input[type="text"]:hover,
.control input[type="text"]:focus,
.control input[type="text"]:active {
  outline: none;
  border-color: rgba(255, 255, 255, 0.2);
}

code ~ code {
  display: block;
  margin-block-start: 1.5em;
}