:root,
.theme-light {
  --color-grey-00: oklch(100% 0.01 269);
  --color-grey-20: oklch(99% 0.01 269);
  --color-grey-35: oklch(97% 0.01 269);
  --color-grey-50: oklch(96% 0.01 269);
  --color-grey-100: oklch(93% 0.01 269);
  --color-grey-200: oklch(90% 0.01 269);
  --color-grey-300: oklch(72% 0.01 269);
  --color-grey-400: oklch(59% 0.01 269);
  --color-grey-500: oklch(50% 0.01 269);
  --color-grey-600: oklch(35% 0.01 269);
  --color-grey-700: oklch(27% 0.01 269);
  --color-grey-800: oklch(20% 0.01 269);
  --color-grey-900: oklch(16% 0.01 269);

  --color-info-50: oklch(96% 0.02 269);
  --color-info-100: oklch(93% 0.02 269);
  --color-info-200: oklch(90% 0.1 269);
  --color-info-400: oklch(59% 0.18 269);
  --color-info-500: oklch(50% 0.18 269);
  --color-info-600: oklch(47% 0.18 269);
  --color-info-700: oklch(37% 0.18 269);

  --color-success-50: oklch(96% 0.02 149);
  --color-success-100: oklch(93% 0.02 149);
  --color-success-200: oklch(90% 0.1 149);
  --color-success-400: oklch(59% 0.18 149);
  --color-success-500: oklch(50% 0.18 149);
  --color-success-600: oklch(47% 0.18 149);
  --color-success-700: oklch(37% 0.18 149);

  --color-warning-50: oklch(96% 0.02 89);
  --color-warning-100: oklch(93% 0.02 89);
  --color-warning-200: oklch(90% 0.1 89);
  --color-warning-400: oklch(59% 0.18 89);
  --color-warning-500: oklch(50% 0.18 89);
  --color-warning-600: oklch(47% 0.18 89);
  --color-warning-700: oklch(37% 0.18 89);

  --color-danger-50: oklch(96% 0.02 29);
  --color-danger-100: oklch(93% 0.02 29);
  --color-danger-200: oklch(90% 0.1 29);
  --color-danger-400: oklch(61% 0.18 29);
  --color-danger-500: oklch(50% 0.18 29);
  --color-danger-600: oklch(47% 0.18 29);
  --color-danger-700: oklch(37% 0.18 29);

  --color-cyan-500: oklch(50% 0.18 189);
  --color-orange-500: oklch(50% 0.18 59);
  --color-fuschia-500: oklch(50% 0.18 329);
  --color-purple-500: oklch(50% 0.18 299);

  --color-shadow: oklch(20% 0.006 269 / 0.01);
  --color-light: oklch(100% 0.002 269 / .1);

  --color-selection: rgba(226, 232, 246, 0.99);
}

.theme-dark {
  --color-grey-00: oklch(17% 0.01 269);
  --color-grey-20: oklch(19% 0.01 269);
  --color-grey-35: oklch(21% 0.01 269);
  --color-grey-50: oklch(22% 0.01 269);
  --color-grey-100: oklch(28% 0.01 269);
  --color-grey-200: oklch(41% 0.01 269);
  --color-grey-300: oklch(67% 0.01 269);
  --color-grey-400: oklch(72% 0.01 269);
  --color-grey-500: oklch(84% 0.01 269);
  --color-grey-600: oklch(87% 0.01 269);
  --color-grey-700: oklch(92% 0.01 269);
  --color-grey-800: oklch(96% 0.01 269);
  --color-grey-900: oklch(98% 0.01 269);

  --color-info-50: oklch(23% 0.05 269);
  --color-info-100: oklch(28% 0.05 269);
  --color-info-200: oklch(41% 0.09 269);
  --color-info-400: oklch(76% 0.09 269);
  --color-info-500: oklch(84% 0.09 260);
  --color-info-600: oklch(87% 0.07 269);
  --color-info-700: oklch(92% 0.04 269);

  --color-success-50: oklch(23% 0.05 149);
  --color-success-100: oklch(28% 0.05 149);
  --color-success-200: oklch(41% 0.09 149);
  --color-success-400: oklch(72% 0.09 149);
  --color-success-500: oklch(84% 0.09 149);
  --color-success-600: oklch(87% 0.07 149);
  --color-success-700: oklch(92% 0.04 149);

  --color-warning-50: oklch(23% 0.05 89);
  --color-warning-100: oklch(28% 0.05 89);
  --color-warning-200: oklch(41% 0.09 89);
  --color-warning-400: oklch(72% 0.09 89);
  --color-warning-500: oklch(84% 0.09 89);
  --color-warning-600: oklch(87% 0.07 89);
  --color-warning-700: oklch(92% 0.04 89);

  --color-danger-50: oklch(23% 0.05 29);
  --color-danger-100: oklch(28% 0.05 29);
  --color-danger-200: oklch(41% 0.09 29);
  --color-danger-400: oklch(72% 0.09 29);
  --color-danger-500: oklch(84% 0.09 29);
  --color-danger-600: oklch(87% 0.07 29);
  --color-danger-700: oklch(92% 0.04 29);

  --color-orange-500: oklch(84% 0.09 59);
  --color-purple-500: oklch(84% 0.09 299);
  --color-fuschia-500: oklch(84% 0.09 329);
  --color-cyan-500: oklch(84% 0.09 189);

  --color-shadow: oklch(10% 0.015 269 / .04);
  --color-light: oklch(100% 0.015 269 / .04);

  --color-selection: rgba(31,39,66,0.99);
}

@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --color-grey-00: oklch(17% 0.01 269);
    --color-grey-20: oklch(19% 0.01 269);
    --color-grey-35: oklch(21% 0.01 269);
    --color-grey-50: oklch(22% 0.01 269);
    --color-grey-100: oklch(28% 0.01 269);
    --color-grey-200: oklch(41% 0.01 269);
    --color-grey-300: oklch(67% 0.01 269);
    --color-grey-400: oklch(72% 0.01 269);
    --color-grey-500: oklch(84% 0.01 269);
    --color-grey-600: oklch(87% 0.01 269);
    --color-grey-700: oklch(92% 0.01 269);
    --color-grey-800: oklch(96% 0.01 269);
    --color-grey-900: oklch(98% 0.01 269);

    --color-info-50: oklch(23% 0.05 269);
    --color-info-100: oklch(28% 0.05 269);
    --color-info-200: oklch(41% 0.09 269);
    --color-info-400: oklch(72% 0.09 269);
    --color-info-500: oklch(84% 0.09 260);
    --color-info-600: oklch(87% 0.07 269);
    --color-info-700: oklch(92% 0.04 269);

    --color-success-50: oklch(23% 0.05 149);
    --color-success-100: oklch(28% 0.05 149);
    --color-success-200: oklch(41% 0.09 149);
    --color-success-400: oklch(72% 0.09 149);
    --color-success-500: oklch(84% 0.09 149);
    --color-success-600: oklch(87% 0.07 149);
    --color-success-700: oklch(92% 0.04 149);

    --color-warning-50: oklch(23% 0.05 89);
    --color-warning-100: oklch(28% 0.05 89);
    --color-warning-200: oklch(41% 0.09 89);
    --color-warning-400: oklch(72% 0.09 89);
    --color-warning-500: oklch(84% 0.09 89);
    --color-warning-600: oklch(87% 0.07 89);
    --color-warning-700: oklch(92% 0.04 89);

    --color-danger-50: oklch(23% 0.05 29);
    --color-danger-100: oklch(28% 0.05 29);
    --color-danger-200: oklch(41% 0.09 29);
    --color-danger-400: oklch(72% 0.09 29);
    --color-danger-500: oklch(84% 0.09 29);
    --color-danger-600: oklch(87% 0.07 29);
    --color-danger-700: oklch(92% 0.04 29);

    --color-orange-500: oklch(84% 0.09 59);
    --color-purple-500: oklch(84% 0.09 299);
    --color-fuschia-500: oklch(84% 0.09 329);
    --color-cyan-500: oklch(84% 0.09 189);

    --color-shadow: oklch(10% 0.015 269 / .04);
    --color-light: oklch(100% 0.015 269 / .04);

    --color-selection: rgba(31,39,66,0.99);
  }
}

html { background: var(--color-grey-20); }

body { color: var(--color-grey-500); }

:focus-visible { outline: 2px solid var(--color-info-200); }
:root {
  --font-serif: Athelas, Cambria, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-mono: 'ATCHarris', SF Mono, Menlo, Consolas, DejaVu Sans Mono, monospace;
  --base-font-size: 15px;
  --font-size-10: 0.624295076969974rem;
  --font-size-20: 0.702331961591221rem;
  --font-size-30: 0.790123456790123rem;
  --font-size-40: 0.888888888888889rem;
  --font-size-50: 1rem;
  --font-size-60: 1.125rem;
  --font-size-70: 1.265625rem;
  --font-size-80: 1.423828125rem;
  --font-size-90: 1.601806640625rem;
  --font-size-100: 1.802032470703125rem;
  --font-size-120: 2.280697345733643rem;
  --font-size-130: 2.565784513950348rem;
  --font-size-140: 2.886507578194141rem;
  --font-size-150: 3.247321025468409rem;
}

html,
body {
  font-size: var(--base-font-size);
}

body {
  font: 400 var(--font-size-50) / var(--space-3x) var(--font-mono);
}
html:focus-within { scroll-behavior: smooth; }

@view-transition { navigation: auto; }

.is-loading {
  text-align: center;
  animation: loading-animation 1.5s infinite;
}

@keyframes loading-animation {
  0%   { opacity: 1; }
  50%  { opacity: 0.5; }
  100% { opacity: 1; }
}

@keyframes message-appear {
  0%   { top: -96px; }
  5% { top: 0; }
  92% { top: 0; }
  100% { top: -96px; }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}
:root {
  --box-shadow-s: 
    0 1px 1px 0 var(--color-shadow),
    0 1px 2px 0 var(--color-shadow);
  --box-shadow-m: 
    0 1px 1px 0 var(--color-shadow),
    0 1px 2px 0 var(--color-shadow),
    0 2px 4px -1px var(--color-shadow),
    0 4px 8px -2px var(--color-shadow);
  --box-shadow-l: 
    0 0px 2px 0 var(--color-shadow),
    0 1px 2px 0 var(--color-shadow),
    0 2px 4px -1px var(--color-shadow),
    0 4px 8px -2px var(--color-shadow),
    0 8px 16px -4px var(--color-shadow),
    0 8px 32px -8px var(--color-shadow);
  --box-inset-shadow-s: 0 1px 1px 0 var(--color-shadow) inset;  
  --box-inset-shadow-m: 0 1px 1px 0px var(--color-shadow) inset,
      0 2px 2px 1px var(--color-shadow) inset;
}
:root {
  --border-radius-s: calc(var(--space) / 4);
  --border-radius-m: var(--space-1-2);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --space: 8px;
  --space-1-2: calc(var(--space) / 2);
  --space-2x: calc(var(--space) * 2);
  --space-3x: calc(var(--space) * 3);
  --space-4x: calc(var(--space) * 4);
  --space-5x: calc(var(--space) * 5);
  --space-6x: calc(var(--space) * 6);
}
::selection {
  background: var(--color-selection);
  text-shadow: none;
}

p {
  margin: 0;
  padding: calc(var(--space) - 2px) 0 calc(var(--space-2x) + 2px);

  &.is-large {
    font-size: var(--font-size-80);
    line-height: var(--space-4x);
    padding: var(--space) 0 var(--space-2x);
  }
  & + :not(p) { margin-top: var(--space-3x); }

  & code,
  & samp,
  & small { line-height: 0; }
}

h1,
.is-h1 {
  display: inline-block;
  margin: 0;
  padding: calc(var(--space-2x) + 2px) 0 calc(var(--space) - 2px);
  color: var(--color-grey-700);
  font-size: calc(var(--font-size-140));
  font-weight: 700;
  letter-spacing: -0.05rem;
  line-height: calc(var(--space) * 7);
  text-transform: none;
}

h2,
.is-h2 {
  margin: 0;
  padding: calc(var(--space) + 1px) 0 calc(var(--space-2x) - 1px);
  color: var(--color-grey-700);
  font-size: var(--font-size-120);
  font-weight: 700;
  letter-spacing: -0.05rem;
  line-height: var(--space-6x);
  text-transform: none;

  * + & { margin-top: var(--space-3x); }
}

h3,
.is-h3 {
  margin: 0;
  padding: calc(var(--space) - 3px) 0 calc(var(--space-2x) + 3px);
  color: var(--color-grey-600);
  font-size: var(--font-size-80);
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--space-4x);
  text-transform: none;
}

h4,
.is-h4 {
  margin: 0;
  padding: calc(var(--space) - 1px) 0 calc(var(--space-2x) + 1px);
  color: var(--color-grey-400);
  font-size: var(--font-size-20);
  letter-spacing: 0.06em;
  line-height: var(--space-3x);
  text-transform: uppercase;
}

strong {
  color: var(--color-grey-800);
  font-weight: inherit;
}

small {
  font-size: var(--font-size-20);
  font-weight: 400;
  text-transform: none;
  color: var(--color-grey-300);
}

hr {
  height: var(--space-3x);
  margin: 0;
  padding: var(--space-3x) 0 calc(var(--space-3x) - 1px);
  background: transparent;
  border: 0;
  box-shadow: 0 -1px 0 0 var(--color-grey-50);
}

blockquote {
  margin: 0;
  padding: var(--space-2x) 0 var(--space) calc(var(--space-2x) + 2px);
  border-left: calc(var(--space) / 2) solid var(--color-grey-100);
  color: var(--color-grey-600);
  font-family: var(--font-serif);
  font-size: var(--font-size-80);
  font-style: italic;
  line-height: var(--space-4x);

  & q,
  & p {
    display: block;
    color: var(--color-danger-500);    
  }
  & + * { margin-top: var(--space-3x); }
  & > * + * { margin-top: var(--space-3x); }
}

cite {
  position: relative;
  display: inline-block;
  margin: 0;
  top: 0;
  font-size: var(--font-size-50);
  font-style: normal;
  line-height: 0;
  font-style: normal;
}

sub,
sup {
  line-height: 0;
}

q { font-style: italic; }

.is-center { text-align: center; }
.is-right { text-align: right; }
button,
input[type="submit"],
[role="button"],
:any-link[role="button"],
:any-link.button {
  display: inline-flex;
  gap: var(--space);
  width: auto;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  align-self: start;
  background-color: transparent;
  min-height: var(--space-5x);
  margin: 0;
  padding: var(--space) calc(var(--space) * 2);
  border: none;
  border-radius: var(--border-radius-s, 0);
  box-shadow: 0 0 0 1px var(--color-grey-200) inset, var(--box-shadow-s);
  outline: 0;
  font-family: inherit;
  font-size: var(--font-size-30);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: var(--space-3x);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--color-grey-700);
  &:hover,
  &:active {
    color: var(--color-grey-800);
    box-shadow: 0 0 0 1px var(--color-grey-300) inset, var(--box-shadow-s);
    transition: 0.2s all ease-in-out;
  }
  &:focus {
    outline: 2px solid var(--color-info-200);
    border: 0;
    color: var(--color-grey-900);
    z-index: 1;
    &:not(:focus-visible) { outline: none; }
  }

  & svg {
    height: calc(var(--space) * 2);
    width: calc(var(--space) * 2);
    display: inline-block;
    fill: none;
    stroke: var(--color-grey-300);
    stroke-width: 2; 
    stroke-linecap: square;
    stroke-linejoin: square;
  }

  &[aria-expanded="true"] {
    background: var(--color-grey-00);
    color: var(--color-grey-600);
    box-shadow: 0 0 0 1px var(--color-grey-200) inset, var(--box-inset-shadow-m);
  }

  &.is-strong {
    --gradient-top-grey-50: linear-gradient(180deg, var(--color-grey-500), var(--color-grey-600));
    --gradient-top-grey-60: linear-gradient(180deg, var(--color-grey-600), var(--color-grey-700));
    background: var(--gradient-top-grey-50);
    color: var(--color-grey-20);
    box-shadow: 
      0 0 0 1px var(--color-shadow),
      0 -0.25em 1em 0 var(--color-shadow) inset,
      0 -0.125em 0 0 var(--color-shadow) inset,
      0 0.25em 1em var(--color-light) inset,
      0 0.125em 0 0 var(--color-light) inset,
      var(--box-shadow-m);
    text-shadow: 1px 1px 0 0 var(--color-shadow);
    &:hover,
    &:active {
      background: var(--gradient-top-grey-60);
      color: var(--color-grey-20);
    }
    &:focus { color: var(--color-grey-20); }
    .theme-dark & {
      --gradient-top-grey-50: linear-gradient(180deg, var(--color-grey-500), var(--color-grey-400));
      --gradient-top-grey-60: linear-gradient(180deg, var(--color-grey-600), var(--color-grey-500)); 
    }
    @media (prefers-color-scheme: dark) {
      :not(.theme-light) {
        --gradient-top-grey-50: linear-gradient(180deg, var(--color-grey-500), var(--color-grey-400));
        --gradient-top-grey-60: linear-gradient(180deg, var(--color-grey-600), var(--color-grey-500));
      }
    }
  }

  &.is-reset {
    color: var(--color-danger-500);
    &:hover,
    &:active {
      background: var(--color-danger-500);
      color: var(--color-grey-20);
      box-shadow: 0 0 0 1px var(--color-danger-500) inset, 
      var(--box-shadow-s);
    }
    &:focus {
      background: var(--color-danger-500);
      color: var(--color-grey-20);
    }
  }

  &.is-link {
    background: transparent;
    color: var(--color-grey-500);
    text-decoration: underline;
    border-color: transparent;
    box-shadow: none;
    &:hover,
    &:active {
      background: transparent;
      color: var(--color-grey-700);
      box-shadow: none;
    }
    &:focus {
      color: var(--color-grey-700);
    }
  }

  &.is-small {
    border-radius: var(--border-radius-s);
    font-size: var(--font-size-20);
    line-height: var(--space-3x);
    min-height: var(--space-3x);
    padding: 0 calc(var(--space) * 1.5);
    & svg {
      height: var(--space);
      width: var(--space);
    }
  }

  &.is-large {
    border-radius: var(--border-radius-m);
    font-size: var(--font-size-50);
    line-height: var(--space-5x);
    min-height: calc(var(--space) * 7);
    padding: var(--space) calc(var(--space) * 4);

    & svg {
      height: var(--space-3x);
      width: var(--space-3x);
    }
  }
}
code,
pre {
  font-family: var(--font-mono);
  color: var(--color-grey-500);
  font-size: inherit;
  line-height: inherit;
  overflow-y: auto;
  word-wrap: normal;
  white-space: pre-wrap;
	word-spacing: normal;
  word-break: normal;
  margin: 0;
}

code {
  background: transparent;
  word-break: break-word;
}

pre { 
  padding: calc(var(--space) * 3) calc(var(--space) * 2);
  & p { 
    padding: 0 0 var(--space-3x);
    font-family: inherit;
    font-size: inherit;
  }
}
code[class*="language-"],
pre[class*="language-"] {
  color: var(--color-grey-600);
  background: transparent;
  font-family: var(--font-mono);
  text-align: left;
  word-spacing: normal;
  word-wrap: normal;
  word-break: break-word;
  tab-size: 2;
  hyphens: none;
}

pre[class*="language-"] {
  margin: 0;
  overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  padding: 12px var(--space-2x);
}
 
:not(pre) > code[class*="language-"] {
  padding: 0 var(--space-1-2, 0);
  border-radius: var(--border-radius-m, 0);
  white-space: normal;
}

.token {
  &.comment,
  &.prolog,
  &.doctype,
  &.cdata {
    color: var(--color-grey-300);
    font-style: italic;
    opacity: 1;
  }
  &.punctuation { color: var(--color-grey-400); }
  &.namespace { opacity: .7; }
  &.property,
  &.tag,
  &.boolean,
  &.number,
  &.constant,
  &.symbol,
  &.deleted {
    color: var(--color-danger-500);
  }
  &.constant { color: var(--color-warning-500); }
  &.selector,
  &.attr-name,
  &.string,
  &.char,
  &.builtin,
  &.inserted {
    color: var(--color-cyan-500);
  }
  &.attr-name { color: var(--color-info-500); }
  &.operator,
  &.url,
  .language-css &.string,
  .style &.string {
    color: var(--color-grey-500);
    background: transparent;
  }
  &.entity { color: var(--color-purple-500); }
  &.operator { color: var(--color-purple-500); }
  &.atrule,
  &.keyword {
    color: var(--color-fuschia-500);
  }
  &.attr-value { color: var(--color-cyan-500); }
  &.function,
  &.class-name {
    color: var(--color-info-500);
  }
  &.regex,
  &.important,
  &.variable {
    color: var(--color-warning-500);
  }
  &.important,
  &.bold {
    font-weight: 700;
  }
  &.italic { font-style: italic; }
  &.entity { cursor: help; }
}

pre.is-large {
  display: block;
  margin: var(--space-6x) auto 0;
  padding: 0;
  text-align: left;
  width: 100%;
  max-width: 740px;
  overflow: visible;
  background: transparent;
  position: relative;

  & code[class*="language-"] {
    padding: var(--space-3x) var(--space-4x);
    display: block;
    background: var(--color-grey-00);
    box-shadow: 0 1px 0 0 var(--color-grey-50) inset, 0 0 0 1px var(--color-grey-35) inset, var(--box-shadow-l);
    width: 100%;
    text-align: left;
    margin: 0;
  }
  & small {
    position: absolute;
    background: var(--color-grey-100);
    color: var(--color-grey-500);
    bottom: 0;
    right: 0;
    padding: 0 var(--space);
  }
}
form { 
  overflow: visible;
  & > * + * { margin-top: var(--space-3x, 1em); }
  & *[hidden] { margin: 0; }
}

fieldset {
  padding: var(--space-3x) var(--space-2x);
  margin: 0;
  border: 1px solid var(--color-grey-50);
  min-width: auto;
  display: block;
  overflow: visible;

  &:has(legend) {
    margin: var(--space) 0 0;
    padding: 0 var(--space-2x) var(--space-3x);
  }

  & > *:not(svg) + * { margin-top: var(--space-3x, 1em); }
}

legend {
  margin: calc((var(--space) * -1)) auto 0;
  background: var(--color-grey-20);
  color: var(--color-grey-700);
  font-size: var(--font-size-30);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 var(--space);
  border-radius: 1px;
}

label {
  display: block;
  line-height: var(--space-3x);
  padding: 0;
  text-align: left;
  text-transform: uppercase;
  font-size: var(--font-size-20);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--color-grey-400);
  user-select: none;
  -webkit-user-select: none;

  & small,
  & .badge {
    text-transform: none;
    letter-spacing: 0;
  }
}

input,
select,
textarea,
output {
  display: block;
  width: 100%;
  background-color: var(--color-grey-00);
  min-height: var(--space-5x);
  padding: calc(var(--space) - 1px) calc(var(--space-2x) - 1px);
  margin: 0;
  border: 1px solid var(--color-grey-100);
  border-radius: var(--border-radius-s, 0);
  outline: 0 none;
  box-shadow: var(--box-inset-shadow-s);
  color: var(--color-grey-600);
  font-family: var(--font-mono);
  font-size: var(--base-font-size);
  line-height: var(--space-3x);

  &:focus {
    outline: 0 none;
    border-color: var(--color-info-400);
    box-shadow: 0 0 0 2px var(--color-info-200), var(--box-shadow-s);
    &:not(:focus-visible) { outline: none; }
  }

  &[disabled] {
    border-color: var(--color-grey-100);
    color: var(--color-grey-20);
    background-color: var(--color-grey-100);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
  }

  &[readonly] {
    border: 1px dashed var(--color-grey-200);
    cursor: not-allowed;
    color: var(--color-grey-500);
    background-color: transparent;
    box-shadow: 0 0 0 0;
  }

  &:autofill,
  &:autofill:hover, 
  &:autofill:focus {
    font-family: inherit;
    border-color:var(--color-info-200);
    font-size: var(--base-font-size);
    -webkit-text-fill-color:var(--color-info-700);
    box-shadow: 0 0 0px 1000px var(--color-info-100) inset;
    transition: background-color 5000s ease-in-out 0s;
  }

  label + & {
    margin-top: 0;
  }
}

textarea {
  min-height: calc(var(--space) * 11);
  resize: vertical;
}

input[type="file"],
input[type="date"],
input[type="time"] {
  height: var(--space-5x);
}

input[type="date"],
input[type="time"],
input[type="tel"],
input[type="number"] {
  max-width: 16ch;
}

::placeholder { color: var(--color-grey-200); }

::-webkit-calendar-picker-indicator { 
  opacity: .8;
  .theme-dark & { filter: invert(0.5); }
}
input[type="checkbox"] {
  appearance: none;
  box-shadow: none;
  height: var(--space-2x);
  width: var(--space-2x);
  min-height: var(--space-2x);
  outline: none;
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin: var(--space-1-2) 0 0;
  padding: 0;
  cursor: pointer;
  border: 1px solid var(--color-grey-200);
  border-radius: var(--border-radius-m);
  background: var(--color-grey-20);
  transition: background .3s, border-color .3s, box-shadow .2s;

  &[disabled] + span {
    color: var(--color-grey-300);
    display: inline-block;
  }

  &:after {
    content: '';
    display: block;
    position: absolute;
    transition: transform var(--d-t, .3s) var(--d-t-e, ease), opacity var(--d-o, .2s);
    opacity: var(--o, 0);
    width: 6px;
    height: 10px;
    border: 2px solid var(--color-grey-00);
    border-top: 0;
    border-left: 0;
    left: 5px;
    top: 0px;
    transform: rotate(var(--r, 15deg));
  }

  &:checked {
    background: var(--color-info-500);
    border-color: var(--color-info-200);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
    --r: 45deg;
    --o: 1;
  }

  &:disabled {
    background: var(--color-grey-200);
    cursor: not-allowed;

    &:checked { border-color: var(--color-grey-200); }

    & + label { cursor: not-allowed; }
  }

  &:hover {
    &:not(:checked) {
      &:not(:disabled) { border-color: var(--color-grey-300); }
    }
  }

  &:focus {
    border-color: var(--color-grey-00);
    box-shadow: 0 0 0 2px var(--color-info-200);
  }

  & + label:has(+ input[type='checkbox']) { margin-top: -8px; }
}

label {
  &:has(+ input[type='checkbox']) { padding-left: 24px; }

  & + input[type='checkbox'] {
    position: relative;
    margin-top: -20px;
  }
}
select {
  appearance: none;
  background-color: transparent;
  margin: 0;
  z-index: 1;
  box-shadow: 0 0 0 1px var(--color-grey-200) inset, var(--box-shadow-s);

  &::-ms-expand { display: none; }

  &:focus + .focus {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid var(--color-info-200);
    box-shadow: 0 0 0 1px var(--color-info-200) inset,
    var(--box-shadow-s);
    border-radius: inherit;
  }
}

.select {
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  position: relative;
  background-color: transparent;
  border-radius: var(--border-radius-s, 0);
  margin: 2px 0 -2px;
  cursor: pointer;

  & select,
  &::after {
    grid-area: select;
  }

  &::after {
    content: "";
    display: block;
    width: var(--space-1-2);
    height: var(--space-1-2);
    position: absolute;
    right: var(--space-2x);
    top: calc(50% - 4px);
    border-bottom: 1px solid var(--color-grey-300);
    border-right: 1px solid var(--color-grey-300);;
    transform: rotate(45deg);
  }
}

.select--disabled {
  cursor: not-allowed;
  background-color: var(--color-grey-200);
}
svg { vertical-align: middle; }
img {
  max-width: 100%;
  display: block;
}

picture { 
  display: block;
  & img { margin: 0 auto; }
  & svg {
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
  }
}
a:any-link {
  color: var(--color-info-500);
  text-decoration: underline;
  
  &:hover { color: var(--color-info-600); }
  &[target="_blank"] { 
    padding-right: var(--space-2x);
    position: relative;
    display: inline-block;
  
    &::after,
    &::before {
      content: "";
      display: block;
      position: absolute;
      right: 0;
    }
    &::before {
      background: currentColor;
      transform: rotate(-45deg);
      top: 50%;
      height: 2px;
      width: 12px;
    }
    &::after {
      width: 8px;
      height: 8px;
      border-right: 2px solid;
      border-top: 2px solid;
      top: calc(50% - 5px);
    }
  }
  & > * + * {
    margin-left: var(--space);
    text-decoration: none;
  }
}
ul,
ol,
dl {
  margin: 0;
  padding: 6px 0 18px 24px;
}

ul ul,
ol ol,
ol ul {
  padding: 0 0 0 24px;
}

dl { padding: 6px 0 18px 0; }

dt {
  font-weight: 700;
  color: var(--color-grey-700);
}

dd { margin: 0; }

dd + dt { margin-top: var(--space-3x) }
table {
  width: 100%;
  padding: 0;
	border-spacing: 0;
}

thead { box-shadow: 0 -1px 0 0 var(--color-grey-50) inset; }

th {
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--font-size-30);
  letter-spacing: 0.05em;
  transform: translateY(2px);
  padding: 12px var(--space-2x);
  text-align: left;
  color: var(--color-grey-500);
}

tbody tr { 
  box-shadow: 0 -1px 0 0 var(--color-grey-35);
  &:hover { background: var(--color-grey-35); }
}

td {
  color: var(--color-grey-600);
  padding: 12px var(--space-2x);
}
[role="alert"] {
  display: flex;
  align-items: center;
  color: var(--color-grey-600);
  background: var(--color-grey-50);
  border-left: var(--space-1-2) solid  var(--color-grey-400);
  box-shadow: var(--box-shadow-m);
  padding: calc(var(--space) * 1.5 ) var(--space-2x);

  &:empty { display: none; }

  & a:any-link {
    color: inherit;
    text-decoration-color: inherit;
    &:hover { 
      color: var(--color-grey-800); 
      text-decoration-color: inherit;
    }
  }

  & p {
    color: inherit;
    font-family: inherit;
    font-size: var(--font-size-50);
    padding: 0;
    max-width: none;
  }

  & + * { margin-top: var(--space-6x); }

  &.is-info {
    background: var(--color-info-50);
    color: var(--color-info-600);
    border-color: var(--color-info-100);
    border-left-color: var(--color-info-400);
    & :any-link:hover { color: var(--color-info-700); }
  }

  &.is-success {
    background: var(--color-success-50);
    color: var(--color-success-600);
    border-color: var(--color-success-100);
    border-left-color: var(--color-success-400);
    & :any-link:hover { color: var(--color-success-700); }
  }

  &.is-danger {
    background: var(--color-danger-50);
    color: var(--color-danger-600);
    border-color: var(--color-danger-100);
    border-left-color: var(--color-danger-400);
    & :any-link:hover { color: var(--color-danger-700); }
  }

  &.is-warning {
    background: var(--color-warning-50);
    color: var(--color-warning-600);
    border-color: var(--color-warning-100);
    border-left-color: var(--color-warning-400);
    & :any-link:hover { color: var(--color-warning-700); }
  }

  * + & { margin-top: var(--space-3x); }
}
.avatar,
a.avatar {
  display: block;
  position: relative;
  height: var(--space-3x);
  width: var(--space-3x);
  background: var(--color-grey-50);
  border-radius: 50%;
  box-shadow: 0 0 0 calc(var(--space) / 4) var(--color-grey-20);
  overflow: hidden;
  text-decoration: none;
  text-align: center;
  line-height: var(--space-5x);
  &:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    box-shadow: 0 1px 2px 0 var(--color-shadow) inset;
  }
  & img {
    height: 100%;
    margin: 0;
    position: absolute;
    object-fit: cover;
    left: 0;
    height: 100%;
    width: 100%;
  }
}
.badge {
  display: inline-block;
  height: var(--space-2x);
  padding: 0 var(--space-1-2);
  position: relative;
  white-space: nowrap;
  background: var(--color-grey-100);
  border-radius: var(--border-radius-m, 0);
  box-shadow: var(--box-shadow-s);
  color: var(--color-grey-400);
  font-size: var(--font-size-20);
  font-weight: 400;
  line-height: var(--space-2x);
  text-decoration: none;

  &.is-info {
    background: var(--color-info-100);
    color: var(--color-info-700);
  }
  &.is-success {
    background: var(--color-success-100);
    color: var(--color-success-700);
  }
  &.is-danger {
    background: var(--color-danger-100);
    color: var(--color-danger-700);
  }
  &.is-warning {
    background: var(--color-warning-100);
    color: var(--color-warning-700);
  }
}
.card {
  background: var(--color-grey-20);
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--color-grey-50), var(--box-shadow-l);
  padding: var(--space-3x) var(--space-2x);
  list-style-type: none;
  overflow: hidden;

  & > header {
    display: flex;
    align-items: center;
    min-height: var(--space-6x);
    width: calc(100% + var(--space-4x));
    padding: var(--space) var(--space-2x);
    margin: calc(var(--space-3x) * -1) calc(var(--space-2x) * -1) calc(var(--space-3x) * 1);
    box-shadow: 0 1px 0 0 var(--color-grey-50);
    color: var(--color-grey-500);

    & > * {
      margin: 0 var(--space-1-2);
      padding: 0;
      text-transform: none;
      letter-spacing: 0;
      font-size: var(--font-size-50);
      line-height: var(--space-3x);
    }
  }

  & > picture {
    margin: calc(var(--space-3x) * -1) calc(var(--space-3x) * -1) calc(var(--space-3x) * 1);
    width: calc(100% + var(--space-6x));
  }

  & > footer {
    background: var(--color-grey-50);
    box-shadow: 0 -1px 0 0 var(--color-grey-100);
    margin: var(--space-3x) calc(var(--space-2x) * -1) calc(var(--space-3x) * -1);
    padding: var(--space-2x) calc(var(--space-2x)  - 1px);
    width: calc(100% + var(--space-4x));
  }

  & > aside {
    background: var(--color-grey-50);
    min-width: 300px;
    padding: var(--space-3x);
  }
}
.grid-auto {
  --gap: var(--space-3x);
  --col-min-width: 240px;
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr));
  width: 100%;
  padding: 0;

  & > * {
    list-style-type: none;
    margin: 0;
  }

  & * + *,
  * + .card {
    margin-top: 0;
  }
  & + * { margin-top: var(--space-3x); }
}
[role="group"] {
  display: flex;
  align-items: flex-end;
  border-radius: var(--border-radius-s, 0);
  border-radius: 4px;
  max-width: 100%;

  > * {
    border-radius: 0;
    margin: auto 0 0;

    &.is-small,
    &.is-large {
      border-radius: 0;
    }
    &:first-child { border-radius: var(--border-radius-s, 0) 0 0 var(--border-radius-s, 0); }
    &:last-child { border-radius: 0 var(--border-radius-s, 0) var(--border-radius-s, 0) 0; }
  }
  & > picture {
    border-radius: 0;
    margin: auto 0 0;

    &:first-child,
    &:last-child { border-radius: 0; }
  }
  & > .input { 
    margin: auto var(--space) 0 0;
    &:last-child { margin: auto 0 0 0; }
  }
  & > label { margin: 0; }

  &.is-block { 
    width: 100%;
    & > * { flex: 1; }
  }
}
[role="menu"] {
  text-align: left;
  color: var(--color-grey-500);
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 6px 0 18px;
  text-transform: none;
  font-size: var(--font-size-50);
  letter-spacing: 0.05em;

  & .menu__title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--font-size-30);
    display: inline-block;
    transform: translateY(2px);
    padding: 0 24px;
  }
  & [role="menu"] {
    margin: 0 0 var(--space-3x, 1em);
    padding: 0;
  }
}

li[role="menuitem"] {
  display: flex;
  flex-direction: column;
}

a[role="menuitem"]:not(.button) {
  padding: 0 24px;
  margin: 0;
  font-size: inherit;
  text-decoration: none;
  color: var(--color-grey-700);
  display: flex;
  align-items: center;
  &:hover { color: var(--color-grey-800); }
  &[aria-current="true"] {
    background: var(--color-grey-100);
    color: var(--color-info-700);
  }
}
.menubutton {
  position: relative;
  display: inline-block;

  & > button,
  & > input[type="submit"],
  & > input[type="reset"],
  & > [role="button"],
  & > :any-link[role="button"] {
    position: relative;
    margin: 0;

    &:after {
      content: "";
      position: absolute;
      right: 0;
      top: calc(50% - 2px);
      width: var(--space-1-2);
      height: var(--space-1-2);
      border-bottom: 1px solid var(--color-grey-300);
      border-right: 1px solid var(--color-grey-300);
      transform: rotate(45deg);
      transition: all 0.2s ease;
    }

    &:hover:after { border-color: var(--color-grey-500); }

    &[aria-expanded="true"]:after {
      transform: rotate(225deg);
      top: calc(50% - 1px);
      border-color: var(--color-grey-500);
    }
  }

  & > [role="menu"] {
    position: absolute;
    z-index: 20;
    top: calc(var(--space) * 7);
    left: 0;
    margin: 0;
    padding: var(--space-2x, 0) 0;
    border-radius: var(--border-radius-m, 0);
    width: auto;
    background: var(--color-grey-50);
    box-shadow: var(--box-shadow-l);
    border: 1px solid var(--color-grey-100);
    visibility: hidden;
    opacity: 0;
    transition: all .2s cubic-bezier(0,0.1,0.5,1);
    transform: scaleY(0.833) skewX(2deg);
    transform-origin: 100% 0%;

    &:after,
    &:before {
      bottom: 100%;
      left: var(--space-3x);
      border: solid transparent;
      content: "";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }

    &:after {
      border-color: transparent;
      border-bottom-color: var(--color-grey-50);
      border-width: 6px;
      margin-left: -6px;
    }
    
    &:before {
      border-color: transparent;
      border-bottom-color: var(--color-grey-100);
      border-width: 8px;
      margin-left: -8px;
    }

    & [role="separator"] {
      margin-top: 11px;
      border-top: 1px solid var(--color-grey-100);
      height: 12px;
    }

    & [role="menuitem"] {
      display: block;
      padding: 0px var(--space-2x);
      &:hover,
      &:focus {
        color: var(--color-grey-900);
      }
    }

    &.is-right {
      left: auto;
      right: 0;
      &:after {
        right: var(--space-3x);
        left: auto;
        margin-right: -6px;
      }
      &:before {
        right: var(--space-3x);
        left: auto;
        margin-right: -8px;
      }
    }
  }

  & [aria-expanded="true"] + [role="menu"],
  & > [role="menu"]:focus-within {
    visibility: visible;
    opacity: 1;
    top: calc(var(--space) * 7);
    transform: scaleY(1) skewX(0deg);
  }

  &.is-right > [role="menu"] {
    left: auto;
    right: 0;
    &:after {
      right: var(--space-3x);
      left: auto;
      margin-right: -6px;
    }
    &:before {
      right: var(--space-3x);
      left: auto;
      margin-right: -8px;
    }
  }
}
ul[role="menubar"] {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  & > li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }
  & [role="separator"] {
    padding-top: 0.15em;
    background-position: center;
    background-repeat: repeat-x;
  }
  & :any-link[role="menuitem"]{
    &:not(.button) {
      display: block;
      padding: 12px 0;
      white-space: nowrap;
    }
    &[aria-haspopup="true"] {
      position: relative;
      padding-right: 12px;
      &:after {
        grid-area: select;
        content: "";
        position: absolute;
        right: 0;
        top: calc(50% - 4px);
        width: var(--space-1-2);
        height: var(--space-1-2);
        border-bottom: 1px solid var(--color-grey-400);
        border-right: 1px solid var(--color-grey-400);
        transform: rotate(45deg);
      }
    }
  }
  & ul[role="menu"] {
    display: none;
    position: absolute;
    z-index: 1000;
    margin: 0;
    min-width: 180px;
    padding: var(--space) 0;
    border-radius: var(--border-radius-m);
    width: auto;
    background: var(--color-grey-20);
    box-shadow: var(--box-shadow-l);
    border: 1px solid var(--color-grey-50);

    & li { position: relative; }
    & li :any-link[role="menuitem"] {
      display: block;
      padding: 0 var(--space-2x);
      background: var(--color-grey-20);
      &:hover,
      &:focus {
        background: var(--color-grey-50);
      }
      &[aria-haspopup="true"] {
        position: relative;
        &::after {
          transform: rotate(-45deg);
          right: var(--space-2x);
        }
        &:has(+ ul[role="menu"]:hover) { background-color: var(--color-grey-50); }
        & + ul[role="menu"] {
          top: -9px;
          left: 100%;
        }
      }
    }
  }
  & :any-link[role="menuitem"][aria-haspopup="true"]:hover ~ ul[role="menu"],
  & ul[role="menu"]:hover {
    display: block;
  }
}
*[hidden=true] { display: none; }
/*




























*/
@font-face {
	font-family: 'ATCHarris';
	src: url(//cdn.rorvswild.com/assets/atcharris-05e26063b48aab7ec254c71fcfbd788afb7fda08cc5a5d7c9cc3730ad17d74dd.woff2) format('woff2'),
       url(//cdn.rorvswild.com/assets/atcharris-fed7914136d985f574953bb0c337fadee3349bf1d435942e866df9953b8d0094.woff) format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
	font-family: 'ATCHarris';
	src: url(//cdn.rorvswild.com/assets/atcharris-bold-245ea595eeaf556e4db490a521237a442cfa34b53b9792c733f10b79f30b5040.woff2) format('woff2'),
       url(//cdn.rorvswild.com/assets/atcharris-bold-58e980eee29874f86d4eb10f03a99e8876ab210f13650b71c3a6187d930014a7.woff) format('woff');
  font-weight: 700;
  font-style: normal;
}
body {
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}

.pull-right { float: right; }

ul {
  list-style-type: none;
  margin: 0 0 var(--space-3x);
  padding: 0;
}

h2 {
  &.title {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
  }
  &.error {
    color: var(--color-danger-500);
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
  }
  &.error--fixed {
    text-decoration: line-through;
    text-decoration-thickness: 4px;
    text-decoration-color: var(--color-danger-400);
    opacity: 0.8;
    &:hover {
      text-decoration: none;
      opacity: 1;
    }
  }
}

h5 {
  text-transform: uppercase;
  font-size: var(--font-size-40);
  color: var(--color-grey-500);
  font-weight: 400;
  letter-spacing: 0.05em;
  margin: 0 0 96px;
  line-height: var(--space-3x);
}

.noresult {
  color: var(--color-grey-200);
  padding: 96px var(--space-3x);
  text-align: center;
  font-weight: 400;

  + pre[class*="language-"].is-large { margin-top: -72px; }
}

.file-line { 
  display: flex;
  align-items: flex-start;

  & .file {
    color: var(--color-grey-700);
    display: inline-block;
    &::before {
      content: "↳";
      padding: 0 2px;
      color: var(--color-grey-300);
    }
  }
}

.line-number {
  display: inline-block;
  background: var(--color-grey-50);
  box-shadow: var(--box-shadow-s);
  font-weight: 700;
  color: var(--color-grey-700);
  text-decoration: none;
  padding: 0 2px;
  margin-left: 2px;
  border-radius: 2px;
}

.number {
  & span {
    font-weight: 700;
    display: block;
    color: var(--color-grey-500);
    height: 24px;

    &.badge {
      display: inline-block;
      font-weight: 400;
      font-size: var(--font-size-20);
      height: var(--space-2x);
    }

    & small {
      display: inline-block;
      margin-left: 2px;
    }
  }
  & .mobile-label {
    font-size: var(--font-size-20);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 24px;
    color: var(--color-grey-400);
    @media (min-width: 980px) { display: none; }
  }
}
.icon {
  fill: transparent;
  stroke: var(--color-grey-500);
  stroke-width: 2px;
}

.icon--stripe { 
  fill: var(--color-grey-200); 
  stroke-width: 0;
}
html:has(.public),
.public .site-footer {  background: var(--color-grey-00); }

svg.rorvswild {
  fill: none;
  stroke: var(--color-grey-700);
  stroke-miterlimit: 10;
  stroke-width: 2;
  stroke-linecap: square;
  height: 72px;
  margin: 96px auto 0;
  display: block;

  & text {  
    font-size: 9px;
    font-family: var(--font-mono);
    font-weight: 700;
    fill: var(--color-grey-700);
    stroke-width: 0;
  }
}

.public { 
  background: url(//cdn.rorvswild.com/assets/bg-50cff6336e0845c58c71b826cc302cb4093c3343beee426ae72788687799cc06.svg) repeat-x center -200px;

  & p.is-large {
    margin: 0 auto;
    display: block;
    max-width: 740px;
    text-wrap: balance;
    font-size: var(--font-size-60);
    line-height: var(--space-3x);
  }

  & header {
    & .badge {
      margin-top: 24px;
      display: inline-block;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 700;
      color: var(--color-grey-500);

      &.is-info { color: var(--color-info-500); }
      &.is-success { color: var(--color-success-500); }
      &.is-danger { color: var(--color-danger-500); }

      & + .is-h1 { margin-top: -8px; }
      & + .is-h2 { margin-top: 0px; }
    }
  }

  & .is-h1 {
    font-size: var(--font-size-130);
    line-height: calc(var(--space) * 6);
    text-wrap: pretty;
  }

  & svg.rorvswild + .badge, 
  & h1.badge {
    margin-top: 72px;
  }

  & main {
    text-align: center;
    position: relative;
    max-width: 1520px;
    margin: 0 auto;
    padding: 0 12px;

    & section { 
      padding: 36px 0;
      &.blog {
        padding: 36px 12px;
      }
    }

    & h4,
    & .is-h4 {
      font-size: var(--font-size-30);
      color: var(--color-grey-700);
    }
  }

  & section {
    & header > svg {
      fill: none;
      stroke: var(--color-grey-200);
      stroke-miterlimit: 10;
      stroke-width: 0.8;
      width: 72px;
      height: 72px;
      margin: 0 auto;
      overflow: visible;
      position: relative;
      display: block;
    }

    & > ul.grid-auto {
      margin-top: 72px;
      grid-auto-flow: dense;
      @media (min-width: 980px) { --col-min-width: calc(var(--space) * 40); }
    }
    
    &.pricing,
    &.public section.new-pricing { padding: 0; }

    &.pricing .pricing__rorvswild {
      padding: var(--space-2x) var(--space-2x) var(--space-3x);
      margin-inline: -12px;
      width: calc(100% + var(--space-3x));
    }
  }
}

main.form { 
  max-width: 520px;
  & .card {
    margin-top: var(--space-3x);
    padding: var(--space-3x) var(--space-3x) var(--space-5x);
    box-shadow: 0 0 0 1px var(--color-grey-50), var(--box-shadow-l);
  }
  & input[type="submit"] { margin-top: 24px; }
  & .lost {
    display: inline-block;
    margin: 0;
    font-size: var(--font-size-40);
    letter-spacing: 0;
    text-transform: none;
    float: right;
  }
  & textarea {
    min-height: calc(var(--space) * 30);
    field-sizing: content;
  }
}

.alert--profiler {
  background: var(--color-grey-20);
  margin-top: var(--space-6x);
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: var(--space-3x);
  gap: var(--space-2x) var(--space-3x);
  & h4 { 
    padding: 0;
    text-decoration-color: var(--color-grey-300);
  }
  & p {
    color: var(--color-grey-400);
    flex: 1;
    text-align: left;
  }
  & a[role="button"] {
    &.is-small svg {
      fill: currentColor;
      stroke-width: 0;
      width: 12px;
      height: 12px;
    }
  }
  @media (min-width: 600px) { flex-direction: row; }
}

.cta {
  background: oklch(30% 0.02 269 / .8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow-x: hidden;
  position: fixed;
  left: 0;
  right: 0;
  padding: 24px;
  max-width: 100%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: -96px;
  transition: bottom 0.3s ease-in-out;
  &.show { bottom:0; }
  & p { margin:0; }
  & .logo {
    display: none;
    fill: none;
    stroke: var(--color-grey-300);
    stroke-width: 2.5;
    width: var(--space-6x);
    height: var(--space-6x);
    padding: 12px;
    &:hover { stroke: var(--color-grey-400); }
  }
  & [role="button"] .icon--github {
    margin: 0 var(--space) 0 0;
    fill: currentColor;
    transition: fill 0.15s ease-in-out;
  }
}

.cta__left {
  flex: 1;
  display: none;
}

.cta__right {
  flex: 1;
  text-align: center;
}

@media (max-width: 600px) {
  html:has(> body.public) { font-size: 14px; }
}

@media (min-width: 600px) {
  .public {
    background: url(//cdn.rorvswild.com/assets/bg-50cff6336e0845c58c71b826cc302cb4093c3343beee426ae72788687799cc06.svg) repeat-x center top;
    & main { 
      padding: 0 24px;
      & section { 
        padding: 72px 0;
        &.blog { padding: 72px 24px; }
      }
    }

    & .is-h1 {
      font-size: var(--font-size-140);
      line-height: calc(var(--space) * 7);
    }

    & p.is-large {
      font-size: var(--font-size-80);
      line-height: var(--space-4x);
    }

    & section.pricing .pricing__rorvswild {
      padding: var(--space-2x) var(--space-3x) var(--space-3x);
      margin-inline: 0;
      width: 100%;
    }
  }

  .cta .logo,
  .cta__left {
    display: block;
  }

  .cta__right {
    display: block;
    text-align: right;
  }
}
.width-limiter {
  position: relative;
  max-width: 1520px;
  margin: 0 auto;
  padding: var(--space-1-2) 12px;

  @media (min-width: 420px) {
    padding: 0 var(--space-3x);
  }
}

.feature {
  vertical-align: top;
  text-align: center;
  position: relative;
  & p { 
    text-align: left;
    text-wrap: pretty;
  }
  & svg {
    stroke: var(--color-success-500);
    fill: none;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    overflow: visible;
  }
  & .separator { height: calc(var(--space) * 5); }
  & .icon__bg {
    stroke-width: 0;
    fill: transparent;
  }
  &.request svg { stroke: var(--color-info-500); }
  &.job svg { stroke: var(--color-warning-500); }
  &.error svg { stroke: var(--color-danger-500); }
  &.server svg { stroke: var(--color-orange-500); }
  &.deploy svg { stroke: var(--color-grey-500); }
  &.infinite svg { stroke: var(--color-success-500); }
  &.card {
    box-shadow:  0 0 0 1px var(--color-grey-35),
    var(--box-shadow-l);
    background: var(--color-grey-20);
    & pre { background: var(--color-grey-00); }
    & > picture {
      width: calc(100% + var(--space-2x));
      margin: 0 calc(var(--space) * -1) calc(var(--space-2x) * -1);
      background: var(--color-grey-20);
      border: 0;
    }
    & img {
      height: auto;
      display: block;
      position: relative;
    }
    & svg.icon--github {
      fill: currentColor;
      stroke-width: 0;
      height: 12px;
      width: 12px;
    }
    &.is-blue svg { stroke: var(--color-info-500); }
    &.is-red svg { stroke: var(--color-danger-500); }
    &.is-grey {
      & h3 { color: inherit; }
      & svg { stroke: var(--color-grey-500); }
    }
  }
  
  &.is-large {
    & > picture { display: none; }
    @media (max-width: 530px) {
      & > picture { display: block; }
    } 
    @media (min-width: 1400px) {
      grid-column-end: span 2;
      grid-row-end: span 2;
      position: relative;
      & > picture { display: block; }
    }
  }
}

.supported {
  margin: var(--space-6x) 0 0;
  text-align: center;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  max-height: 192px;
  overflow: hidden;
  & svg {
    fill: var(--color-grey-200);
    fill-opacity: 0.6;
    flex: 1;
    min-width: 72px;
    max-width: 72px;
    height: 72px;
    margin: 0 12px var(--space-3x);
  }
  @media (min-width: 600px) {
    max-height: 96px;
  }
}

.screenshot {
  margin: 0 -12px;
  text-align: center;
  padding: 0;
  max-width: calc(100% + 24px);

  & img {
    width: 100%;
    height: auto;
    margin: 0 auto;
    max-width: 1520px;
    box-shadow: var(--box-shadow-l);
  }
  & picture + .card {
    background: var(--color-grey-50);
    margin-top: 1px;
    padding: 8px;
    box-shadow: var(--box-shadow-l);
  }

  @media (min-width: 600px) {
    margin: 0 auto;
    max-width: 100%;
  }

  &.screenshot--preview {
    max-height: 600px;
    margin-top: 72px;
    display: grid;
    gap: var(--space-3x);
    grid-template-columns: auto 1fr;
    border-radius: var(--border-radius-s);
    box-shadow: var(--box-shadow-l);
    background: linear-gradient(315deg, var(--color-danger-500), var(--color-fuschia-500),  var(--color-purple-500), var(--color-info-500));
    color: var(--color-grey-200);
    & > div {
      padding: 96px var(--space-2x) 64px;
      text-align: left;
      @media (min-width: 800px) { padding: 120px var(--space-6x) 72px; }
    }
    & h2 { color: var(--color-grey-100); }
    & .features {
      color: var(--color-grey-100);
      font-size: var(--font-size-90);
      line-height: var(--space-6x);
    }
    & ul a:any-link {
      text-decoration: none;
      color: var(--color-grey-100);
      &:hover { color: var(--color-grey-00); }
    }
    & a[role="button"] { margin-top: var(--space-2x); }
    & picture {
      margin: var(--space-6x) 0 0;
      overflow: hidden;
      box-shadow: var(--box-shadow-l)
    }
    & img {
      width: auto;
      min-height: 100%;
    }
    &.screenshot--rtnm {
      display: block;
      padding: 4px;
      margin: var(--space-6x) 0;
      max-height: none;
      width: 100%;
      & picture {
        margin: 0;
        & img {
          width: 100%;
          min-height: auto;
        }
      }
    }

    @media (min-width: 600px) { margin: 72px auto 0; }

    &.screenshot--free {
      background: linear-gradient(315deg, var(--color-info-500), var(--color-cyan-500),  var(--color-success-500));
      max-height: none;

      @media (min-width: 980px) {
        grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
        max-height: 800px;
      }
    }
  }
}

.gem {
  & code[class*="language-"],
  & code[class*="language-"] * {
    font-size: var(--font-size-70);
    line-height: 1.8;
  }

  @media (min-width: 600px) {
    & code[class*="language-"],
    & code[class*="language-"] * {
      font-size: var(--font-size-100);
    }
  }
}

.testimonies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3x);
  justify-content: center;
  & blockquote {
    display: inline-block;
    border: 0;
    font-size: var(--font-size-80);
    line-height: 1.35;
    position: relative;
    padding: var(--space-3x);
    margin: 0 auto;
    text-wrap: pretty;
    max-width: 640px;
    text-shadow: 0 0 16px var(--color-grey-00);
    opacity: 0.9;
    & q { color: var(--color-grey-300); }
    & cite {
      display: inline-flex;
      align-items: center;
      gap: var(--space);
      margin-top: var(--space);
      font-weight: normal;
      font-family: var(--font-mono);
      font-size: var(--font-size-40);
      color: var(--color-grey-300);
      & .avatar { filter: grayscale(60%); }
    }
  }
  .public & {
    padding: 0 0 36px;
    margin-top: -36px;
    @media (min-width: 600px) {
      padding: 0 0 72px;
      margin-top: -72px;
    }
  }
}
main:has(.blog) {
  padding: 0;
}

.blog {
  position: relative;
  width: 100%;
  overflow: hidden;

  & > article {
    background: var(--color-grey-20);
    box-shadow: 0 0 0 1px var(--color-grey-50), var(--box-shadow-l);
    padding: var(--space-6x) 0 calc(var(--space) * 12);
    list-style-type: none;
    overflow: hidden;
    margin-top: var(--space-3x);
    margin-inline: calc(var(--space) * -2);
  }
  & .screenshot--preview {
    background: linear-gradient(135deg, var(--color-success-500), var(--color-cyan-500), var(--color-info-500) );
    & div { 
      padding-top: 72px;
      padding-bottom: 48px;
    }
    & h2 {
      max-width: 360px;
      margin: 0;
    }
    & .features {
      padding: var(--space) 0;
      font-size: var(--font-size-70);
      line-height: var(--space-4x);
    }
  }
}

.posts-list {
  margin-top: var(--space-6x);
  text-align: left;
  padding: 0;
  margin-inline: calc(var(--space) * -2);

  & .post {
    padding: calc(var(--space) * 5) var(--space-2x) var(--space-4x);
    & > time {
      display: inline-block;
      text-align: right;
      box-shadow: 0 0 0 1px var(--color-grey-100);
      font-size: var(--font-size-30);
      padding: 0 var(--space-1-2);
      align-self: start;
      justify-self: end;
      white-space: nowrap;
      margin-bottom: var(--space-2x);
    }

    & .post__title { 
      font-size: var(--font-size-120);
      line-height: var(--space-5x);
    }
  }

  & > li + li { border-top: 1px solid var(--color-grey-50); }
}

.posts-list__entry {
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  text-wrap: pretty;

  & .post__title + p { margin-top: -8px; }
}

.post {
  text-align: left;
  & time {
    color: var(--color-grey-300);
  }
  & header {
    padding: var(--space-4x) var(--space-2x) 0;

    & > * {
      display: block;
      width: 100%;
      max-width: 780px;
      margin-inline: auto;
    }

    & p.is-large {
      margin-top: var(--space-3x);
      text-wrap: pretty;
      max-width: 780px;

      @media (min-width: 800px) {
        font-size: var(--font-size-90);
        line-height: var(--space-5x);
      }
    }
  }
  & figure {
    margin: calc(var(--space) * 8) auto 0;
    padding: 0;
  }
  & figcaption {
    text-align: center;
    padding: var(--space) var(--space-2x);
    font-size: var(--font-size-40);
    color: var(--color-grey-300);
  }
  & ul {
    list-style-type: square;
    margin-top: var(--space);
    padding: 0 0 0 var(--space-3x);
    & ul { list-style-type: "– "; }
    & + * { margin-top: var(--space-3x); }
  }
  & ol {
    margin-top: 0;
    padding: var(--space) 0 0 24px;
    & ::marker {
      color: var(--color-grey-300);
      font-weight: 700;
    }
  }
  & ::marker { color: var(--color-grey-200); }
  & footer {
    margin: calc(var(--space) * 9) calc(var(--space) * -2) calc(var(--space) * -12);
    box-shadow: 0 -1px 0 0 var(--color-grey-50);
    background: var(--color-grey-35);
    padding: var(--space-2x);
    display: flex;
    justify-content: center;
    gap: var(--space-2x);

    & p { padding: 0 var(--space-2x); }
  }

  & .back {
    display: inline-block;
    text-decoration: none;

    &::before { content: "←"; }
    & span { text-decoration: underline; }
  }

  &.opensource {
    display: grid;
    padding-top: 0;

    & header,
    & .post__content {
      & a:any-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
    }

    & header div {
      padding: 0;
    }

    & a svg {
      fill: currentColor;
    }

    & .opensource__logo {
      margin: 0;
      fill: currentColor;
      width: 100%;
      height: 192px;
      display: flex;
      align-items: center;
      justify-content: center;
      fill: var(--color-info-200);
      background: linear-gradient(315deg, var(--color-purple-500), var(--color-info-500), var(--color-cyan-500) );
      & svg { width: 92px; }

      &.is-danger {
        background: linear-gradient(315deg, var(--color-orange-500), var(--color-danger-500), var(--color-purple-500) );
        fill: var(--color-danger-200);
      }
      &.is-warning {
        background: linear-gradient(315deg, var(--color-success-500), var(--color-warning-500), var(--color-orange-500));
        fill: var(--color-warning-200);
      }
      &.is-success {
        background: linear-gradient(315deg, var(--color-info-500), var(--color-cyan-500), var(--color-success-500));
        fill: var(--color-success-200);
      }
    }
  }
}

.header__author {
  color: var(--color-grey-300);
}

.header__author:first-of-type:before {
  content: "by ";
}

.header__author:has(+ .header__author)::after {
  content: " & ";
}

.header__author:has( + time):after {
  content: " /";
}

.post__title {
  text-wrap: balance;
  display: block;
}

.post__content {
  padding: 0 var(--space-2x);
  width: 100%;
  margin: var(--space-3x) 0 0;

  & strong {
    font-weight: 700;
    color: inherit;
  }
  & > * {
    max-width: 780px;
    margin-inline: auto;
  }

  & > * + * { margin-top: var(--space-3x); }

  & h2 {
    box-shadow: 0 1px 0 0 var(--color-grey-100);
    font-size: var(--font-size-100);
    & + ul { margin-top: var(--space-3x); }
  }
  & * + h2 { margin-top: var(--space-6x); }
  & h3 { margin-top: var(--space-6x); }
  & h2 + h3 { margin-tkl: var(--space-3x); }
  & > h3 + p,
  & > p + p {
    margin-top: 0;
  }
  & blockquote {
    margin-top: 0;
    text-indent: -0.6em;
    padding: 0;
    box-shadow: none;
    border: 0;
    font-size: var(--font-size-100);
    & p {
      color: var(--color-grey-400);
      &::before {
        content: "“ ";
        font-size: var(--font-size-120);
      }
    }
    & + p { margin-top: 0; }

    @​supports (hanging-punctuation: first) {
      text-indent: 0;
      hanging-punctuation: first;
    }
  }
  & code {
    background: var(--color-grey-00);
    box-shadow: 0 0 0 1px var(--color-grey-50);
    color: var(--color-cyan-500);
    padding: 0 4px;
  }
  & pre {
    display: block;
    max-width: calc(100% + calc(var(--space) * 4));
    padding: 0;
    margin-inline: calc(var(--space) * -2);
    text-align: center;

    code {
      display: inline-block;
      min-width: 100%;
      max-width: 100%;
      padding: var(--space-2x);
      background-color: var(--color-grey-00);
      box-shadow: 0 0 0 1px var(--color-grey-50), var(--box-shadow-m);
      color: var(--color-grey-500);
      white-space: pre;
      font-size: var(--font-size-40);
    }
  }
  & table {
    box-shadow: 0 0 0 1px var(--color-grey-50), var(--box-shadow-m);
    font-size: var(--font-size-50);
    line-height: var(--space-3x);
    thead { background-color: var(--color-grey-50); }
    & th { text-align: left; }
    & tbody tr { box-shadow: 0 -1px 0 0 var(--color-grey-50); }
    & td { color: var(--color-grey-400); }
  }
  & ul { padding: calc(var(--space) - 2px) 0 calc(var(--space-2x) + 2px); }
  & [role="alert"] { line-height: var(--space-3x); }
}

.post__cover,
.post__content img {
  margin-top: 0;
  width: 100%;
}

.post__author {
  display: flex;
  gap: 16px;
  padding: var(--space-3x) var(--space-2x) var(--space);
  align-items: flex-start;
  background-color: var(--color-grey-35);
  margin-top: var(--space-6x);
  font-size: var(--font-size-40);
  line-height: var(--space-3x); 

  & > img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
  }

  & h2 { 
    font-size: var(--font-size-60);
    line-height: 24px;
    box-shadow: none;
    margin: 0;
    padding: 0;
    & span { letter-spacing: 0; }
  }
  & h2 + h3 {
    font-size: var(--font-size-40);
    font-weight: 400;
    color: var(--color-grey-300);
    line-height: 24px;
    box-shadow: none;
    margin: 0;
    padding: 0;
  }
  & .post__author_links {
    margin: 8px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }
}

.changelog .posts-list__entry {
  margin-top: 0;
  & ul {
    margin: 0;
    padding-left: 16px;
  }
}

.doc-index {
  & h3 {
    padding-bottom: 0;
    & a::after {
      content: "→";
      margin-left: 4px;
      display: inline-block;
      text-decoration: none;
    }
  }
  .doc-index-link {
    display: none;
    & ::before {
      content: "←";
      margin-right: 4px;
      display: inline-block;
      text-decoration: none;
    }
  }
}

.doc__aside {
  padding: 0 var(--space-2x);
  nav { display: none; }
}

.line-separator { color: var(--color-grey-200); }

@media (min-width: 812px) {
  .post__title {
    font-size: var(--font-size-140);
  }

  .blog > article {
    margin-inline: 0;
    &.doc {
      display: grid;
      grid-template-columns: 200px 1fr 200px;
      overflow: unset;
    }
  }

  .posts-list {
    padding: 0 var(--space-3x);
    margin-inline: 0;
    & li + li { border-top: none; }
    & .post {
      display: grid;
      grid-template-columns: 1fr minmax(600px, 780px) 1fr;
      gap: var(--space-3x);
      padding: 0;
      > time { margin-top: 50px; }
    }
    & .posts-list__entry {
      border-left: 2px dashed var(--color-grey-50);
      position: relative;
      padding: var(--space-4x) 0 var(--space-3x) var(--space-3x);
      &::before {
        content: "";
        width: 8px;
        height: 8px;
        background-color: var(--color-grey-20);
        box-shadow: inset 0 0 0 2px var(--color-grey-200);
        position: absolute;
        left: -5px;
        top: 58px;
        transform: rotate(45deg);
      }
    }
    & .post__title { 
      font-size: var(--font-size-100);
      line-height: var(--space-4x);
    }
  }

  .post__content {
    font-size: var(--font-size-60);
    line-height: var(--space-4x);

    & code { font-size: 1em; }

    & pre {
      margin-top: var(--space-2x);
      line-height: var(--space-3x);
      code { min-width: calc(780px + calc(var(--space) * 4)); }
    }
  }

  .changelog {
    & .posts-list__entry::before { top: 40px; }
    & .posts-list .post > time { margin-top: calc(var(--space) * 4); }
  }

  .doc-index-link { display: none; }

  .doc__aside {
    padding: calc(var(--space) * 3) var(--space-4x);
    line-height: 32px;
    position: sticky;
    top: 0;
    align-self: start;
    nav { display: block; }
    & ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    & .is-h4 {
      color: var(--color-grey-300);
      margin: calc(var(--space) * 7) 0 0;
      padding: 0;
    }
  }
}
.opensource-directory {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: var(--space-3x);
  & > * { width: 100%; }
  & .card {
    display: flex;
    flex-direction: column;
  }
  & h2 {
    font-size: var(--font-size-50);
    line-height: var(--space-3x);
    margin: 0;
    padding: var(--space) 0;
  }
  & p { text-wrap: balance; }
  & svg {
    height: var(--space-5x);
    max-width: 300px;
    fill: var(--color-success-500);
  }
  & footer {
    margin-top: auto;
    padding: var(--space) var(--space-2x);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3x);
    & a:any-link {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    & svg {
      fill: var(--color-grey-300);
      width: var(--space-2x);
      &.icon--rorvswild {
        fill: none;
        stroke: var(--color-grey-300);
        stroke-width: 3;
      }
    }
  }
  & .opensource-directory__add {
    border: 4px dashed var(--color-grey-100);
    position: relative;
    display: block;
    padding: 0;
    min-height: 120px;
    color: var(--color-grey-100);
    & > a {
      text-decoration: none;
      font-size: 90px;
      color: inherit;
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 0 var(--space-3x);
    }
    &:hover {
      color: var(--color-grey-200);
      border-color: var(--color-grey-200);
    }
  }

  @media (min-width: 600px) {
    & > * {
      max-width: calc((100% / 2) - (var(--space-3x) / 2));
    }
  }

  @media (min-width: 980px) {
    & > * {
      max-width: calc((100% / 3) - var(--space-2x));
    }
  }
}

.opensource-conditions ul {
  list-style-type: square;
  margin: 0 0 0 var(--space-2x);
}

.contributions ul {
  display: flex;
  gap: var(--space-3x);
  flex-wrap: wrap;
  margin-top: var(--space-6x);
}

.contributions .card {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, var(--box-shadow-l);
  border-radius: 2px;
  width: 100%;
  display: flex;
  flex-direction: column;

  & a:any-link {
    color: inherit;
    text-decoration-color: inherit;
    font-weight: 700;
    color: var(--color-grey-100);
    text-decoration-color: var(--color-grey-200);
    &:hover {
      color: var(--color-grey-00);
      text-decoration-color: var(--color-grey-100);
    }
    & svg {
      width: 48px;
      height: 48px;
      opacity: 0.6;
      fill: currentColor;
    }
  }
  & h3 {
    color: inherit;
    font-size: 1rem;
    line-height: var(--space-3x);
    padding: var(--space);
    margin: 0;
  }
  & p { text-align: left; }
  &.is-info {
    background: linear-gradient(315deg, var(--color-purple-500), var(--color-info-500), var(--color-cyan-500));
    color: var(--color-info-200);
  }
  &.is-danger {
    background: linear-gradient(315deg, var(--color-orange-500), var(--color-danger-500), var(--color-purple-500));
    color: var(--color-danger-200);
  }
  &.is-warning {
    background: linear-gradient(315deg, var(--color-success-500), var(--color-warning-500), var(--color-orange-500));
    color: var(--color-warning-200);
  }
  &.is-success {
    background: linear-gradient(315deg, var(--color-info-500), var(--color-cyan-500), var(--color-success-500));
    color: var(--color-success-200);
  }
  & footer {
    margin-top: auto;
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2);
    & a:any-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      & svg {
        height: 16px;
        width: 16px;
      }
    }
  }
  @media (min-width: 600px) { max-width: calc((100% / 2) - (var(--space-3x) / 2)); }
  @media (min-width: 980px) { max-width: calc((100% / 4) - (var(--space-3x) * 3 / 4)); }
}
.theme__colors {
  display: flex;
  width: 100%;
  margin-top: var(--space-6x);
}
  
.theme__color {
  display: inline-block;
  padding: 12px var(--space-3x);
  margin: 12px;
  font-size: var(--font-size-50);
  background: var(--color-grey-50); 
}
.theme--red { color: var(--color-danger-500); }
.theme--orange { color: var(--color-orange-500); }
.theme--yellow { color: var(--color-warning-500); }
.theme--green { color: var(--color-success-500); }
.theme--cyan { color: var(--color-cyan-500); }
.theme--blue { color: var(--color-info-500); }
.theme--purple { color: var(--color-purple-500); }
.theme--fushia { color: var(--color-fuschia-500); }
.theme--grey { color: var(--color-grey-500); }
  
.title--theme {
  & > span {
    background: var(--color-grey-50);
    color: var(--color-grey-700);
  }
  & .theme-dark { padding: 0 0 0 var(--space); }
  & .theme--light { padding: 0 var(--space) 0 0; }
}
  
.theme-cta {
  padding: 96px var(--space-3x);
  margin: 96px 0;
  background: linear-gradient(90deg, var(--color-danger-500), var(--color-orange-500),  var(--color-warning-500), var(--color-success-500),  var(--color-cyan-500),  var(--color-info-500),  var(--color-purple-500),  var(--color-fuschia-500));
  box-shadow: var(--box-shadow-l);

  & h2 {
    margin: 0 auto;
    max-width: 600px;
  }
  & p { max-width: 600px; }
  & a[role="button"] { margin-top: var(--space-6x); }
}

.theme-list {
  padding: var(--space-6x) 0;
  display: block;
  margin: 0 auto;

  & a:any-link {
    color: inherit;
    font-weight: 700;
  }
  & h2 { margin: 0 auto; }
  & h3 { color: var(--color-grey-500); }
  & svg {
    stroke-width: 0;
    width: 72px;
    height: 72px;
    margin: 0 auto;
    overflow: visible;
    display: block;
  }
}

.feature--theme {
  margin: var(--space-3x) 0;
  padding: var(--space-6x) 0 0;
  position: relative;
  font-size: var(--font-size-70);

  & svg {
    padding: 12px;
    text-align: center;
    vertical-align: middle;
    fill: currentColor;
    fill-opacity: 0.5;
    & path {
      transform-origin: 50% 50%;
      fill: var(--color-grey-500);
    }
  }
}

.feature--theme__header { padding: 0 0 var(--space-3x); }

.feature--theme__version-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
  
.feature--theme__version {
  color: var(--color-grey-300);
  padding: var(--space-3x);
  margin: 0;
  text-align: center;
  flex: 1;
  min-width: 240px;
  line-height: var(--space-4x);
  border-top: var(--space-1-2) solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, var(--color-danger-500), var(--color-orange-500),  var(--color-warning-500), var(--color-success-500),  var(--color-cyan-500),  var(--color-info-500),  var(--color-purple-500),  var(--color-fuschia-500));
  background: var(--color-grey-50);

  & a:any-link {
    background: linear-gradient(to right, var(--color-danger-500), var(--color-orange-500),  var(--color-warning-500), var(--color-success-500),  var(--color-cyan-500),  var(--color-info-500),  var(--color-purple-500),  var(--color-fuschia-500));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    margin: 0 12px;
  }
}

@media (min-width: 980px) {
  .container--theme { grid-template-columns: 1fr 1fr; }
  .theme__color {
    font-size: var(--font-size-90);
    padding: var(--space-3x);
  }
}
main {
  width: 100%;
  padding: 0 12px var(--space-3x);
  max-width: 1520px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-3x);

  & a:any-link {
    text-decoration: underline;
    text-decoration-color: var(--color-grey-300);
    text-decoration-thickness: 1px;
    text-underline-offset: 1px;
    font-weight: 700;
    color: var(--color-grey-700);
    &:hover {
      color: var(--color-grey-800);
      text-decoration-color: var(--color-grey-500);
    }
  }

  & .container {
    overflow: visible;
    padding: 0;
    position: relative;
    width: 100%;
    margin: var(--space-6x) auto 0;
  }

  &.app {
    display: grid;
    gap: var(--space-3x);
    position: relative;
    & > header {
      padding: 0;
      width: 100%;
      max-width: 100%;
      & h2 { margin: var(--space-3x) 0 0; }
    }
    & h2 + p {
      color: var(--color-grey-400);
      margin: calc(var(--space) * -2) 0 0;
      font-size: var(--font-size-60);
      width: auto;
      -ms-word-break: break-all;
      word-break: break-all;
      word-break: break-word;
    }
  }

  &.settings {
    margin-top: var(--space-3x);
    display: grid;
    gap: var(--space-3x);
    width: 100%;

    & .api-key {
      color: var(--color-grey-500);
    }

    & .card { 
      align-self: start;
      &.webhooks {
        & [role="alert"] + * { margin-top: var(--space-3x); }
          
        & fieldset {
          margin: var(--space-3x) calc(var(--space) * -2) calc(var(--space) * -3);
          border-width: 1px 0 0;
          padding: var(--space-2x) var(--space-2x) var(--space-3x);
          background-color: var(--color-grey-35);
          position: relative;
        }
        & ul {
          margin: 0;
          &:has(li) {
            margin: 0 0 var(--space-3x);
          }
        }
        & li { 
          display: flex;
          gap: var(--space);
          align-items: center;
          padding: var(--space-2x) 0;
          border-bottom: 1px solid var(--color-grey-100);
          word-break: break-all;
        }
        & form.button_to {
          margin-left: auto;
          word-break: keep-all;
          & > * + * { margin-top: 0; }
        }
        & .new_webhook {
          margin-top: 0;
          & [role="group"] {
            margin-top: 0;
          }
        }
      }
      & footer {
        margin-top: var(--space-4x);
      }
    }
  }

  @media (min-width: 420px) {
    padding: 0 var(--space-3x) var(--space-3x);
  }

  @media (min-width: 980px) {
    display: grid;
    grid-template-columns: auto;
    gap: var(--space-3x);

    &.app { grid-template-columns: 1fr 340px; }
    &.settings { 
      grid-template-columns: 1fr 1fr;
    }

    &.app > header,
    &.settings > header {
      grid-column: 1 / span 2;
    }

    & .container { 
      grid-template-columns: repeat(4, 1fr);
      &.features {
        margin-top: 72px;
        grid-template-columns: repeat(5, 1fr);
        &.features--jobs {
          grid-template-columns: repeat(6, 1fr);
        }
      }
      &.infinite { grid-template-columns: repeat(4, 1fr); }
    }
  }
}
body > header {
  text-align:center;
  padding: 0 12px;
  overflow:hidden;

  & h1,
  & .is-h1,
  & h2,
  & .is-h2 {
    margin: 72px auto 0;
    word-spacing: -2px;
    letter-spacing: -0.05em;
    display: block;
  }

  @media (min-width: 600px) { padding: 0 var(--space-3x); }
}

.header__menu {
  text-align: right;
  padding: var(--space-2x) 0;
}

header.app {
  --gradient-top-grey-10: linear-gradient(180deg, var(--color-grey-35), var(--color-grey-50));
  background: var(--gradient-top-grey-10);
  box-shadow: 0 1px 0 0 var(--color-grey-00) inset, 0 1px 0 0 var(--color-grey-100), var(--box-shadow-m);
  min-height: var(--space-6x);
  line-height: var(--space-6x);
  width: 100%;
  padding: 0;
  margin: 0;
  text-align:left;
  overflow: visible;

  .theme-dark & {
    --gradient-top-grey-10: linear-gradient(180deg, var(--color-grey-50), var(--color-grey-35));
    box-shadow: 0 1px 0 0 var(--color-grey-100) inset, 0 1px 0 0 var(--color-grey-00), var(--box-shadow-m);
  }

  @media (prefers-color-scheme: dark) {
    :root:not(.theme-light) & {
      --gradient-top-grey-10: linear-gradient(180deg, var(--color-grey-50), var(--color-grey-35));
      box-shadow: 0 1px 0 0 var(--color-grey-100) inset, 0 1px 0 0 var(--color-grey-00), var(--box-shadow-m);
    }
  }

  .width-limiter {
    display: grid;
    grid-template-columns: var(--space-6x) auto auto;
    grid-template-areas:
    "logo app account"
    "app-nav app-nav app-nav";

    @media (min-width: 980px) {
      grid-template-columns: var(--space-6x) auto 1fr auto;
      grid-template-areas:
      "logo app app-nav account";
    }

    & > [role="button"] {
      display: block;
      box-shadow: none;
      font-size: var(--font-size-50);
      line-height: var(--space-6x);
      font-weight: 700;
      padding: 0;
      margin: 0 var(--space-3x) 0 0;
      text-transform: none;
      text-align: left;
      letter-spacing: 0;
      color: var(--color-grey-500);
      &:hover {
        box-shadow: none;
        color: var(--color-grey-700);
      }
    }
  }

  & a.logo {
    grid-column: 1 / span 1;
    margin: 0 var(--space-2x) 0 0;
    vertical-align: middle;
    height: var(--space-6x);
    width: var(--space-3x);
    line-height: 46px;
    color: inherit;
    text-align: center;
    display: inline-block;
  
    + .badge { margin: 12px 12px 0 0; } 
  }
  
  & svg.logo {
    height: 20px;
    fill: none;
    stroke: var(--color-grey-500);
    stroke-miterlimit: 10;
    stroke-width: 2.5;
    stroke-linecap: square;
    &:hover { stroke: var(--color-grey-700); }
  }
  
  & .menu {
    grid-area: app-nav;
    display: flex;
    margin: 0;
  }

  & .menubutton {
    & > button {
      padding: 0 calc(var(--space) + var(--space-1-2)) 0 0;
      margin-top: var(--space-1-2);
      box-shadow: none;
      &:hover,
      &[aria-expanded="true"] { 
        background: transparent;
        box-shadow: none;
      }
      &::after {
        right: 0;
      }
    }
    & li { 
      line-height: var(--space-3x);
      & > a {
        display: grid;
        gap: var(--space-2x);
      }
      & .avatar-group {
        display: inline-flex;
        margin-left: auto;
        width: 46px;
      }
    }
    & .is-link {
      color: var(--color-grey-600);
      line-height: var(--space-3x);
      
    
      &:hover { color: var(--color-grey-700); }
    
      & * {
        line-height: var(--space-3x);
        height: var(--space-3x);
        display: inline-block;
      }
    }
    &.user-nav {  
      margin: 0 0 0 auto;
      height: var(--space-6x);
      grid-area: account;
    }
  }
}

.applications-drop-down-list {
  grid-area: app;
  margin: 0;

  & button { 
    margin-right: var(--space-2x);
    & span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 248px;
      display: block;
    }
  }
}
nav.menu {
  padding: 0;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

.menubutton {
  & button,
  & button.is-link {
    color: var(--color-grey-800);
    font-size: var(--font-size-50);
    letter-spacing: 0;
    text-decoration: none;
    text-transform: none;
  }

  & button svg {
    width: var(--space-3x);
    height: var(--space-3x);
    stroke-width: 3;
    transition: all .2s cubic-bezier(0,0.1,0.5,1);
    position: relative;
    top: 1px;
  }
  &:hover button svg { stroke: var(--color-grey-700); }

  & button.is-link:hover { color: var(--color-grey-900); }



  & [role="menu"] {
    width: auto;
    min-width: 120px;
    max-width: 340px;
    & small {
      line-height: var(--space-2x);
      margin: var(--space) 0;
      display: block;
    }
  }

  & [role="menuitem"] {
    &:any-link:not(.button) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: flex;
      font-weight: 400;
    }

    &:any-link.button {
      margin: 0 var(--space-2x);
      &.is-reset:hover {
        color: var(--color-grey-00);
      }
    }
  }

  &.is-right { text-align: right; }

  &.date-range > button {
    width: 340px;
    text-align: left;
    justify-content: flex-start;
  
    & .badge {
      text-transform: uppercase;
      top: -2px;
    }

    &[aria-haspopup]:after {
      right: 16px;
    }
  }
}

[role="menubar"] {
  grid-area: current;
  display: flex;
  gap: var(--space-2x);
  margin: 0;
  height: var(--space-6x);

  & li { display: flex; }
  & [role="menuitem"]:not(.button) {
    margin: 0;
    padding: 12px 0;
    display: block;
    text-align: left;
    width: auto;
    line-height: var(--space-3x);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--font-size-30);
    font-weight: 700;
    color: var(--color-grey-300);
    &:hover { color: var(--color-grey-700); }
  }
  & [role="menuitem"].active {
    box-shadow: 0 -2px 0 0 var(--color-grey-500) inset;
    color: var(--color-grey-700);
    font-weight: 700;
  }
}

@media (min-width: 980px) {
  nav.menu {
    width: 100%;
    display: block;
  }

  [role="menubar"] {
    padding: 0;
    margin:0;
    height: var(--space-6x);
    width: auto;
    box-shadow: none;
  }
}
.avatar-group {
  margin: 0;
  padding: 0;
  align-items: center;

  & li {
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    & + li { margin-left: -2px; }

    & span {
      background: var(--color-grey-20);
      color: var(--color-grey-500);
      font-size: var(--font-size-10);
      line-height: var(--space-3x);
      font-weight: 400;
      box-shadow: 0 0 0 1px var(--color-grey-50) inset, var(--box-shadow-s);
    }
  }
}
.site-footer {
  width: 100%;
  margin: 48px 0 0;
  padding: 72px 0 var(--space-4x);
  text-align: center;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
  border-top: 1px solid var(--color-grey-35);

  & .grid-auto {
    text-align: left;
    max-width: 1520px;
    margin: 0 auto;
    padding: 0 var(--space-3x);
    line-height: 32px;
    @media (min-width: 800px) {
      padding: 0 var(--space-3x);
    }
    @media (max-width: 420px) {
      padding: 0 12px;
    }
  }

  & .is-h4 { padding: 0; }
  
  & :any-link {
    color: var(--color-grey-500);
    text-decoration-color: var(--color-grey-300);
    text-decoration-thickness: 1px;
    text-underline-offset: 1px;
    white-space: nowrap;
    display: inline-block;
    &:hover { 
      color: var(--color-grey-700);
      text-decoration-color: var(--color-grey-500);
    }
  }

  & .link--theme {
    background: linear-gradient(to right, var(--color-danger-500), var(--color-orange-500), var(--color-warning-500), var(--color-success-500), var(--color-cyan-500), var(--color-info-500), var(--color-purple-500), var(--color-fuschia-500));  
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    &:hover {
      -webkit-text-fill-color: var(--color-grey-700);
    }
  }

  & .logo {
    display: block;
    fill: none;
    stroke: var(--color-grey-400);
    stroke-width: 2.5;
    width: var(--space-6x);
    height: var(--space-6x);
    margin: 24px auto 0;
    padding: 12px;
    transition: all 0.3s ease-in-out;
    &:hover { stroke: var(--color-grey-700); }
  }
}

.footer__credit {
  display: block;
  color: var(--color-grey-300);
  font-size: var(--font-size-40);
  margin-top: var(--space);
}
.dashboard {
  & th,
  & td {
    &.number { text-align: right; }
  }
  & .status {
    display: inline-block;
    width: var(--space);
    height: var(--space);
    margin-right: var(--space-1-2);
    background: var(--color-danger-500);
  }
  & .owner {
    display: inline-flex;
    width: 38px;
    .avatar { margin-left: var(--space); }
  }
  & .empty { 
    color: var(--color-grey-300);
    & p {
      padding: 0 0 var(--space);
      color: var(--color-grey-400);
    }
  }
  & .consumption {
    margin-left: auto;
    padding-left: var(--space-3x);
  }
}
.table-section {
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  margin: 0;

  & .is-h4 {
    padding: 12px var(--space-2x);
    text-align: center;
  }

  &.noresult { color: var(--color-grey-300); }

  & + .table-section {
    margin-top: var(--space-3x);
  }

  & .noresult { padding: 0 0 8px; }

  & .select {
    position: relative;
    display: flex;
    vertical-align: middle;
    float: right;
    margin: 0;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
  
    & small {
      font-size: var(--font-size-10);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
  
    & select {
      font-size: var(--font-size-20);
      font-weight: 700;
      height: var(--space-3x);
      line-height: var(--space-3x);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 0 30px 0 12px;
      margin: -1px 0 1px 4px;
      display: inline-block;
      width: auto;
      min-height: 0;
      position: relative;
      border: 0;
    }
  }

  & > small,
  & form > small {
    padding: 0 var(--space-2x);
    display: block;
  }

  & footer {
    background: transparent;
    box-shadow: 0 -1px 0 0 var(--color-grey-35);
    margin: 0;
    padding: 12px var(--space-2x);
    width: 100%;
  }

  @media (max-width: 420px) {
    margin-inline: -12px;
    width: calc(100% + 24px);
    max-width: calc(100% + 24px);

    & th, & td {
      padding-inline: 12px;
    }
  }

}

table {
  position: relative;
  border-collapse: collapse;

  & pre,
  & pre[class*="language-"],
  & code[class*="language-"] {
    min-height: 24px;
    padding: 0;
    background: transparent;
    width: 100%;
  }

  & span.error {
    padding: 0;
    margin-left:4px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--color-danger-500);
    word-break: keep-all;
    white-space: nowrap;
  
    & small.title {
      margin-right:4px;
      text-transform: uppercase;
      color: var(--color-grey-500);
      font-weight: 400;
      letter-spacing: 0.05em;
      display: none;
    }
  }
}

tr { transition: all 0.25s ease-in-out; }

th {
  color: var(--color-grey-400);
  font-size: var(--font-size-10);
  letter-spacing: 0.06em;
  font-weight: 400;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: top;

  &[scope="row"] {
    color: var(--color-grey-800);
    font-size: var(--font-size-50);
    letter-spacing: 0;
    text-overflow: none;
    text-transform: none;
    white-space: normal;
    word-break: break-all;
  }

  &.active,
  &.active a {
    font-weight: 400;
  }
}

td {
  padding: 12px var(--space-2x);
  vertical-align: top;

  &.date { color: var(--color-grey-400); }

  &.active { background: lch(from var(--color-grey-500) l c h / 0.04); }

  & .file { display: inline-block; }
}

.col--percentile { 
  position: relative;

  & span { color: var(--color-info-500); }

  &.runtime span { margin-right: 0; }
}

.averagecol span { color: var(--color-grey-500); }
.throughputcol span { color: var(--color-success-500); }
.errorcol span { color: var(--color-danger-500); }
.sort .col--percentile span { 
  position: relative; 
  margin-right: var(--space-2x); 
}

.error[scope="row"] {
  line-height: var(--space-3x);
  padding: 12px var(--space-2x);

  & a:any-link {
    font-weight: 400; 
    color: var(--color-grey-400); 
    text-decoration: none;
    
    & strong {
      color: var(--color-danger-500);
      font-weight: 700;
      text-decoration: underline;
      text-decoration-color: var(--color-danger-400);
      text-decoration-thickness: 1px;
    }

    &:hover strong {
      color: var(--color-danger-600);
      text-decoration-color: var(--color-danger-400);
    }
  }

  & .file-line {
    display: block;
    font-weight: 400;
    word-break: break-all;
    white-space: normal;
    margin-left: 0;
    text-decoration: none;
  }

  &:hover {
    & .file { color: var(--color-grey-800); }
    & .line-number {
      background: var(--color-grey-100);
      color: var(--color-grey-800);
    }
  }
}

.table--params {
  display: table;
  table-layout: fixed;

  & tr {
    display: flex;
    flex-direction: column;
  }

  & td {
    line-height: var(--space-3x);
    padding: 12px var(--space-2x);
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  & .key {
    font-size: var(--font-size-20);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--color-grey-400);
    padding-bottom: 0;
  }

  & .value { padding-top: 0; }
}

.table--queries {
  & [scope="row"] { display: flex; }

  & .kind {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--font-size-20);
    line-height: var(--space-2x);
    color: var(--color-grey-500);
    background: var(--color-grey-100);
    padding: 0;
    margin: var(--space-1-2) var(--space) 0 0;
    width: 44px;
    height: var(--space-2x);
    text-align: center;
    display: inline-block;
    white-space: nowrap;
    text-decoration: none;
  }

  & .file {
    font-weight: 400;
    color: var(--color-grey-500);
    flex: 1;
    user-select: all;
    -webkit-user-select: all;
  }

  & .is-toggle {
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    &:hover { color: var(--color-grey-900); }

    & .file {
      color: var(--color-grey-700);
      font-weight: 700;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 1px;
      text-decoration-color: var(--color-grey-300);
    }

    & .code { position: relative; }

    &:hover {
      & .file {
        color: var(--color-grey-900);
        text-decoration-color: var(--color-grey-500);
      }
      & .line-number {
        color: var(--color-grey-800);
        background: var(--color-grey-100);
      }
      & .kind {
        background-color: var(--color-info-200);
        color: var(--color-info-700);
      }
    }

    &.is-open {
      & .kind {
        background-color: var(--color-info-200);
        color: var(--color-info-700);
      }
    }
  }

  & .row--code {
    background-color: var(--color-grey-00);
    position: relative;

    & dl {
      display: inline-flex;
      justify-items: flex-start;
      flex-wrap: wrap;
      text-align: left;
      gap: 8px 24px;
      padding: 0;
      margin: 0;
      position: relative;

      & + pre { margin-top: 16px; }

      &:before,
      &:after {
        background-color: var(--color-grey-00);
        content: '';
        display: block;
        position: absolute;
        top: -18.5px;
        left: 6px;
        width: 8px;
        height: 8px;
        transform: rotate(45deg);
      }
      &:before { background-color: var(--color-grey-35); }
      &:after { top: -17px; }

      @media (min-width: 980px) {
        text-align: right;
        justify-items: flex-end;

        &:before,
        &:after  {
          left: auto;
          right: 8px;
        }
      }
    }
    & dt {
      text-transform: uppercase;
      color: var(--color-grey-300);
      font-weight: 400;
      font-size: var(--font-size-10);
      letter-spacing: 0.06em;
      white-space: nowrap;
    }
    & dd {
      font-weight: 700;
      display: block;
      & small { margin-left: 2px; }
    }
  }
}

.table--responsive { 
  & thead th:first-of-type { text-align: left; }

  & tbody,
  & tr,
  & th {
    text-align: left;
    white-space: normal;
    width: 100%;
  }

  & tr {
    display: flex;
    flex-wrap: wrap;
  }

  & td {
    flex: 1;
    text-align: left;
    display: inline-block;
    line-height: 24px;
  }

  & .row--hidden { display: none; }
}

@media (min-width: 980px) {
  td.date,
  td.number {
    text-align: right;
    line-height: 24px;
    white-space: nowrap;
    width: 0;
    vertical-align: top;
    word-spacing: -3px;
  }
  
  .table--responsive { 
    & tr { display: table-row; }

    & th,
    & td {
      display: table-cell;
      word-break: break-all;
    }

    & thead th { white-space: nowrap; }

    & [scope="row"] {
      background: transparent;
      text-align: left;
      text-transform: none;
      letter-spacing: 0;
      font-size: var(--font-size-50);
      width: 100%;
      word-break: break-all;
      white-space: normal;
      color: var(--color-grey-700);
      padding-bottom: 12px;

      &.error {
        word-break: keep-all;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        max-width: 300px;
      }
    }

    & td {
      flex: none;
      text-align: right;
      display: table-cell;
      margin-bottom: 0;
    }
  }

  .table--params {
    & tr { display: table-row; }
    & .value { 
      width: 75%;
      padding-top: 12px;
    }
    & .key { 
      width: 25%;
      padding-bottom: 12px;
    }
  }
}
.breakdown {
  display: flex;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  
  & li {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--font-size-20);
    background: var(--color-grey-35);
    box-shadow: 0 0 0 1px var(--color-grey-100) inset;
    white-space: nowrap;
    overflow: hidden;
    &:nth-child(1) { background: var(--color-grey-100); }
    &:nth-child(2) { background: var(--color-grey-50); }
  
    & > span {
      padding: 0 var(--space-1-2);
      display: block;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  
      & span {
        padding: 0 0 0 var(--space-1-2);
        display: inline-block;
        letter-spacing: 0;
        font-weight: 700;
      }
    }
  }

  & + table { margin: 1px 0 0; }
}
.distribution {
  background: var(--color-info-100);
  box-shadow: 0 -2px 0 0 var(--color-info-500);
  display: inline-block;
  overflow: hidden;
  text-align: left;
  position: absolute;
  top: calc(50% - 12px);
  height: var(--space-3x);
  right: var(--space-2x);
  width: var(--space-1-2);

  & > div {
    background: var(--color-grey-50);
    box-shadow: 0 -2px 0 0 var(--color-grey-300);
    height: 1px;
    display: inline-block;
    width: 4px;
    position: absolute;
    bottom: 0;
  }

  & .p95 {
    background: var(--color-info-100);
    box-shadow: 0 -2px 0 0 var(--color-info-500);
  }
}
.charts {
  user-select: none;
  -webkit-user-select: none;
  width: 100%;
  padding: 0;

  & h4 .badge.is-info {
    font-size: var(--font-size-20);
    margin-left: 4px;
    color: var(--color-info-500);
  }

  & h5 {
    display: block;
    position: relative;
    font-size: var(--font-size-90);
    letter-spacing: 0;
    font-weight: 700;
    line-height: var(--space-3x);
    height: var(--space-3x);
    padding: 0;
    margin: 0;
  
    & small {
      position: absolute;
      white-space: nowrap;
      display: inline-block;
      text-transform: none;
      text-align: left;
      margin-left: 2px;
      width: var(--space-3x);
      top: 5px;
    }

    &.is-loading {
      color: var(--color-grey-200);
    }
  }

  & .badge {  
    &.is-last {
      position: absolute;
      left: auto;
      top: 0;
      right: 0;
      font-size: var(--font-size-20);
      background: var(--color-warning-100);
      color: var(--color-warning-700);
      box-shadow: none;
      font-weight: 400;
      border-radius: 0 0 0 4px;
    }
  }

  & .card {
    height: 160px;
    padding: 12px 0 0;
    text-align: center;
    margin: 0;
    position: relative;
    overflow: visible;

    &.is--auto {
      height: auto;
      min-height: 80px;
    }

    &.m-hidden { display: none; }

    &.charts--err {
      height: auto;
      min-height: 0;
    }
  }

  & .card--date {
    height: auto;
    padding: 12px var(--space-2x);
  }

  & .date-nav {
    height: auto;
    grid-column: 1 / -1;
  }

  & div.plottable {
    margin: 12px 0 0;
    cursor: col-resize;
    overflow: visible;
  }

  & div.errors--histogram {
    cursor: pointer;
    height: 72px;
    width: 100%;
    display: block;
    margin: 8px 0 0;
  }

  & div[data-synchronize-chart="Runtime"],
  & div[data-synchronize-chart="Throughput"],
  & div[data-synchronize-chart="Error"],
  & div[data-ariato="RorVsWild.Chart.Error"] {
    height: 88px;
  }
}

main.app .charts__content {
  display: grid;
  gap: var(--space-3x);
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--space) * 30), 1fr));
  width: 100%;
  position: sticky;
  top: var(--space-3x);
}

.charts .is-h4,
.bars h4 {
  padding: 0;
}

.charts--p95 h5 { color: var(--color-info-500); }
.charts--thr h5 { color: var(--color-success-500); }
.charts--err h5 { color: var(--color-danger-500); }

.charts__title-row {
  display: flex;
  justify-content: center;

  & > * + * {
    border-left: 1px solid var(--color-grey-50);
    padding-left: var(--space-2x);
    margin-left: var(--space-2x);
  }
}

.date-nav {
  & nav { 
    margin: 12px 0 0;
    &[role="group"].is-block > * { flex: auto; }

    & .blank {
      width: 50%;
      height: 24px;
      display: block;
      background-color: var(--color-grey-35);
    }
  }
  & :any-link[role="button"] svg {
    width: var(--space-2x);
    height: var(--space-2x);
    stroke-width: 4;
  }
  & a[role="button"] {
    &:not(.is-last) {
      margin-top: 0;
      text-transform: none;
      letter-spacing: 0;
      padding: 0 var(--space-1-2);
      font-size: var(--font-size-30);
      width: calc(50% - 24px);
    }
    &.is-last {
      width: 24px;
      max-width: 24px;
      margin-top: 0;
      padding: 0;
    }
  }
  & time .badge {
    font-size: var(--font-size-10);
    text-transform: uppercase;
    position: relative;
    top: -2px;
  }
  & + .charts--err { grid-column: 1 / -1; }
}

.date-nav .date,
.card--date .date {
  font-weight: 700;
  display: block;
  text-align: center;
}

@media (min-width: 980px) {
  .charts {
    padding: 0;
    margin: 0 0 var(--space-3x) 0;
    order: 2;
    display: flex;
    width: 340px;
    min-width: 340px;
    flex-direction: column;

    & .card.m-hidden { display: block; }
  }
}
.plottable {
  display: block;
  pointer-events: visibleFill;
  position: relative;
  width: 100%;
  height: 100%;
  fill: none;

  & .background-container,
  & .content,
  & .foreground-container {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
  }
  & .component { position: absolute; }

  & .selection-box-layer {
    & .selection-area {
      fill: var(--color-grey-100);
      fill-opacity: 0.1;
      stroke: var(--color-grey-400);
      stroke-width: 1;
      height: 100px;
    }
    & .drag-edge-lr {
      stroke-width: 1;
      stroke: var(--color-grey-700) !important;
      opacity: 1 !important;
      cursor: pointer;
    }
  }
  & .area-plot path { fill-opacity: 0.03; }
  & .baseline,
  & .bar-plot .baseline {
    stroke: var(--color-grey-50);
    stroke-width: 0;
  }
  & .axis {
    & .tick-mark {
      stroke: var(--color-grey-100);
      stroke-width: 0.5px;
    }
    & text {
      fill: var(--color-grey-400);
      font-family: var(--font-mono);
      font-size: var(--font-size-20);
      font-weight: 400;
      line-height: normal;
    }
  }
  & .gridlines line {
    stroke: var(--color-grey-200);
    opacity: 1;
    stroke-width: 1;
  }

  & .bars & .plot { cursor: pointer; }

  & .line { stroke-width: 1.5; }

  & path {
    stroke-width: 1.5;
    &.avg {
      fill: var(--color-grey-500);
      stroke: var(--color-grey-500);
    }
    &.p95 {
      fill: var(--color-info-500);
      stroke: var(--color-info-500);
    }
    &.thr {
      fill: var(--color-success-500);
      stroke: var(--color-success-500);
    }
    &.error {
      fill: var(--color-danger-500);
      stroke: var(--color-danger-500);
    }
    &.deploy {
      fill: var(--color-grey-300);
      stroke-width: 0;
    }
  }
}

.plottable-colors-0 { background-color: var(--color-success-500); }
.plottable-colors-1 { background-color: var(--color-info-500); }
.plottable-colors-2 { background-color: var(--color-grey-500); }
.plottable-colors-3 { background-color: var(--color-danger-500); }
.plottable-colors-4 { background-color: var(--color-warning-500); }
.plottable-colors-5 { background-color: var(--color-orange-500); }
.plottable-colors-6 { background-color: var(--color-grey-20); }

[data-ariato="RorVsWild.Chart.Runtime"],
[data-synchronize-chart="Runtime"] {
  & circle {
    fill: var(--color-grey-500);
    visibility: hidden;
    &[data-chart-tooltip="percentile"] {
      fill: var(--color-info-500);
    }
  }
  & .chart-tooltip-value {
    fill: var(--color-grey-500);
    &[data-chart-tooltip="percentile"] {
      fill: var(--color-info-500);
    }
  }
}

[data-ariato="RorVsWild.Chart.Throughput"],
[data-synchronize-chart="Throughput"] {
  & circle {
    fill: var(--color-success-500);
    visibility: hidden;
  }
  & .chart-tooltip-value { fill: var(--color-success-500); }
}

[data-ariato="RorVsWild.Chart.Error"],
[data-synchronize-chart="Error"] {
  & circle {
    fill: var(--color-danger-500);
    visibility: hidden;
  }
  & .chart-tooltip-value { fill: var(--color-danger-500); }
}

[data-ariato="RorVsWild.Chart.Deploy"] .deploy,
[data-synchronize-chart="Deploy"] .deploy {
  fill: var(--color-grey-500);
}

[data-ariato="RorVsWild.Chart.RuntimeBar"] {
  & circle,
  & .chart-tooltip-value,
  & .bar-area rect {
    fill: var(--color-grey-500);
  }
  & .render-area line {
    stroke: var(--color-grey-500);
    stroke-width: 1.5;
  }

  & circle[data-tooltip-point="percentile"],
  & .chart-tooltip-value[data-chart-tooltip="percentile"],
  & .bar-area rect.p95 {
    fill: var(--color-info-500);
  }
  & .render-area line.p95 {
    stroke: var(--color-info-500);
    stroke-width: 1.5;
  }
}

[data-ariato="RorVsWild.Chart.Bar"],
[data-ariato="RorVsWild.Chart.ErrorBar"] {
  & circle,
  & .chart-tooltip-value,
  & .bar-area rect {
    fill: var(--color-success-500);
  }
  & .render-area line {
    stroke: var(--color-success-500);
    stroke-width: 1.5;
  }

  &.errors--histogram { 
    & circle,
    & .chart-tooltip-value,
    & .bar-area rect {
      fill: var(--color-danger-500);
    }
    & .render-area line { stroke: var(--color-danger-500); }
  }
}
.bars {
  width: 100%;
  padding: 0;
  margin: var(--space-3x) 0 0;
  display: grid;
  gap: var(--space-3x);
  & .is-loading { 
    line-height: 40px;
    color: var(--color-grey-200);
  }
  & .charts {
    max-width: 100%;
    width: 100%;
    min-width: 300px;
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 10;
    height: calc(var(--space) * 5);
    overflow: visible;
    stroke-width: 0;
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--color-grey-50) inset, var(--box-shadow-s);
  }
  & .segment-plot line { stroke-width: 1.5; }
  & .axis {
    transform: translate(0px, 28px);
    opacity: 0;
    transition:  all .3s ease-in-out;
    cursor: default;
    text { opacity: 0; }
    & .baseline,
    & .tick-mark { 
      stroke-width: 0;
    }
  }
  &:hover .axis { opacity: 0.6; }

  @media (min-width: 980px) {
    grid-template-columns: auto 340px;
    & .charts { 
      order: 1;
      .tick-label { display: inline; }
    }
    & .axis text {
      display: block;
      opacity: 1;
    }
    & .date-range {
      order: 2;
      width: 100%;
    }
  }
}

.chart__tooltip {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
  transform-origin: 50% 0%;
  filter: drop-shadow(0px 1px 2px var(--color-shadow));
}

.chart-tooltip-value {
  font-weight: 700;
  height: 24px;
  &:after { content: '/min'; }
  & svg[data-ariato="RorVsWild.Chart.Error"] &,
  & svg[data-synchronize-chart="Error"] & {
    fill: var(--color-danger-500);
  }
}

.chart-tooltip-background {
  fill: var(--color-grey-50);
  stroke: var(--color-grey-50);
  stroke-width: 8;
  visibility: hidden;
}

.chart-tooltip-date {
  font-size: var(--font-size-20);
  fill: var(--color-grey-400);
  visibility: hidden;
  height: 24px;
}

.chart-tooltip-label {
  font-size: var(--font-size-20);
  letter-spacing: 0.05em;
  fill: var(--color-grey-400);
  visibility: hidden;
  height: 24px;
}
.html5tooltip-box {
  background-color: var(--color-grey-50);
  box-shadow: 0px 1px 2px var(--color-shadow);
  color: var(--color-grey-400);
  position: relative;
  transform-origin: 50% 0%;
  &:before {
    background: var(--color-grey-50);
    content: '';
    display: block;
    position: absolute;
    top: -2px;
    left: 50%;
    margin-left: -2px;
    width: 4px;
    height: 4px;
    transform: rotate(45deg);
  }
  & label { 
    font-size: var(--font-size-20);
    margin: 0; 
    padding: 0;
    display: inline-block;
  }
  & > span { font-weight: 700; }
  & span.avg { color: var(--color-grey-500); font-weight: 700; }
  & span.p95 { color: var(--color-info-500); font-weight: 700; }
  & span.thr { color: var(--color-success-500); font-weight: 700; }
  & span.err { color: var(--color-danger-500); font-weight: 700; }
}

.html5tooltip-text { padding: var(--space-1-2) var(--space); }
.app section.error { 
  line-height:24px;
  & span { display: block; }
  & a:any-link {
    color: var(--color-danger-500);
    display:block;
    font-size: var(--font-size-80);
    font-weight: 400;
    margin-bottom:var(--space-3x);
  }
}

.notifications {
  .charts & {
    padding: 12px 0 0;
    gap: 12px;
    grid-template-columns: var(--space-6x) 1fr;
    grid-template-rows: auto;
    width: 100%;
    height: auto;
  }

  & ul {
    text-align: left;
    margin: 0;
  }
  & h4 + ul {
    text-align: left;
    margin: 12px 0 0;
  }
  & li {
    padding: 0;
    box-shadow: 0 -1px 0 0 var(--color-grey-35);
    display: flex;
    align-items: center;
    padding-left: var(--space-2x);
    gap: 8px;
    &:hover { background: var(--color-grey-35); }
  }
  & .date {
    font-size: var(--font-size-40);
    color: var(--color-grey-400);
    white-space: nowrap;
    margin-left: auto;
    padding: var(--space) var(--space-2x);
  }
  & [role="alert"] {
    display: block;
    text-align: left;
    background: var(--color-grey-35);
    color: var(--color-grey-400);
    border-left: var(--space-1-2) solid  var(--color-grey-200);
    margin-top: var(--space);
  
    & p { font-size: var(--font-size-40); }
  
    & p + :not(p) {
      margin-top: var(--space);
    }
  }
}

.error--fixed {
  opacity: 0.5;
  &:hover { opacity: 1; }

  & th[scope="row"].error strong {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }
}

.backtrace button { margin: 0 var(--space-2x) 12px; }
.charts--deploys {
  .charts &.card {
    height: auto;
    padding: 12px 0 0;
  }
  & ul {
    margin: var(--space-2x) 0 0;
  }
  & li {
    display: flex;
    box-shadow: 0 -1px 0 0 var(--color-grey-35);
    &:hover { background: var(--color-grey-35); }
  
    & > * { padding: var(--space) var(--space-2x); }
    & a:any-link {
      font-size: var(--font-size-40);
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    & .date {
      font-size: var(--font-size-40);
      color: var(--color-grey-400);
      background: var(--color-light);
      white-space: nowrap;
      margin-left: auto;
    }
  }
}

.deploy {
  padding: 0;
  display: block;
  max-width: 100%;
  overflow: hidden;

  &.card + &.card { margin-top: var(--space-3x); }

  & > header {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    min-height: 0;
    height: var(--space-6x);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr auto;
    box-shadow: none;
    position: relative;
  }

  & header {
    & h2 {
      font-size: var(--font-size-50);
      line-height: var(--space-3x);
      padding: 12px var(--space-2x);
      margin: 0;
      min-width: 0;
      display: block;
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    & .date {
      background: var(--color-light);
      color: var(--color-grey-400);
      padding: 12px var(--space-2x);
      line-height: var(--space-3x);
      white-space: nowrap;
      margin: 0;
      grid-column: 2 / span 1;
    }
  }

  & a:any-link {
    text-decoration-color: var(--color-grey-300);
    color: var(--color-grey-700);
    &:hover {
      text-decoration-color: var(--color-grey-400);
      color: var(--color-grey-800);
    }
  }

  & tr {
    display: flex;
    flex: 1;
    box-shadow: 0 0 0 1px var(--color-grey-35);
    flex-wrap: wrap;
  }

  & th[scope="row"] {
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 0.06em;
    color: var(--color-grey-400);
    font-size: var(--font-size-20);
    font-weight: 400;
    padding-bottom: 0;
    box-shadow: none;
    width: 100%;
    white-space: nowrap;
    line-height: var(--space-2x);
    padding: 12px var(--space-2x) var(--space-1-2);
    text-align: center;
    small { margin-left: 4px; }
  }

  & td {
    text-align: center;
    padding: 0 var(--space-2x) 12px;
    margin: 0;
    flex: 1;
  }

  @media (min-width: 980px) {
    & tbody { display: flex; }
  }
}

.deploys--histogram {
  & circle { fill: var(--color-grey-500); }

  & .chart-tooltip-value { fill: var(--color-grey-500); }

  & .render-area line {
    stroke: var(--color-grey-500);
    stroke-width: 1.5;
  }
  & .bar-plot rect { fill: var(--color-grey-500); }
  & .bar-plot ~ .bar-plot rect { fill: var(--color-grey-20) !important; }
}

.app .deploy__release {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
  gap: 8px;
  font-size: var(--font-size-50);
  color: var(--color-grey-400);

  & .deploy__release__revision {
    display: block;
    overflow: hidden;
    & span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.deploy__author {
  display: flex;
  overflow: hidden;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 8px;
  & strong {
    font-weight: 700;
    color: inherit;
  }

  table & {
    color: var(--color-grey-400);
    font-size: var(--font-size-40);
    & strong { font-weight: 400; }
  }
}

.charts div.deploys--histogram {
  cursor: pointer;
  height: 72px;
  width: 100%;
  display: block;
  margin: 8px 0 0;
}
.servers {
  & > .charts {
    display: block;
    max-width: none;
    width: 100%;
  }
  & .charts__content {
    display: grid;
    gap: var(--space-3x);
    grid-template-columns: 1fr;
    max-width: none;
  }
  & thead { display: none; }
}

.charts--server {
  .charts & {
    height: 255px;
    min-height: auto;
    width: 100%;
  }
  & h4 {
    position: relative;
    display: inline-block;
    width: auto;
  }
  & h5 { 
    color: var(--color-grey-500);
    + .plottable { margin-top: 36px; }
  }
  & > .plottable { height: 158px; }
  & .render-area path {
    fill: url('#heatGradient');
    stroke: url('#heatGradient');
    fill-opacity: 0.1;
  }
  & > div circle {
    fill: var(--color-grey-500);
    visibility: hidden;
  }
  & .chart-tooltip-value { fill: var(--color-grey-500); }

  &.charts--server--load {
    & .render-area path {
      fill: url('#heatGradientLoad');
      stroke: url('#heatGradientLoad');
      fill-opacity: 0.3;
    }
    & .area-plot {
      & .area {
        fill: url('#heatGradientLoad');
        fill-opacity: 0;
      }
      &:last-of-type .area { fill-opacity: 0.1; }
    }
  }
  &.charts--server--mixed {
    & .render-area path {
      fill: url('#heatGradient');
      stroke: url('#heatGradient');
      fill-opacity: 0.3;
    }
    & .area-plot {
      & .line { stroke-width: 0; }
      & .area {
        fill: url('#heatGradient');
        fill-opacity: 0;
      }
      &:last-of-type .area { fill-opacity: 0.1; }
    }
  }
}

svg.servers__gradients {
  visibility: hidden;
  position: absolute;
  height: 158px;
}

.stop-0 { stop-color: var(--color-danger-500); }
.stop-10 { stop-color: var(--color-danger-500); }
.stop-40 { stop-color: var(--color-warning-500); }
.stop-60 { stop-color: var(--color-grey-500); }
.stop-100 { stop-color: var(--color-grey-500); }

.server--histogram {
  & .chart-tooltip-value,
  & circle { fill: var(--color-grey-500);}
  & .render-area line { stroke: url('#heatGradientHisto'); }
  & .bar-plot rect { fill: url('#heatGradientHisto'); }
  & .avg-bar rect {
    opacity: 0;
    display: none;
  }
  & .min-bar rect {
    fill: var(--color-grey-20) !important;
    opacity: 1;
  }
}

.servers-list,
.charts--requests {
  & .charts--server > .plottable,
  & svg.servers__gradients { 
    height: 87px; 
  }
  & thead { display: none; }
  & th,
  & td {
    word-break:keep-all;
    width: auto;
    text-align: left;
  }
  & .table--responsive th[scope="row"] {
    text-align: left;
    width: 100%;
  }

  & .charts .charts--server,
    .charts .chart--placeholder { 
      height: 184px;
  }

  & .charts--server--load .area-plot .line { stroke-width: 0; }
}

.charts--requests .chart--placeholder { height: 160px; }

.charts .charts--requests .charts--server { height: 184px; }

.servers.charts .chart--placeholder { height: 255px; }
    

@media (min-width: 980px) {
  .servers {
    grid-column: 1 / -1;
    width: 100%;
    &.charts .charts__content { grid-template-columns: 1fr 1fr; }

    & thead { display: table-header-group; }
  }
  
  .servers-list {
    &.app {
      display: flex;
      flex-direction: column;
      & .charts__content {
        grid-template-columns: repeat(auto-fit, minmax(calc(var(--space) * 24), 1fr));
      }
    }
    
    & thead { display: table-header-group; }
    & th,
    & td.number {
      text-align: right;
      white-space: nowrap;
    }
    & .charts {
      width: 100%;
      order: 0;
      margin: 0;
    }
  }
}
.banner {
  background: var(--color-grey-20);
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;

  & p {
    color: inherit;
    display: inline-block;
    margin: 0 auto;
    padding: 12px var(--space-3x);
    box-shadow: none;
  }

  &.banner--demo { 
    background: var(--color-success-200);
    & a:any-link {
      color: var(--color-success-700);
      text-decoration-color: var(--color-success-500);
      &:hover { color: var(--color-grey-800); }
    }
  }
  &.banner--gem {
    & p code {
      white-space: nowrap;
      border-radius: 0;
      box-shadow: 0 0 0 1px var(--color-grey-50);
      padding: var(--space-1-2);
    }
    & small { white-space: nowrap; }
  }
}

.banner--new-free-trial { margin-top: 0; }
 
.flash {
  text-align:center;
  background: var(--color-grey-00);
  box-shadow: var(--box-shadow-m);
  padding: 12px var(--space-2x);
  position: fixed;
  width: 240px;
  left: calc(50% - 120px);
  top: -96px;
  z-index: 20;
  animation: message-appear 5s .3s ease-in-out;
}
.flash--notice { color: var(--color-success-500); }
.flash--error,
.banner--issue { 
  color: var(--color-danger-500);
}
label small,
label span {
  text-transform: none;
  letter-spacing: 0;
}

input.search {
  background: transparent;
  border: 0;
  outline: 0 none;
  box-shadow: 0 0 0 0;
  height: var(--space-6x);
  margin: -12px;
  font-size: var(--font-size-40);
}

form hr { height: 12px; }

.field_with_errors { 
  margin: 0;
  & label { 
    color: var(--color-danger-500);
    margin-top: var(--space-3x);
  }
}
.account {
  margin-top: var(--space-3x);

  & small.account__help {
    margin: var(--space-3x);
    padding: 0;
    display: block;
  }
  & .card-field {
    position: relative;
    margin-top: 0;
    .credit-card { margin: var(--space-3x) 0 0; }
  }

  @media (min-width: 980px) {
    & nav a[role="button"] { margin: 12px 0; }
  }
}

.estimation {
  margin-top: 0;
  padding: 12px var(--space-2x);
  text-align: center;
  & .title {
    text-align: center;
    font-weight: 400;
    font-size: var(--font-size-50);
    letter-spacing: 0;
    text-transform: none;
    margin: 0;
  }
  & .is-h4 {
    padding: 0;
  }
  & .estimation__data {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
  }
  & .estimation__data__cell {
    flex: 1;
    min-width: 240px;
    text-align: center;
    padding: 12px var(--space-2x) 0;
  }
  [role="alert"] + & { margin-top: 0; }
}

.account-form { 
  padding: 0;
  & form {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    footer {
      background: var(--color-grey-20);
      box-shadow: 0 -1px 0 0 var(--color-grey-50);
      text-align: center;
      margin: 0;
      padding: var(--space-2x);
      width: calc(100% + var(--space-6x));
    }    
  }
  & fieldset {
    flex: 1;
    min-width: 300px;
    padding: var(--space-3x) var(--space-4x) var(--space-4x);
    border: 0;
    background: var(--color-grey-20);
    box-shadow: 0 0 0 1px var(--color-grey-50);
  }
  [role="alert"] + & { margin-top: 0; }
}

.invoice {
  & section { margin-top: var(--space-3x); }
  & small {
    font-size: var(--font-size-10);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  & .invoice-to { padding: 12px var(--space-2x) 0; }
  & .invoice-total,
  & .invoice-total:hover {
    border-top: 1px solid  var(--color-grey-200);
    background:  var(--color-grey-00);
    font-weight: 700;
  }
  & .price { white-space: nowrap; }
}
.collaborators {
  & li {
    line-height: 40px;
    margin-bottom: 11px;
    border-bottom: 1px solid var(--color-grey-50);
    padding-bottom: 12px;

    & .avatar {
      float:left;
      margin-right: 12px;
      width: 40px;
      height: 40px;
    }

    & form {
      padding: 0;
      float: right;
      &.button_to > * + * { margin-top: 0; }
    }
  }

  & .add {
    width: 40px;
    min-width: 40px;
    height: 40px;
    line-height: 32px;
    text-align: center;
    font-size: var(--font-size-80);
    margin: 0 12px 0 0;
    display: inline-block;
    border-radius: 50%;
    border: 2px dashed var(--color-grey-50);
  }

  @media (min-width: 980px) {
    grid-row: 1 / span 2;
    grid-column: 2 / span 1;
  }
}
.help-section {
  background: linear-gradient(180deg, var(--color-grey-35), var(--color-grey-20));
  padding: 72px var(--space-3x) 168px;
  margin: var(--space-3x) 0;
  overflow-x: hidden;
  color: var(--color-grey-400);
  position: relative;
  text-align: center;
  &::before {
    content: "";
    display: block;
    position: absolute;
    top: -12px;
    left: 0;
    height: var(--space-3x);
    width: 100%;
    background:
      linear-gradient(
        45deg, transparent 33.333%,
        var(--color-grey-20) 33.333%, var(--color-grey-20) 66.667%,
        transparent 66.667%
      ),
      linear-gradient(
        -45deg, transparent 33.333%,
        var(--color-grey-20) 33.333%, var(--color-grey-20) 66.667%,
        transparent 66.667%
      );
    background-size: 12px var(--space-3x);
  }
  & h3 {
    margin: 72px auto var(--space-2x);
    color: var(--color-grey-500);
  }
  & p { 
    text-align: left;
    & code {
      border-radius: 0;
      padding: var(--space-1-2) var(--space);
      background: var(--color-grey-00);
      box-shadow: 0 0 0 1px var(--color-grey-50), var(--box-shadow-s);
      color: var(--color-grey-500);
    }
  }
  & img {
    border:12px solid var(--color-grey-600);
    display: block; margin: var(--space-3x) auto;
    max-width: 100%;
    filter: opacity(.8) grayscale(63%);
  }
  & pre {
    background: var(--color-grey-00);
    margin: 0 0 var(--space-6x);
    padding: 12px var(--space-2x);
    line-height: var(--space-3x);
    box-shadow: 0 0 0 1px var(--color-grey-50), var(--box-shadow-m);
    text-align: left;
    color: var(--color-grey-500);
  }
  & dl { text-align: left; }
  & > div {
    max-width: 612px;
    margin: 0 auto;
  }

  & .pricing { 
    margin-top: 0;
    & h3 { margin: 0 auto; }
  }
}

.separator {
  display: block;
  height: var(--space);
  margin: 72px auto 0;
  stroke-width: 2px;
  stroke: var(--color-grey-300);
  fill: none;
}

.setup { 
  overflow: hidden;
  & .container {
    display: flex;
    overflow: hidden;
    & div {
      flex: 1;
      margin-bottom: var(--space-3x);
    }
  }
  & h4 {
    text-align: left;
    color: var(--color-grey-500);
    font-size: var(--font-size-70);
    letter-spacing: 0;
    text-transform: none;
    margin-top:6px;
    + p { margin-top: -8px; }
  }
  & span.setupnumber {
    display: block;
    width: var(--space-6x);
    height:var(--space-6x);
    line-height: var(--space-6x);
    font-size: var(--font-size-70);
    font-weight: 700;
    text-align: center;
    background: var(--color-grey-00);
    color: var(--color-grey-500);
    margin: 1px var(--space-3x) 0 0;
    box-shadow: 0 0 0 1px inset var(--color-grey-50), var(--box-shadow-l);
    border-radius: 50%;
  }
}
.pricing {
  max-width: 1472px;
  margin: var(--space-6x) auto var(--space-3x);
  text-align: center;
  & p {
    text-align: center;
    margin-top: var(--space-6x);
  }
  & .features {
    color: var(--color-grey-500);
    width: 100%;
    display: block;
    margin: 24px 0 0;
    & li  {
      display: block;
      border: 0;
      width: 100%;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 0;
      text-align: center;
      font-size: var(--font-size-30);
      box-shadow: 0 0 0 0;
      background: transparent;
      &.example  {
        text-transform: none;
        letter-spacing: 0;
        font-size: var(--font-size-30);
        color: var(--color-grey-400);
      }
      &.separator  {
        height: 1px;
        width: 24px;
        background: var(--color-grey-200);
        margin: 24px auto;
      }
    }
  }
  & [role="button"] { margin: var(--space-6x) auto var(--space-3x); }
}

.price-graph {
  position: relative;
  margin: 0 0 0;
  padding: 0;
  & > * {
    margin: 0;
    display: flex;
    width: 100%;
  }
  & > ul li { flex: 1; }
}

.price-graph__axe {
  position: relative;
  left: calc(100/6 * -1%);
  color: var(--color-grey-400);
  font-weight: 700;
  margin-top: 0;
  & li  { 
    position: relative;
    &:before  {
      content: "";
      display: block;
      box-sizing: border-box;
      position: absolute;
      top: 8px;
      width: 1px;
      height: 8px;
      left: calc(50% - 1px);
      background: var(--color-grey-200);
    }
    &:nth-child(1)::after,
    &:nth-child(2)::after,
    &:nth-child(3)::after,
    &:nth-child(4)::after {
      content: "";
      display: block;
      width: 100%;
      height: 3px;
      left: calc(50% - 1px);
      position: relative;
      top: 7px;
      background-image: linear-gradient(90deg, var(--color-grey-200) 1px, transparent 1px );
      background-size: 10% 100%;
    }
    &:nth-child(2)::after { background-size: calc(100/90 * 1%) 100%; }
    &:nth-child(3)::after { background-color: var(--color-grey-200); }
  }
  &:first-of-type li:before {
    top: unset;
    bottom: -8px;
  }
  &:has(:nth-child(4)) { 
    left: calc(100/8 * -1%);
    & li {
      &:nth-child(2)::after { background-size: calc(100/40 * 1%) 100%; }
      &:nth-child(3)::after { 
        background-color: transparent;
        background-size: calc(100/50 * 1%) 100%;
      }
      &:nth-child(4)::after { background-color: var(--color-grey-200); }
    }
  }
}

.price-graph__price li {
  box-shadow: 0 0 0 1px var(--color-grey-200);
  font-weight: 700;
  padding: 0;
  height: 72px;
  font-size: var(--font-size-90);
  color: var(--color-success-500);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 8px;
  position: relative;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  span { padding: 0 4px; }
  & .badge {
    white-space:normal;
    height: auto;
    font-size: var(--font-size-40);
    color: var(--color-success-500);
    font-weight: 700;
  }
  &.is-active {
    padding: 0;
    background: var(--color-success-400);
    color: var(--color-grey-00);
  }
  &:last-of-type { 
    position: relative;
    &::before {
      content: "";
      display: block;
      box-sizing: border-box;
      position: absolute;
      width: 0;
      height: 72px;
      border-top: 36px solid transparent;
      border-bottom: 36px solid transparent;
      border-left: 12px solid var(--color-grey-200);
      top: 0;
      right: -13px;
    }
    &::after {
      content: "";
      display: block;
      box-sizing: border-box;
      position: absolute;
      width: 0;
      height: 72px;
      border-top: 36px solid transparent;
      border-bottom: 36px solid transparent;
      border-left: 12px solid var(--color-grey-20);
      top: 0;
      right: -12px;
    }
  }
}

.pricing__localhost {
  display: flex;
  flex-direction: column;
  background: transparent;
  min-width: 240px;
  border: 3px dashed var(--color-grey-50);
  box-shadow: none;
}

.pricing__rorvswild {
  flex: 3;
  display: flex;
  flex-direction: column;
}

/* OLD PRICING */
.price-graph--1 {
  & .price-graph__axe,
  & .price-graph__price li:last-of-type::before,
  & .price-graph__price li:last-of-type::after { 
    display: none; 
  }
} 
.report {
  & > header { overflow: hidden; }
  & .is-h4 {
    text-align: center;
    padding: 12px 16px;
    position: relative;
    & .badge {
      letter-spacing: 0;
      position: absolute;
      margin: 3px 4px;
    }
  }
  & .charts.grid-auto {
    display: grid;
    width: 100%;
    gap: 0;
    margin: 0;
  }
  & table {
    margin: 0;
  }
  & td.col--percentile {
    & span { display: inline-block; }
    & .badge{ top: -2px; }
  }
  & > aside { 
    grid-row: 2 / span 1;
    & .card {
      text-align: left;
      height: auto;

      &.card--duration {
        text-align: center;
        padding: 0 8px;
        grid-column: 1 / -1;
        & .date { 
          color: var(--color-grey-400);
          text-wrap: pretty;
        }
      }
    }
    & [role="alert"] { margin-top: var(--space); }
    & a[role="button"] { margin-top: var(--space-4x); }
    & .menubutton + .card {
      margin-top: var(--space-3x);
      padding: var(--space-3x) var(--space-2x);
    }
    @media (min-width: 980px) {
      grid-row: 2 / span 1;
      grid-column: 2 / span 1;
    }
  }
}

.report__header {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  & .date-range { margin: var(--space-6x) 0 0 auto; }
}

.report__content {
  grid-column: 1 / span 1;
  padding: 0;
  & > .card { padding: 0; }
  & > section + section { margin-top: 24px; }
  & .charts {
    & .is-h4 {
      font-weight: 400;
      line-height: var(--space-2x);
      padding: 0;
    }
    & h5 { 
      font-size: var(--font-size-70);
      small { 
        top: 3px;
        white-space: nowrap;
      }
    }
    & .badge {
      right: 0;
      top: 0;
      border-radius: 0 0 0 4px;
      margin: auto;
      position: absolute;
    }
    & .card {
      height: auto;
      border-radius: 0;
      padding: 12px var(--space-2x) var(--space-2x);
      box-shadow: 0 0 0 1px var(--color-grey-35);
    }
  }
}
@media print {
  body { color: #000; font-weight: 400; font-size: 10px; line-height: 15px ; }

  h2,h3,h4,h5,h6 { break-after: avoid-page; }
  img, svg, table, canvas, .invoice { break-inside: avoid; }
  section + .invoice,
  .invoice + .invoice { break-before: page; }
  a::after {content: " (" attr(href) ")";}

  p { color: #000; }
  header.app,
  body > header nav,
  main > header nav,
  footer,
  .invoice .print { display:none; }

  .card { background: transparent; }

  table tr, table th  { line-height: 24px; width: 100%; padding: 0 24px; }

  table td.price { color: var(--color-grey-700); }

  .invoice th, .invoice td { padding: 0 8px; }
}
/*



































*/