gui/apps/gui.hanzo.ai/app.css

html,
body {
  max-width: 100vw;
  font-family:
    Zen,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  scrollbar-color: #b1b1b1 transparent;
}

/* font flickering all the time on media query changes */
* {
  transition: none;
}

body {
  /* fallback to ThemeNameEffect */
  background: var(--color1);
}

body.transition {
  transition: background ease-in-out 1000ms;
}

body {
  margin: 0;
  position: relative;
  max-width: 100vw;
}

* {
  box-sizing: border-box;
  outline: 0;
}

html:not(:has(.is-sticky)),
html:not(:has(.is-sticky)) > body {
  max-width: 100vw;
  overflow-x: clip;
}

body .preview {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: -1px;
}

.col-span {
  column-span: 100;
}

.clip-invisible {
  clip: rect(0, 0, 0, 0);
}

:root:root a,
:root:root:root .text-decoration-none {
  text-decoration: none;
}

p a,
.t_Link {
  text-decoration: underline;
}

:root:root .is_Paragraph a {
  text-decoration: underline;
  text-decoration-color: var(--color02);
}

:root:root .is_Paragraph a:hover {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color04);
}

a {
  color: inherit;
  font-weight: 300;
}

:is(.is_Paragraph a, .link a, article p a, footer a) {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color6);
  transition: text-decoration-thickness ease-in-out 100ms;
}

:is(.is_Paragraph a, .link a, article p a, footer a):hover {
  text-decoration: underline;
  cursor: pointer;
  text-decoration-thickness: 4px;
  text-decoration-color: var(--color8);
}

.is_Paragraph:has(> ul) {
  margin-bottom: 0;
}

article li strong {
  opacity: 1;
}

.t_dark article li strong {
  color: #fff !important;
}

/* display block > display inline-flex bug */
/* see bolded text inside paragraph in mdx */
span._display-1adg3ll > span._display-xoduu5 {
  display: inline;
}

.paragraph-parent .paragraph {
  margin: 0;
}

/*  */

.hero-scroll {
  overflow: hidden;
  overflow-x: auto;
}

.hero-gradient {
  background: linear-gradient(
    30deg,
    var(--background) -50%,
    transparent,
    var(--background) 150%
  );
}

/* reset */

p,
input,
textarea,
select,
button,
ul,
ol,
li,
pre {
  margin: 0;
  padding: 0;
}

.all {
  transition-property: all;
}
.transform {
  transition-property: transform;
}
.opacity {
  transition-property: opacity;
}
.background {
  transition-property: background;
}
.color {
  transition-property: color;
}
.top {
  transition-property: top;
}
.bottom {
  transition-property: bottom;
}
.left {
  transition-property: left;
}
.right {
  transition-property: right;
}

.linear {
  transition-timing-function: linear;
}
.ease-in {
  transition-timing-function: ease-in;
}
.ease-in-out {
  transition-timing-function: ease-in-out;
}
.ease-out {
  transition-timing-function: ease-out;
}

.ms50 {
  transition-duration: 50ms;
}
.ms100 {
  transition-duration: 100ms;
}
.ms150 {
  transition-duration: 150ms;
}
.ms200 {
  transition-duration: 200ms;
}
.ms300 {
  transition-duration: 300ms;
}
.ms500 {
  transition-duration: 500ms;
}
.s1,
.ms1000 {
  transition-duration: 1s;
}
.s2 {
  transition-duration: 2s;
}
.s5 {
  transition-duration: 5s;
}

.help {
  cursor: help;
}

.rainbow {
  background-image: -webkit-linear-gradient(
    0deg,
    var(--red10),
    var(--green10),
    var(--blue10)
  );
}

/* intro paragraph links */
._fow-200 .link span,
._fow-200 .link {
  font-weight: inherit !important;
}

/* seasonal content - hidden by default, shown via html class */
.season-emoji,
.season-halloween-svg {
  display: none !important;
}

/* show seasonal emojis based on active season */
.xmas-season .season-emoji-xmas,
.easter-season .season-emoji-easter,
.halloween-season .season-emoji-halloween,
.valentine-season .season-emoji-valentine,
.lunar-season .season-emoji-lunar {
  display: flex !important;
}

.halloween-season .season-halloween-svg {
  display: flex !important;
}

.xmas-season .rainbow {
  background-image: -webkit-linear-gradient(
    -220deg,
    #009135,
    #009135,
    #59af2f,
    #ff0024 60%,
    #ff0024
  );
}

.easter-season .rainbow {
  background-image: -webkit-linear-gradient(
    -220deg,
    var(--pink10),
    var(--yellow10),
    var(--pink10)
  );
}

.clip-text {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* prevents clip on negative letter-spacing */
  padding-left: 3px;
  padding-right: 3px;
  margin-left: -3px;
  margin-right: -3px;
}

.clip-text::selection {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

iframe {
  border-width: 0;
}

.unselectable,
.unselectable * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

.glow,
.mix-blend-multiply {
  mix-blend-mode: multiply;
}

.glow {
  filter: blur(170px);
}

.blur {
  backdrop-filter: blur(400px);
}

.blur-medium {
  backdrop-filter: blur(20px);
}

.blur-8 {
  backdrop-filter: blur(8px);
}

.blur-4 {
  backdrop-filter: blur(4px);
}

.blur-light {
  backdrop-filter: blur(2px);
}

.bg-dot-grid {
  contain: paint;
  background-position: center center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23px' height='23px' viewBox='0 0 23 23' fill='none'%3E%3Ccircle cx='22' cy='22' r='0.88' fill='rgba(115,115,115,0.3)' /%3E%3C/svg%3E%0A");
}

.bg-grid {
  contain: paint;
  background-position: center center;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoAQMAAAC2MCouAAAABlBMVEWBgYFHcEyMaNnGAAAAAnRSTlP/AOW3MEoAAAAQSURBVHgBY4CA+v9AMBJIALryrr41QoYVAAAAAElFTkSuQmCC');
  opacity: 0.05;
}

.hanzogui-icon {
  pointer-events: none;
}

.mask-gradient-both {
  mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent, rgba(0, 0, 0, 1));
}

.mask-gradient-down {
  mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
}

.mask-gradient-up {
  mask-image: linear-gradient(transparent 20%, rgba(0, 0, 0, 1));
}

.mask-gradient-right {
  mask-image: linear-gradient(120deg, rgba(0, 0, 0, 1) 50%, transparent 100%);
}

.mask-gradient-left {
  mask-image: linear-gradient(-100deg, rgba(0, 0, 0, 1), transparent 100%);
}

.t_dark .mask-gradient-right {
  mix-blend-mode: color-dodge;
}

.t_dark .mask-gradient-left,
.mix-hard-light {
  mix-blend-mode: hard-light;
}

/* code highlighting */

.token.parameter {
  color: var(--pink9);
}

.token.class-name {
  color: var(--green9);
}

.token.tag,
.token.selector,
.token.selector .class,
.token.function {
  color: var(--green9);
}

.highlight-line:hover {
  background-color: var(--backgroundHover);
}

.highlight-line {
  color: var(--colorPress);
}

.token.attr-value,
.token.script {
  color: var(--red9);
}

.token.class,
.token.string,
.token.number,
.token.unit,
.token.color {
  color: var(--purple9);
}

.token.operator {
  color: var(--color);
}

.token.attr-name,
.token.keyword,
.token.rule,
.token.pseudo-class,
.token.important {
  color: var(--pink9);
}

.token.punctuation {
  color: var(--green9);
}

.token.module,
.token.property {
  color: var(--blue10);
}

.token.comment {
  color: var(--color);
  opacity: 0.4;
}

.token.atapply .token:not(.rule):not(.important) {
  color: inherit;
}

.language-shell .token:not(.comment) {
  color: inherit;
}

.language-css .token.function {
  color: inherit;
}

.token.deleted:not(.prefix),
.token.inserted:not(.prefix) {
  display: block;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: -20px;
  margin-right: -20px;
}

.token.deleted:not(.prefix) {
  color: var(--red9);
}

.token.inserted:not(.prefix) {
  color: var(--green9);
}

.token.deleted.prefix,
.token.inserted.prefix {
  user-select: none;
  -webkit-user-select: none;
}

.highlight-word {
  --word-bg: var(--purple9);
  color: var(--purple9);
  background-color: var(--purple4);
  display: inline-block;
  box-shadow:
    var(--xOffset) 0 0 0 var(--word-bg),
    -1px 0 0 0 var(--word-bg);
}

.highlight-word .token {
  color: inherit;
}

.highlight-word.on {
  --word-bg: var(--purple7);
  transition: all 100ms ease;
  cursor: pointer;
}

.highlight-line {
  white-space: pre;
  /* safari fix weird wrapping */
  word-wrap: initial;
}

.highlight-line,
.highlight-line * {
  transition: color 150ms ease;
}

.highlight-line[data-highlighted='false'] {
  opacity: 0.7;
}

.token.deleted .highlight-word {
  color: var(--red9);
}

.token.deleted .highlight-word.on {
  color: var(--red10);
}

.token.inserted .highlight-word {
  color: var(--yellow9);
}

.token.inserted .highlight-word.on {
  color: var(--yellow10);
}

*[data-line-numbers='true'].highlight-line {
  position: relative;
  padding-left: var(--t-space-4);
}

.typewriter {
  opacity: 0;
}
/* end */

.no-scrollbar {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}
.no-scrollbar::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

input,
textarea {
  outline: none;
  color: var(--color);
}

.ta-right {
  text-align: right;
}

.docs-nav-item:hover .sidebar-indicator,
.docs-nav-item:hover .name {
  opacity: 1 !important;
}

.t_dark .docs-paragraph {
  opacity: 0.88;
}

/* collapse margins between consecutive headings */
[data-heading] + [data-heading] {
  margin-top: 0;
  padding-top: var(--t-space-2);
}

/* collapse margins: notice followed by headings */
.no-opacity-fade + [data-heading] {
  margin-top: var(--t-space-4);
}

/* collapse margins: code blocks followed by headings */
.DocCodeBlock + [data-heading] {
  margin-top: var(--t-space-4);
}

.custom-scroll ::-webkit-scrollbar {
  height: 14px;
  width: 14px;
}

.custom-scroll ::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
.custom-scroll ::-webkit-scrollbar-thumb {
  border: 5.5px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 9999px;
  background-color: rgba(150, 150, 150, 0.15);
  display: none;
}
.custom-scroll:hover ::-webkit-scrollbar-thumb {
  display: flex;
}

.scroll-horizontal {
  max-width: 100%;
  overflow-x: auto;
}

.font-smooth {
  -webkit-font-smoothing: auto;
}

.font-smooth-aliased {
  -webkit-font-smoothing: antialiased !important;
}

.font-smooth-none,
.font_silkscreen {
  -webkit-font-smoothing: none !important;
}

.hero-tag:hover,
.hero-tag.active {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.word-break-keep-all {
  word-break: keep-all;
}

.mix-blend {
  mix-blend-mode: difference;
}

.mix-blend-screen {
  mix-blend-mode: screen;
}

.mix-blend-dodge {
  mix-blend-mode: color-dodge;
}

.text-3d {
  text-shadow:
    1px 1px 1px var(--color10),
    1px 2px 1px var(--color10),
    1px 3px 1px var(--color10),
    1px 4px 1px var(--color10),
    1px 5px 1px var(--color10),
    1px 6px 1px var(--color10),
    1px 7px 1px var(--color10),
    1px 8px 1px var(--color10),
    1px 9px 1px var(--color10),
    1px 10px 1px var(--color10),
    1px 28px 30px var(--background025);
}

/* studio */

.anim {
  transition: all ease 100ms;
}

.c-target-parent .target {
  opacity: 0;
  outline: none;
}

.c-target-parent[data-dragging='true'] .target,
.c-target-parent:hover > .target {
  opacity: 1;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.text-glow {
  text-shadow: 2px 2px 0 var(--background025);
}

.fade-image-in {
  opacity: 0;
  animation: fade-in 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    top: -20px;
  }
  100% {
    opacity: 1;
    top: 0px;
  }
}

.font-outlined {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--color12);
}

.font-outlined-sm {
  text-shadow:
    1px 1px var(--color),
    -1px -1px var(--color),
    -1px 1px var(--color),
    1px -1px var(--color);
}

.invert {
  filter: invert(100%);
}

@media (hover: hover) {
  .clip-slice {
    mask-image: url(/takeouticon.svg);
    mask-size: 100% 100%;
    animation: clip-fade2 40s infinite alternate;
    mix-blend-mode: difference !important;
  }

  .clip-slice-2 {
    mask-image: url(/takeouticon.svg);
    mask-size: 1% 1%;
    animation: clip-fade 150s infinite alternate;
    mix-blend-mode: difference !important;
  }

  .grain {
    background-image: url(data:image/png;base64,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);
  }
}

.clip-wave {
  mask-image: url(./public/takeout/geometric.svg);
  mask-size: 150% 150%;
  animation: clip-fade 80s infinite alternate;
}

.slice-alt {
  mask-size: 50% 50%;
  animation: clip-fade2 80s infinite alternate;
  mix-blend-mode: color-burn !important;
}

@keyframes clip-fade {
  0% {
    mask-position: top left;
    -webkit-mask-position: top left;
  }

  100% {
    mask-position: top right;
    -webkit-mask-position: top right;
  }
}

@keyframes clip-fade2 {
  0% {
    mask-position: bottom right;
    -webkit-mask-position: right;
  }

  100% {
    mask-position: bottom left;
    -webkit-mask-position: left;
  }
}

.theme-shadow {
  -webkit-text-stroke: 2px var(--color10);
}

.text-wrap-balance {
  text-wrap: balance;
  -webkit-text-wrap: balance;
}

.text-wrap-pretty,
p {
  text-wrap: pretty;
  -webkit-text-wrap: pretty;
}

:root.t_light .phone-preview {
  opacity: 0;
}

.bento-shadow {
  text-shadow:
    1px 1px var(--color1),
    1px 2px 1px var(--color3),
    1px 3px 1px var(--color4),
    1px 4px 1px var(--color4),
    1px 5px 1px var(--color5),
    1px 6px 1px var(--color6),
    1px 7px 1px var(--color6),
    1px 8px 1px var(--color7),
    1px 9px 0px var(--color7),
    1px 12px 0px var(--color7);
}

.t_dark .bento-shadow {
  text-shadow:
    2px 2px 1px var(--color9),
    1px 2px 1px var(--color9),
    1px 3px 1px var(--color9),
    1px 4px 1px var(--color8),
    1px 5px 1px var(--color8),
    1px 6px 1px var(--color8),
    1px 7px 1px var(--color8),
    1px 8px 1px var(--color8),
    1px 9px 1px var(--color8),
    1px 11px 1px var(--color7);
}

.bento-up-text {
  /* mix-blend-mode: luminosity; */
  mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent, rgba(0, 0, 0, 1));
  background-image: linear-gradient(var(--color0), var(--color7));
  /* filter: blur(10px); */
}

.t_dark .bento-up-text {
  mix-blend-mode: color-dodge;
  background-image: linear-gradient(var(--background025), var(--color8));
}

.dark-shadow {
  text-shadow: 0 10px 10px rgba(0, 0, 0, 1);
}

.glow-shadow {
  text-shadow:
    0 10px 10px var(--background075),
    0 30px 30px var(--background025);
  mix-blend-mode: color-burn;
}

.t_dark .glow-shadow {
  text-shadow:
    0 10px 10px var(--color075),
    0 30px 30px var(--color025);
  mix-blend-mode: color-dodge;
}

.bento-text-3 {
  background-image: linear-gradient(var(--color7), var(--color9));
  mix-blend-mode: hard-light;
  text-shadow:
    0 10px 20px var(--color05),
    0 30px 30px var(--color025);
}

.t_dark .bento-text-3 {
  mix-blend-mode: screen;
}

.mix-blend-color-burn-dodge {
  mix-blend-mode: color-burn;
}
.t_dark .mix-blend-color-burn-dodge {
  mix-blend-mode: color-dodge;
}

.parity-banner {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10000000000000000 !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(50px) !important;
}

/* Takeout phone scroll animation */
@keyframes takeout-phone-scroll {
  from {
    transform: rotateX(41deg) rotateZ(33deg) translateX(0) translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: rotateX(15deg) rotateY(-20deg) rotateZ(10deg) translateX(-400px)
      translateY(-200px) scale(0.7);
    opacity: 0.3;
  }
}

.takeout-phone {
  transform: rotateX(41deg) rotateZ(33deg);
  animation: takeout-phone-scroll linear both;
  animation-timeline: scroll(root);
  animation-range: 0% 60%;
}

/* Fallback for browsers without scroll-driven animation support */
@supports not (animation-timeline: scroll()) {
  .takeout-phone {
    transform: rotateX(41deg) rotateZ(33deg);
    animation: none;
  }
}

/* Orbit animation for takeout page */
.orbit-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  overflow: visible;
}

.orbit-planet {
  --offset: 520px;
  grid-area: 1 / 1;
  width: 60px;
  height: 60px;
  will-change: transform;
  contain: layout style;
  animation:
    orbitSpin 20s linear infinite,
    orbitZ 20s step-end infinite;
}

.orbit-planet img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes orbitSpin {
  from {
    transform: rotate(0deg) translateX(var(--offset)) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(var(--offset)) rotate(-360deg);
  }
}

@keyframes orbitZ {
  0%,
  24.99% {
    z-index: 1;
  }
  25%,
  74.99% {
    z-index: -1;
  }
  75%,
  100% {
    z-index: 1;
  }
}