:root {
  color-scheme: dark;
  --service-field: #3a3230;
  --service-ink: #e1dfe0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: transparent;
  font-family: "Space Grotesk", system-ui, sans-serif;
}

html.is-embed,
html.is-embed body {
  min-height: 0;
  height: 100%;
}

html.is-embed body {
  display: block;
}

html.is-embed .service-asset {
  width: 100%;
  height: 100%;
  border: none;
}

:is([data-theme="light"], html[data-theme="light"], body[data-theme="light"]) .service-asset {
  --service-field: #e1dfe0;
  --service-ink: #3a3230;
}

:is([data-theme="dark"], html[data-theme="dark"], body[data-theme="dark"]) .service-asset {
  --service-field: #3a3230;
  --service-ink: #e1dfe0;
}

.service-asset {
  width: 256px;
  height: 225px;
  position: relative;
  overflow: hidden;
  font-size: 2rem;
  background: var(--service-field);
  border: 1px solid var(--service-ink);
  color: var(--service-ink);
  transition: background 420ms ease, border-color 420ms ease, color 420ms ease;
  user-select: none;
  cursor: pointer;
}

.service-asset canvas,
.service-asset svg,
.service-asset .svg-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.service-asset .svg-stage svg {
  color: var(--service-ink);
}

.service-asset .title {
  position: absolute;
  left: 0.5625em;
  bottom: 0.5625em;
  z-index: 2;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.5em;
  line-height: 1.15;
  letter-spacing: -0.03em;
  pointer-events: none;
  max-width: 90%;
}