/* assets/styles/core.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}
*:not(dialog) {
  margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
html {
  overflow: hidden;
}
body {
  line-height: 1.5;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  scrollbar-gutter: stable;
  -webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}
html {
  font-family: var(--root-font-family, sans-serif);
  font-weight: 300;
  color: var(--color-ink-primary);
  background: var(--color-surface-primary);
}
html:has(dialog[id=buy][open]) {
  overflow: hidden;
}
body {
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #999;
  background: transparent;
  border-radius: 5px;
  padding: 0.6em .75em .7em;
  width: 100%;
  color: inherit;
}
button {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  line-height: normal;
}
p,
li,
dt,
dd,
span,
small {
  font-size: var(--font-size);
}
dt,
th {
  color: var(--color-ink-heading);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: var(--margin-bottom, 1.5em);
}
h1 {
  font-size: var(--font-size-heading, var(--font-size, 1em));
  font-weight: var(--font-weight, 700);
  color: var(--color-ink-h1, var(--color-ink-heading));
}
h2 {
  font-size: var(--font-size-h2, var(--font-size-subheading, 1em));
  font-weight: var(--font-weight, 700);
  color: var(--color-ink-h2, var(--color-ink-heading));
}
h3 {
  font-size: var(--font-size-h3, var(--font-size, 1em));
  font-weight: var(--font-weight, 700);
  color: var(--color-ink-h3, var(--color-ink-heading));
}
h4 {
  font-size: var(--font-size-h4, var(--font-size, 1em));
  font-weight: var(--font-weight, 700);
  color: var(--color-ink-h4, var(--color-ink-heading));
}
h5 {
  font-size: var(--font-size-h5, var(--font-size, 1em));
  font-weight: var(--font-weight, 700);
  color: var(--color-ink-h5, var(--color-ink-heading));
}
h6 {
  font-size: var(--font-size-h6, var(--font-size, 1em));
  font-weight: var(--font-weight, 700);
  color: var(--color-ink-h6, var(--color-ink-heading));
}
p:first-child {
  margin-top: 0;
}
p:last-child {
  margin-bottom: 0;
}
dt,
dd {
  padding: 0;
  margin: 0;
}
a[class] {
  text-decoration: none;
}
figure {
  padding: 0;
  margin: 0;
}
figcaption {
  font-size: var( --font-size-caption );
}
button:focus-visible,
a[href]:focus-visible,
area[href]:focus-visible,
details:focus-visible,
summary:focus-visible,
input[type=submit]:focus-visible {
  outline: 2px solid var(--root-focus-default);
}
label {
  font-size: var( --font-size-label );
  display: block;
  padding: .5em 0 .25em;
}
input[type=text],
input[type=email] {
  border: 1px solid #999;
  border-radius: 5px;
  padding: 0.6em .75em .7em;
  width: 100%;
}
input[type=text]:focus-visible,
input[type=email]:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--root-focus-input);
}
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
tbody td,
tbody th {
  padding: .35em 0;
  border-top: var( --border-700 );
}

/* assets/styles/core.variables.css */
:root {
  --root-font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Ubuntu",
    sans-serif;
  --root-font-size-100: .64rem;
  --root-font-size-200: .8rem;
  --root-font-size-300: 1rem;
  --root-font-size-400: 1.25rem;
  --root-font-size-500: 1.563rem;
  --root-font-size-600: 1.953rem;
  --root-font-size-700: 2.441rem;
  --root-font-size-800: 3.052rem;
  --root-font-size-900: 3.815rem;
  --root-color-neutral-100: #eee;
  --root-color-neutral-200: #ccc;
  --root-color-neutral-500: #888;
  --root-color-neutral-700: #333;
  --root-color-neutral-800: #222;
  --root-color-neutral-900: #111;
  --root-black: #222;
  --root-button-primary-default: var(--root-black);
  --color-highlight: #eee;
  --color-highlight-ink: #222;
  --root-focus-input: #6C3AFF;
  --root-focus-default: #222;
}
:root {
  --font-size-footprint: var(--root-font-size-100);
  --font-size-caption: var(--root-font-size-200);
  --font-size-small: var(--root-font-size-200);
  --font-size-body: var(--root-font-size-300);
  --font-size-preamble: var(--root-font-size-500);
  --font-size-subheading: var(--root-font-size-600);
  --font-size-heading: var(--root-font-size-700);
  --font-size-display: var(--root-font-size-900);
  --color-surface-primary: var(--root-color-neutral-900);
  --color-surface-secondary: "";
  --color-surface-dialog: "";
  --color-surface-dialog-muted: "";
  --dialog-surface: var(--root-color-neutral-900);
  --dialog-backdrop: rgba(0,0,0,.5);
  --dialog-ink: var(--root-color-neutral-200);
  --canvas-selected: var(--root-color-neutral-100);
  --license-select-canvas: var(--root-color-neutral-100);
  --license-select-ink: var(--root-color-neutral-800);
  --color-canvas-strong: "";
  --color-canvas-subtle: "";
  --color-button-primary-canvas: "";
  --color-button-primary-ink: "";
  --color-button-primary-canvas-hover: "";
  --color-button-primary-ink-hover: "";
  --color-ink-primary: var(--root-color-neutral-200);
  --color-ink-secondary: "";
  --color-ink-heading: var(--root-color-neutral-100);
  --border-100: 1px solid var(--root-color-neutral-700);
  --border-300: 3px solid var(--root-color-neutral-700);
  --easing-spring-default: linear(0, 0.0021, 0.0082 1.01%, 0.0311 2.02%, 0.0715 3.15%, 0.1307 4.41%, 0.2551 6.56%, 0.6707 12.99%, 0.7834, 0.8798, 0.9584, 1.0191 21.06%, 1.043 22.07%, 1.0652 23.21%, 1.0809 24.22%, 1.0944 25.35%, 1.1055 26.74%, 1.1118 28.25%, 1.1129 29.89%, 1.1087 31.66%, 1.0928 34.68%, 1.0398 42%, 1.0168 45.78%, 1.0072 47.8%, 0.9994, 0.9937 52.09%, 0.9898 54.36%, 0.9874 57.38%, 0.9877 60.92%, 0.9976 74.41%, 1.0007 81.6%, 1.0006 99.89%);
  --easing-spring-bouncy: linear(0, 0.0024, 0.0093 1.03%, 0.0354, 0.0756 3.09%, 0.1369 4.29%, 0.2796 6.52%, 0.7232 12.69%, 0.8402, 0.9399 16.46%, 1.0141 18.18%, 1.0771, 1.1215 21.95%, 1.1384, 1.1505 24.01%, 1.1593 25.21%, 1.163, 1.1609 27.95%, 1.153 29.49%, 1.1421, 1.1286 32.24%, 1.0505 38.92%, 1.0166 42.35%, 1.0021, 0.9907, 0.9824 48.01%, 0.9767 50.07%, 0.9735 52.81%, 0.9749 56.07%, 0.9968 68.76%, 1.0034 75.79%, 1.0041 82.48%, 0.9997 99.97%);
}

/* assets/styles/core.layout.css */
@media (min-width: 60em) {
  .l-grid {
    display: grid;
    column-gap: var(--col-gap, 2vw);
    row-gap: var(--row-gap, 2vw);
    grid-template-columns: repeat(12, 1fr);
    margin: var(--row-gap, 6vw) var(--col-gap, 2vw);
    min-height: 50vh;
  }
  .l-fonts {
    grid-template-areas: "main main main main main main main main main main main main";
  }
  .l-styles {
    grid-template-areas: "aside aside . main main main main main main main main main";
    color: var(--color-ink-heading);
  }
  .l-about,
  .l-account {
    grid-template-areas: "aside1of2 aside1of2 . main main main main main . aside2of2 aside2of2";
  }
  .l-feats {
    grid-template-areas: "aside aside . main main main main main main main main main";
  }
  .l-footer {
    grid-template-areas: "disclaimer disclaimer disclaimer . . . nav nav legal legal mail mail";
    min-height: auto;
  }
  .l-checkout {
    grid-template-areas: ". . main main main main . aside aside aside aside .";
  }
  .l-login {
    grid-template-areas: ". . . . main main main main . . . .";
  }
  .l-cart {
    grid-template-areas: ". . main main main main main main main main main .";
  }
  .l-default {
    grid-template-areas: "aside aside . . . main main main main main main .";
  }
  .l-index {
    grid-template-areas: "main main main main main main main main main main main main";
  }
  .l-account {
    margin-top: 20vw;
  }
  .l-footerMaillist {
    grid-area: mail;
  }
  .l-footerLegal {
    grid-area: legal;
  }
  .l-footerNav {
    grid-area: nav;
  }
  .l-footerDisclaimer {
    grid-area: disclaimer;
  }
  .l-feats,
  .l-about {
    border-top: .5px solid #999;
  }
  .l-feats > *,
  .l-about > * {
    padding-top: var(--col-gap, 2vw);
  }
  .l-aside {
    grid-area: aside;
  }
  .l-aside1of2 {
    grid-area: aside1of2;
  }
  .l-aside2of2 {
    grid-area: aside2of2;
  }
  .l-main {
    grid-area: main;
  }
  .l-mainA {
    grid-area: mainA;
  }
  .l-mainB {
    grid-area: mainB;
  }
  .l-home .l-fonts {
  }
  .l-fontFamily {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    gap: 1vw;
  }
}

/* assets/styles/core.utils.css */
.u-fontStyles {
  --font-size: 4.5vw;
  line-height: 1.1;
}
.u-smallcaps {
  font-feature-settings: "smcp";
  text-transform: lowercase;
  letter-spacing: .02em;
}
.u-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
.u-tag {
  display: inline-block;
  border: .5px solid #ddd;
  background: #eee;
  border-radius: 2em;
  font-size: 80%;
  padding: .15em .5em .25em;
  color: var(--root-color-neutral-800);
}
.u-textCaption {
  font-size: var(--font-size-caption);
}
.u-textBody {
  font-size: var(--font-size-body);
}
.u-textPreamble {
  font-size: var(--font-size-preamble);
}
.u-textSubheading {
  font-size: var(--font-size-subheading);
}
.u-textHeading {
  font-size: var(--font-size-heading);
}
.u-textDisplay {
  font-size: var(--font-size-display);
  font-weight: 700;
}

/* assets/styles/banner.css */
.banner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto;
  align-items: baseline;
  margin: 2vw;
}
.banner-actions {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
  gap: 1px;
}
.banner-logo {
  grid-column: 2;
  grid-row: 1;
}
.banner-nav {
  grid-column: 1;
  grid-row: 1;
}

/* assets/styles/button.css */
.button {
  border-radius: 50px;
  border: var(--border-default);
  color: var(--ink-default);
  background: var(--canvas-default);
  position: relative;
}
.button:hover {
  color: var( --ink-hover, var(--ink-default) ) !important;
  background: var( --canvas-hover, var(--canvas-default)) !important;
}
.button:not(.button--strong, .button--subtle, .button--quiet) {
  --canvas-default: #fff;
  --ink-default: #222;
  padding: 1em 2em 1.2em;
  min-width: 50%;
}
.button.button--quiet {
}
.button.button--strong {
}
.button.button--subtle {
  border: .5px solid #444;
  border-radius: 20px;
  margin: 0 0 0 -2px;
  padding: .25em 1em .35em;
}
.button.button--subtle:hover {
  border-color: #333;
  background: #333;
}
.button.button--buy {
  background: var(--color-highlight);
  padding: 1em 2.25em 1.2em;
  border-radius: 3em;
  font-size: var(--font-size-preamble);
  transition: scale .3s var(--easing-spring-default);
  --ink-default: var(--color-em, inherit);
  --ink-hover: #f00;
}
.button.button--buy:hover {
}
.button.button--buy::after {
  content: " ";
  background: var(--color-em, transparent);
  position: absolute;
  inset: -8px -8px -8px -8px;
  z-index: -1;
  border-radius: 3em;
  transition: inset .3s var(--easing-spring-default);
}
.button.button--buy:hover::after {
  inset: -16px -16px -16px -16px;
}

/* assets/styles/billboard.css */
.billboard {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-back);
  color: var(--color-fore);
}
.billboard.billboard--font {
  --font-size: 10vw;
  aspect-ratio: 2.2;
}
.billboard.billboard--intro {
  aspect-ratio: 3/1;
  --font-size: 2.5vw;
  text-wrap: balance;
  text-align: center;
  --font-weight: 100;
}
.billboard-specimen {
  font-size: 7.5vw;
  color: var(--color-fore);
  margin: 0;
}

/* assets/styles/dialog.css */
dialog[id=buy] {
  background: var(--dialog-surface);
  color: var(--dialog-ink);
  display: flex;
  flex-direction: column;
  position: fixed;
  width: 60vw;
  inset: 0 0 0 auto;
  max-height: none;
  height: 100dvh;
  margin: 0;
  padding: 0;
  border: none;
  border-left: 1px solid oklch(0 0 0 / 0.1);
  overflow-y: auto;
  overscroll-behavior: contain;
  translate: 100% 0;
  transition:
    translate 0.35s cubic-bezier(0.32, 0.72, 0, 1),
    overlay 0.35s allow-discrete,
    display 0.35s allow-discrete;
}
dialog[id=buy][open] {
  translate: 0 0;
}
@starting-style {
  dialog[id=buy][open] {
    translate: 100% 0;
  }
}
dialog[id=buy]::backdrop {
  background: var(--dialog-backdrop);
  transition:
    background 0.35s ease,
    overlay 0.35s allow-discrete,
    display 0.35s allow-discrete;
}
@starting-style {
  dialog[id=buy][open]::backdrop {
    background: rgb(0 0 0 / 0);
  }
}
.dialog-header,
.dialog-body,
.dialog-footer {
  width: 100%;
}
.dialog-header {
  --font-size: var(--font-size-body);
  font-feature-settings: "c2sc", "smcp";
  font-weight: 300;
  padding: 2vw;
  display: flex;
  justify-content: space-between;
}
.dialog-body {
  padding: 0 4vw 6vw;
  flex: 1;
}
.dialog-footer {
  position: sticky;
  bottom: 0;
  padding: 2vw 2vw;
  margin: 0 2vw;
  background: #eee;
  border-top: .5px solid #ccc;
}

/* assets/styles/font.css */
.font {
  --link-color-default: var(--color-fore);
  background: var(--color-back);
  color: var(--color-fore);
  border-radius: 20px;
  aspect-ratio: 16/10;
  position: relative;
}
.font::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 20px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 0 solid var(--color-fore);
}
.font:hover::after {
  top: -5px;
  left: -5px;
  bottom: -5px;
  right: -5px;
  border: 10px solid var(--color-fore);
  transition:
    border .3s var(--easing-spring-default),
    left .3s var(--easing-spring-default),
    top .3s var(--easing-spring-default),
    right .3s var(--easing-spring-default),
    bottom .3s var(--easing-spring-default);
}
.font:hover .font-front {
}
.font-front,
.font-back {
  padding: 2.5vw;
  position: absolute;
  bottom: 0;
  text-box: trim-both cap alphabetic;
  pointer-events: none;
}
.font-back {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.font-meta {
  --font-size: 1.5rem;
  --link-color-default: inherit;
  --margin: 0;
  margin: 2.5vw;
  display: flex;
  width: calc(100% - 5vw);
  box-sizing: border-box;
}
.font-styles {
  font-size: calc(var(--font-size) * .75);
  color: #fff;
  background: var(--color-fore);
  border-radius: 100px;
  padding: .15em 1em .25em;
  margin-left: auto;
}
.font-preview {
  font-size: 18vw;
  line-height: .9;
}
.font-action {
  pointer-events: none;
  background: #fff;
  color: #000;
  border-radius: 100px;
  padding: 1em 2em;
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translateX(-50%) translateY(-50%);
  opacity: 0;
  transition: opacity .1s linear, top .5s var( --easing-spring-default );
}
.font:hover .font-action {
  opacity: 1;
  top: 45%;
  transition: opacity .25s linear, top .5s var( --easing-spring-default );
}

/* assets/styles/footer.css */
.footer {
  background: #0e0e0e;
  padding: 1px 0 4vw;
  margin-top: 8vw;
}

/* assets/styles/list.css */
.list,
.list-item {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.list {
  gap: 2vw;
  margin-bottom: 2em;
}
.list:last-child,
.list-item:last-child {
  margin-bottom: 0;
}
.list.list--feats {
  display: flex;
  flex-wrap: wrap;
}
.list-item.list-item--divider {
  padding-bottom: 2em;
}
.list.list--s {
}
.list.list--cols {
  columns: 3;
}
.list.list--feats .list-item {
  width: calc(50% - 1vw - 1px);
}
.list.list--stack {
  flex-direction: column;
  gap: 0;
}
.list.list--ot {
  display: flex;
  align-items: first baseline;
  margin-bottom: 0;
  gap: 0;
}
.list-dt {
  width: 7ch;
}
.list-dd {
  flex: 1;
  padding: 0;
  margin: 0;
}
.list.list--divider .list-item:not(:first-child) {
  border-top: var(--border-100);
}
.list.list--divider .list-item {
  padding: .35em 0;
}
.list.list--tabular {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: var(--border-100);
  margin-bottom: 2em;
}
.list.list--tabular .list-heading,
.list.list--tabular .list-data {
  border-top: var(--border-100);
  padding: .35em 0;
}
.list.list--tabular .list-heading {
  font-weight: 700;
  width: 50%;
}
.list.list--tabular .list-data {
  width: 50%;
}

/* assets/styles/kicker.css */
.kicker {
  text-transform: uppercase;
  letter-spacing: .02em !important;
  font-weight: 400 !important;
  font-size: .675rem;
  margin: 0 0 0 -2px;
  border: .5px solid var(--root-color-neutral-500);
  border-radius: 20px;
  padding: .25em 1em .35em;
  display: inline-block;
}

/* assets/styles/main.css */
.field-help {
  font-size: var( --font-size-error, var(--font-size-caption) );
}
.field-error {
  font-size: var( --font-size-error, var(--font-size-caption) );
  margin: 0 0 1em;
}
.field-error:empty {
  margin: 0;
}
.notice {
  border: var(--border-100);
  padding: .5em .8em .8em;
  --font-size: var( --font-size-caption );
}
.nav {
  margin: 0;
  gap: 1px;
}
.nav-item {
  border-radius: 50px;
  background: rgba(125, 125, 125, .25);
  display: inline-block;
  padding: .7em 1.5em .8em;
  position: relative;
}
.nav-item:hover {
  background-color: var(--color-highlight);
  color: var(--color-highlight-ink);
  animation: nav-item .3s var(--easing-spring-bouncy) 1;
}
.nav-item:hover::after {
  content: " ";
  top: -.3em;
  left: -.3em;
  bottom: -.3em;
  right: -.3em;
  position: absolute;
  border-radius: 100px;
}
@keyframes nav-item {
  0% {
    transform: scale(.9);
  }
  100% {
    transform: scale(1);
  }
}
font-tester:not(:defined) {
  display: block;
  min-height: 80vh;
  background: #ddd;
}
table {
}
td,
th {
  vertical-align: baseline;
  text-align: left;
}
th {
  font-size: var(--font-size, var(--font-size-th, var(--font-size-body)));
}
td {
  font-size: var(--font-size, var(--font-size-td, var(--font-size-body)));
}
.cart {
  width: 100%;
  border-collapse: collapse;
  --font-size-th: var(--font-size-small);
  --font-size-td: var(--font-size-small);
}
.cart.cart--compact {
  --font-size-th: var(--font-size-caption);
  --font-size-td: var(--font-size-caption);
}
.cart-font {
  font-family: var( --font );
}
.cart-cell {
  border-top: var(--border-100);
  padding: .5rem 0;
}
.cart-total {
  font-size: 1.5rem;
}
.cart-remove,
.cart-price {
  text-align: right;
}
.cart-price {
  font-weight: 700;
}
.cart-remove {
  --font-size: var(--font-size-caption);
}
.Grid {
  display: flex;
  flex-direction: row;
  width: 75%;
  margin: auto;
}
.Grid > * {
  width: 50%;
}
.asideNav {
  margin: 2em 0;
}
.u-textLeft {
  text-align: left;
}
.u-textRight {
  text-align: right;
}
.u-notice {
  color: #ccc;
  background: var(--root-button-primary-default);
  font-size: 75%;
  display: block;
  width: 14px;
  border-radius: 50%;
  text-align: center;
  width: 20px;
  height: 20px;
  line-height: 20px;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(25%, -25%);
}
.u-notice[hidden] {
  display: none;
}
.u-concealed {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
fieldset {
  border: 0;
  padding: 0;
}
.u-hide {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
.cart-message {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 20px;
  border-radius: 5px;
  font-weight: bold;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.cart-message.success {
  background: #4caf50;
  color: white;
}
.cart-message.error {
  background: #f44336;
  color: white;
}
.preview {
  margin: 4vw 2vw;
  border-top: var(--border-100);
  padding-top: 2vw;
}
font-tester {
  --container-padding: 0;
  --container-max-width: none;
  --container-direction: row;
  --display-bg: transparent;
  --display-border-width: 0;
  --display-padding: 0;
  --display-min-height: auto;
  --text-color: var(--color-ink-heading);
}
font-tester::part(controls) {
  display: flex;
  height: 100%;
}
font-tester::part(display-section) {
  flex-basis: 100%;
}
font-tester::part(control-item) {
  width: 33%;
}
font-tester::part(font-size-item) {
}
font-tester::part(line-height-item) {
}
font-tester::part(letter-spacing-item) {
}
font-tester::part(style-label) {
  display: none;
}
font-tester::part(label) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
font-tester::part(slider) {
  height: 1px;
}
font-tester::part(font-size-slider) {
  order: 2;
}
font-tester::part(font-size-label) {
}
font-tester::part(line-height-label) {
}
font-tester::part(letter-spacing-label) {
}
font-tester::part(font-size-value) {
  order: 1;
}
.buy-products {
  list-style: none;
  padding: 0;
  margin: 0;
}
.buy-product {
  display: flex;
  align-items: center;
  padding: .5rem 0;
}
.buy-product + .buy-product {
  border-top: .5px solid rgba(0, 0, 0, .15);
}
.buy-product-licenses {
  display: none;
}
.buy-product-price {
  margin-left: auto;
}
.buy-product-price,
.buy-product-preview {
  font-size: 1.5rem;
}
.buy-product-add {
  margin-left: 1rem;
}
.validation-errors {
  --font-size-h2: var(--font-size-body);
  --font-size: var(--font-size-body);
  --margin-bottom: 0;
  margin: 1.5rem 0;
  border: 1px solid var(--root-color-neutral-700);
  padding: 1rem;
  border-radius: 4px;
}
.license {
  background: var(--root-color-neutral-700);
  border-radius: 50px;
  overflow: hidden;
  display: flex;
  margin: 0 -.33rem 2px;
}
.addon {
  background: #fff;
  margin-left: 1px;
  flex: 1;
  display: flex;
  flex: 1;
  flex-direction: row;
  padding: 0 1.25rem;
  align-items: center;
}
.addon + .addon {
  border-top: .5px solid #eee;
}
.addon:first-child {
  padding-top: .75rem;
}
.addon:last-child {
  padding-bottom: .75rem;
}
.license-label,
.license-select {
  flex: 1;
  display: flex;
  align-items: center;
}
.license-title-info {
  font-size: var(--font-size-footprint);
}
.license-select-options {
  width: 100%;
  height: 100%;
  border: none;
  font-size: var(--core-font-size-default);
}
.license-label {
  padding: .8em 1.5em;
}
.license-select {
  border-left: 1px solid var(--root-color-neutral-700);
  position: relative;
}
.license-label-text {
  font-size: var(--core-font-size-default);
  display: flex;
  flex-direction: column;
  padding: 0 0 0 1em;
}
.license-legend {
  margin: 1.5em 0 1em;
}
.license[data-toggle-on-value=true] {
  background: var(--license-select-canvas);
  color: var(--license-select-ink);
}
.license[data-toggle-on-value=true] .license-select::after {
  content: " ";
  position: absolute;
  right: 1.5em;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  pointer-events: none;
  background-color: currentColor;
  -webkit-mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20d%3D%22m19%208-7%207-7-7%22%2F%3E%3C%2Fsvg%3E);
  mask-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20d%3D%22m19%208-7%207-7-7%22%2F%3E%3C%2Fsvg%3E);
  mask-repeat: no-repeat;
  mask-size: contain;
}
.license-select:hover {
  color: #DACEFF;
}
.switch {
  display: flex;
  border: none;
  background: none;
  cursor: pointer;
  transition: background 0.15s;
}
.switch-track {
  position: relative;
  width: 38px;
  height: 18px;
  border-radius: 20px;
  background: var(--switch-track-bg, #999);
  transition: background 0.2s;
}
.switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 14px;
  background: var(--switch-knob-bg, white);
  transition: transform 0.2s;
}
.switch[aria-checked=true] .switch-track {
  background: var(--switch-track-bg-on);
}
.switch[aria-checked=true] .switch-knob {
  transform: translateX(20px);
}
[data-toggle-on-value=true] .switch {
  --switch-track-bg-on: #fff;
  --switch-knob-bg: var(--color-highlight);
}
.button.main {
  background: #222;
  color: #fff;
  border: 0;
  padding: 1em 1.5em;
  border-radius: 5em;
  min-width: 120px;
  text-align: center;
  border: .5px solid #222;
  min-width: 16ch;
}
.button.main[disabled] {
  background: #fff;
  border: .5px solid #aaa;
  color: #888;
}
.hrule1,
.hrule2,
.hrule3 {
  border: 0;
  border-boottom: .5px solid rgba(0, 0, 0, .15);
}
.hrule1 {
  margin: 3rem auto;
}
.hrule2 {
  margin: 2rem auto;
}
.hrule3 {
  margin: 1rem auto;
}
.hspace1,
.hspace2,
.hspace3,
.hspace4 {
  border: 0;
  border-boottom: .5px solid transparent;
}
.hspace1 {
  margin: 3rem auto;
}
.hspace2 {
  margin: 2rem auto;
}
.hspace3 {
  margin: 1rem auto;
}
.hspace4 {
  margin: .5rem auto;
}
.u-hspace1 {
  border: 1px solid transparent;
  margin: 10vw 0;
}
* {
  box-sizing: border-box;
}
h3 {
  margin: var(--margin, 1em 0 1em);
}
h3 a::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
a {
  color: var(--link-color-default);
  text-decoration: var( --link-decoration-default );
  text-decoration-thickness: .5px;
  text-underline-offset: 5px;
  text-decoration-color: #888;
}
a:hover {
  color: var(--link-color-hover);
  text-decoration: var( --link-decoration-hover );
}
a:not([class]) {
  --link-decoration-default: underline;
  --link-decoration-hover: underline;
}
input[type=text],
input[type=email] {
  border: 2px solid #666;
  background: transparent;
  color: #ccc;
}
input[type=text]:hover,
input[type=email]:hover {
  border: 2px solid #777;
}
input[type=text]:focus,
input[type=email]:focus {
  outline: none;
  border: 2px solid #888;
  background: rgba(255, 255, 255, .05);
}
input[type=text]:focus-within,
input[type=email]:focus-within {
  outline: 2px solid #888;
  outline-offset: 2px;
}