:root {
    --bg-start: #F0F0FA;
    --bg-end: #F8F8F8;

    --text-default: #bfbfce;
    --text-active: #020032;

    --font-size: 32px;
    --line-height: 1.3;
    --max-width: 400px;
    --padding: 64px;
}

h1 {
    font-family: "ABCDiatypeRounded", "ABCDiatype", system-ui, sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-size: 48px;
    margin: 0 auto;
    color: var(--text-active);
    letter-spacing: -0.02em;
    width: 100vw;
    text-align: center;
    z-index: -4;
    line-height: 0.9em;
    padding: 0 1em;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overscroll-behavior: none;
    background-color: var(--bg-start);
}

body {
    margin: 0;
    background: var(--bg-start);
    transition: background-color 0.05s linear;
    font-family: "ABCDiatype", system-ui, sans-serif;
    overscroll-behavior: none;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
}

.story {
    width: 100%;
    position: absolute;
}

.panel {
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}

.text {
    width: min(var(--max-width), 100%);
    margin-left: var(--padding);
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: 400;
    color: var(--text-default);
}

.text-line {
    display: block;
    color: var(--text-default);
    background: var(--bg-start);
    padding: 0 6px;
    white-space: nowrap;
    border-radius: 10px;
    float: left;
}

.text-line,
#you-me {
    transition: color 1s ease, background-color 1s ease;
}

.text-line.active {
    color: var(--text-active);
}

strong {
    font-weight: 600;
}

.word {
    color: var(--text-default);
    transition: color 250ms linear;
}

.word.active {
    color: var(--text-active);
}

canvas {
    position: fixed;
    top: 20px;
    inset: 0;
    width: 100vw;
    min-height: 100dvh;
    z-index: 1;
    padding: 0
}

.app {
    min-height: 100dvh;
    transition: opacity 0.5s ease;

    /* Keep actual content out of the notch/system areas */
    /*
            padding-top: env(safe-area-inset-top, 0px);
            padding-right: env(safe-area-inset-right, 0px);
            padding-bottom: env(safe-area-inset-bottom, 0px);
            padding-left: env(safe-area-inset-left, 0px);
            */
    box-sizing: border-box;
}

.viewport-gradient {
    position: fixed;
    left: 0;
    width: 100%;
    height: 120px;
    z-index: 15;
    pointer-events: none;
}

.viewport-gradient--top {
    top: 0;
    background: linear-gradient(to bottom,
            #F0F0FA 0%,
            transparent 100%);
}

.viewport-gradient--bottom {
    display: none;
    bottom: 0;
    background: linear-gradient(to top,
            #F0F0FA 0%,
            transparent 100%);
}

.path-dot {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.5);
    fill: #FF00AA;
    transition:
        opacity 1s ease,
        transform 1s ease;
}

.arrow-head {
    opacity: 0;
}

.draw-path,
.arrow-head {
    fill: none;
    stroke: #FF00AA;
    stroke-width: 1;
    transition: opacity 1s ease;
}

.path-dot.active,
.arrow-head.active {
    opacity: 1;
    transform: scale(1);
}

.hide .draw-path,
.hide .arrow-head,
.hide .path-dot {
    opacity: 0;
}

.process-svg {
    position: fixed;
    top: 10vh;
    z-index: 2;
}

.process-svg #membrane path {
    fill: #6F6584;
}

.layer {
    transition: opacity 0.3s ease;
}

/*
#you-me {
    
    border: 2px solid transparent;
    padding: 0.1875em 0.4375em 0.1875em 0.625em;
    border-radius: 90px;
    margin: -0.25em -0.4em;
    white-space: nowrap;
    display: flex;
    flex: auto;
    width: auto;
    align-items: center;
    gap: 0.3em;
    flex-direction: row;
    float: left;
    letter-spacing: -0.03em;
    transition:border-color 1s ease, background-color 1s ease;
    color:inherit;
}

.end #you-me {
    border-color: #000;
    padding: 0.1875em 0.4375em 0.1875em 0.625em;
    background-color: #f8f8f8;
    margin:0;
    color:var(--text-active)
}
    */

#you-me {
    color: var(--text-active);
    margin: 0 .25em;
    transform-origin: top left;
}

#you-me.no-margin {
    margin: 0;
}

.text-line:not(.active) #you-me {
    color: var(--text-default);
}

.end .text-line:has(.no-margin) {
    min-height: 1.3em;
    width: 4em;
    background: transparent;
}

.end #you-me {
    color: var(--text-active) !important;
    margin: 0;
}

.end .text-line {
    color: transparent;
    background: transparent;
}

.text-line:has(#you-me) {
    display: flex;
}

#you-me svg {
    width: 0;
    height: 0;
}

.end #you-me svg {
    position: absolute;
    inset: 0;

    width: calc(100% + 0.9em + 1.4em);
    height: calc(100% + 0.4em);
    margin: -0.25em -0.65em;

    pointer-events: none;
    overflow: visible;
    z-index: -1;
}

.you-me-border {
    fill: transparent;
    stroke: var(--text-active);
    stroke-width: 2;

    rx: 0.9em;

    width: 100%;
    height: 100%;
    border-radius: 999px;

    stroke-dasharray: 276;
    stroke-dashoffset: 276;

    transition:
        stroke-dashoffset 1s cubic-bezier(.77, 0, .18, 1),
        fill 0.4s ease;
}

.end .you-me-border {
    fill: #f8f8f8;
    stroke-dashoffset: 0;
}

.you-me-circle {
    r: 0;
    cy: 50%;
    cx: calc(100% - 0.8em);
    fill: #6F3DEC;
    transition: r 1s ease;
}

.end .you-me-circle {
    r: 0.5em;
    fill: #6F3DEC;
}

.end #you-me div {
    display: block;
    background-color: #6F3DEC;
}

/* Language Picker */

header {
    width: 100vw;
    display: flex;
    align-items: center;
    padding: 16px 24px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    justify-content: center;
}

header .inner {
    width: 100%;
    display: flex;
    align-items: center;
    max-width: 1125px;
    justify-content: space-between;
}

header button {
    display: inline-flex;
    width: 67px;
    height: 32px;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 4px 12px 4px 4px;
    color: #514766;
}

header .icon {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 4px;
    position: relative;
    margin-top: -4px;
    margin-bottom: -4px;
    border-radius: 8px;
}

header .language {
    position: relative;
    width: 20px;
    height: 20px;
}

header .label {
    font-family: "ABCDiatype", Helvetica;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.28px;
    position: relative;
    width: fit-content;
    line-height: normal;
    white-space: nowrap;
}

header button .icon path {
    fill: #524766
}

header button:hover {
    background-color: #0000001a;
    color: #291F3D;
}

header button:hover .icon path {
    fill: #291F3D
}

header button.active .icon path {
    fill: #4F3294
}

header .text-wrapper {
    font-family: "ABCDiatype", Helvetica;
    font-weight: 700;
    color: #281e3d;
    font-size: 14px;
    letter-spacing: -0.28px;
    position: relative;
    width: fit-content;
    line-height: normal;
    white-space: nowrap;
}

header button.active,
header button.active:hover {
    background-color: #d3ceef;
    color: #4F3294;
}

header .div {
    font-family: "ABCDiatype", Helvetica;
    font-weight: 700;
    color: #4f3294;
    font-size: 14px;
    letter-spacing: -0.28px;
    position: relative;
    width: fit-content;
    line-height: normal;
    white-space: nowrap;
}

header .tooltip-language {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 16px;
    padding: 8px;
    position: absolute;
    right: 0;
    top: 36px;
    background-color: #ffffff;
    border-radius: 16px 4px 16px 16px;
    border: 1px solid;
    border-color: #cfccda;
}

header button.active .tooltip-language {
    display: inline-flex;
}

header .frame {
    display: inline-flex;
    flex-direction: column;
    position: relative;
    flex: 0 0 auto;
}

header .radio-button {
    display: flex;
    height: 32px;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 0;
    position: relative;
    flex-grow: auto;
}

header a.radio-button {
    text-decoration: none;
}

header .radio {
    position: relative;
    width: 12px;
    height: 12px;
    background-color: #514766;
    border-radius: 20px;
    border: 1.2px solid;
    border-color: #514766;
}

header .radio-button .label {
    font-family: "ABCDiatype", Helvetica;
    font-weight: 400;
    color: #514766;
    font-size: 16px;
    letter-spacing: -0.32px;
    position: relative;
    width: fit-content;
    line-height: normal;
    white-space: nowrap;
}

/*
header .radio-2 {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 20px;
  border: 1.2px solid;
  border-color: #514766;
}
  */
/* Original CSS is injected above this comment. */

header #logo {
    height: 24px;
    width: auto;
}

header button {
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
    border-radius: 8px;
}

header button {
    background-color: transparent;
}

header button:focus-visible {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

header .frame {
    margin: 0;
    min-width: 0;
    padding: 0;
    border: 0;
}

header .radio-button {
    cursor: pointer;
    border-radius: 8px;
}

header .radio-button:hover {
    background-color: #F0F0FA;
    color: #291F3D;
}

header .radio-button:hover .radio {
    background-color: #CFCDDA;
    box-shadow: 0 0 0 3px #CFCDDA;
}

header .radio,
header .radio-2 {
    appearance: none;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

header .radio:not(:checked) {
    background-color: transparent;
}

header .radio:checked {
    background-color: #514766 !important;
}

header .radio:focus-visible,
header .radio-2:focus-visible {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}


/* skip */

.panel.start .container {
    display: flex;
    align-items: center;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    position: fixed;
    z-index: 20;
}

.panel.start .button {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    height: 32px;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 6px 4px 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid;
    border-color: #726788;
    color: #726788;
    background-color: var(--bg-start);
    cursor: pointer;

}

.panel.start .button:hover {
    border-color: #2E2E3D;
    color: #2E2E3D;
    border-width: 1.5px;
}

.panel.start .button:hover svg path {
    fill: #2E2E3D;
}

.panel.start .button .label {
    position: relative;
    width: fit-content;
    font-family: "ABCDiatype", Helvetica;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.28px;
    line-height: normal;
    white-space: nowrap;
}

.panel.start .button .icon-right {
    align-items: center;
    display: inline-flex;
    min-width: 4px;
    max-width: 16px;
    position: relative;
    flex: 0 0 auto;
}

.panel.start .button svg {
    position: relative;
    width: 16px;
    height: 16px;
}

.jumping-arrow {
    animation: gentleJump 2s ease-in-out infinite;
    position: fixed;
    bottom: 80px;
}

.jumping-arrow path {
    stroke-color: #291F3D;
}

@keyframes gentleJump {

    0%,
    20%,
    100% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(-5px);
    }
}


@media (max-width: 768px) {
    :root {
        --font-size: 24px;
        --line-height: 1.3;
        --max-width: 320px;
        --padding: 16px;
    }

    .viewport-gradient {
        display: block;
    }

    header {
        padding: 8px 16px;
    }
}