/* assets/styles/core.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-family: var(--root-font-family, sans-serif);
  font-weight: 300;
  color: #333;
  background: #fff;
}
html:has(dialog[id=buy][open]) {
  overflow: hidden;
}
body {
  padding: 0;
  margin: 0;
  font-size: var(--root-font-size-default);
}
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);
}
h1 {
  font-size: var(--font-size-h1, var(--font-size, "1em"));
  font-weight: var(--font-weight, 700);
}
h2 {
  font-size: var(--font-size-h2, var(--font-size, "1em"));
  font-weight: var(--font-weight, 700);
}
h3 {
  font-size: var(--font-size-h3, var(--font-size, "1em"));
  font-weight: var(--font-weight, 700);
}
h4 {
  font-size: var(--font-size-h4, var(--font-size, "1em"));
  font-weight: var(--font-weight, 700);
}
h5 {
  font-size: var(--font-size-h5, var(--font-size, "1em"));
  font-weight: var(--font-weight, 700);
}
h6 {
  font-size: var(--font-size-h6, var(--font-size, "1em"));
  font-weight: var(--font-weight, 700);
}
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, var(--root-font-size-xsmall) );
  display: block;
  margin-bottom: .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);
}

/* assets/styles/core.variables.css */
:root {
  --root-font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Ubuntu",
    sans-serif;
  --root-font-size-xsmall: .75rem;
  --root-font-size-small: .875rem;
  --root-font-size-default: 1rem;
  --root-black: #222;
  --root-button-primary-default: var(--root-black);
  --color-highlight: #111;
  --root-focus-input: #6C3AFF;
  --root-focus-default: #222;
  --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%);
  --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;
    gap: var(--col-gap, 2vw);
    grid-template-columns: repeat(12, 1fr);
    margin: var(--col-gap, 2vw);
  }
  .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";
  }
  .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";
  }
  .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-kicker {
  text-transform: uppercase;
  letter-spacing: .02em !important;
  font-weight: 400 !important;
  font-size: .675rem;
  margin: 0;
  border: .5px solid #444;
  border-radius: 20px;
  padding: .25em .6em .35em;
  display: inline-block;
}
.u-smallcaps {
  font-feature-settings: "smcp";
  text-transform: lowercase;
  letter-spacing: .02em;
}
.u-tag {
  display: inline-block;
  border: .5px solid #ddd;
  background: #eee;
  border-radius: 2em;
  font-size: 80%;
  padding: .15em .5em .25em;
}

/* 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;
}
.banner-logo {
  grid-column: 2;
  grid-row: 1;
}
.banner-nav {
  grid-column: 1;
  grid-row: 1;
}

/* 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: 16/8;
}
.billboard.billboard--intro {
  aspect-ratio: 3/1;
  --font-size: 2.5vw;
  text-wrap: balance;
  text-align: center;
  --font-weight: 100;
}

/* assets/styles/dialog.css */
.dialog-header,
.dialog-body,
.dialog-footer {
  width: 100%;
}
.dialog-header {
  --font-size: var(--root-font-size-default);
  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(--spring-default),
    left .3s var(--spring-default),
    top .3s var(--spring-default),
    right .3s var(--spring-default),
    bottom .3s var(--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( --spring-default );
}
.font:hover .font-action {
  opacity: 1;
  top: 45%;
  transition: opacity .25s linear, top .5s var( --spring-default );
}

/* assets/styles/footer.css */
.footer {
  background: #111;
  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;
}
.list.list--feats {
  display: flex;
  flex-wrap: wrap;
}
.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;
}
.list-dt {
  width: 6ch;
}
.list-dd {
  flex: 1;
  padding: 0;
  margin: 0;
}

/* assets/styles/main.css */
.field-error {
  font-size: var( --font-size-error, var(--root-font-size-small) );
  margin: 0 0 1em;
}
.nav {
  margin: 0;
}
.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: #fff;
  animation: nav-item .3s var(--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-th, var(--root-font-size-default));
}
td {
  font-size: var(--font-size-td, var(--root-font-size-default));
}
.cart {
  width: 100%;
  border-collapse: collapse;
  --font-size-th: var(--root-font-size-xsmall);
  --font-size-td: var(--root-font-size-default);
}
.cart-font {
  font-family: var( --font );
}
.cart-cell {
  border-top: 1px solid rgba(0, 0, 0, .1);
  padding: .5rem 0;
}
.cart-subtotal {
  font-size: 1.5rem;
}
.Grid {
  display: flex;
  flex-direction: row;
  width: 75%;
  margin: auto;
}
.Grid > * {
  width: 50%;
}
.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: .5px solid #ccc;
  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;
}
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;
}
.license {
  background: #fff;
  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(--root-font-size-xsmall);
}
.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 rgba(255, 255, 255, .65);
  position: relative;
}
.license-label-text {
  font-size: var(--core-font-size-default);
  display: flex;
  flex-direction: column;
  padding-left: 1em;
}
.license[data-toggle-on-value=true] {
  background: var(--color-highlight);
  color: #fff;
}
.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);
}
dialog[id=buy] {
  background: #E7E6E4;
  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: rgba(64, 64, 64, .45);
  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);
  }
}
.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, none );
}
a:hover {
  color: var(--link-color-hover);
  text-decoration: var( --link-decoration-hover, none );
}