:root {
    --color-primary: #000000;
    --color-background: #fafafa;
    --color-link: rgba(0, 0, 0, 1);
    --color-link-hover: rgba(0, 0, 0, .5);
    --font-family-primary: "LF-Serif", Times, serif;
    --font-weight-normal: 400;
    --line-height-base: 1.5;
    --baseline-from-top: .47;
    --line-height-info: 1.195;
    --baseline-from-top-info: .71;
    --margin-v-info: 2;
    --paragraph-space: 1;
    --total-paragraph-space-height: calc(var(--paragraph-space) * 2);
    --total-line-height: calc(16 * var(--line-height-info));
    --info-block-height: calc(var(--total-line-height) + var(--total-paragraph-space-height));
    --info-block-with-margins-height: calc(var(--info-block-height) + var(--margin-v-info) * 2);
    --font-size-info: calc((100dvh / var(--info-block-with-margins-height)));
    --font-size-info-ref: 30;
    --font-size-c-ref: 22;
    --font-size-c: calc(var(--font-size-info) * (var(--font-size-c-ref) / var(--font-size-info-ref)));
    --line-height-c: 1.3;
    --margin-v-baseline: calc(var(--margin-v-info) + var(--line-height-info) - 1 + var(--baseline-from-top-info));
    --c-to-info: calc(var(--font-size-info-ref) / var(--font-size-c-ref));
    --info-to-c: calc(var(--font-size-c-ref) / var(--font-size-info-ref));
    --margin-v-c: calc(var(--c-to-info) * var(--margin-v-baseline) - var(--line-height-c) + 1 - var(--baseline-from-top-info));
    --optical-modifier: 1.005;
    --margin-v-c-top: calc(var(--margin-v-c) * var(--font-size-c) * var(--optical-modifier))
}

@font-face {
    font-family: LF-Serif;
    src: url(../fonts/LF-Serif-Roman-Var.woff2) format("woff2");
    font-weight: var(--font-weight-normal);
    font-style: normal;
    font-display: block
}

@font-face {
    font-family: LF-Serif;
    src: url(../fonts/LF-Serif-Italic-VF.woff2) format("woff2");
    font-weight: var(--font-weight-normal);
    font-style: italic;
    font-display: block
}

html,
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
ul,
ol,
li,
blockquote,
pre,
code,
img,
figure,
figcaption {
    margin: 0;
    padding: 0
}

html {
    box-sizing: border-box
}

ul,
ol {
    list-style: none
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%
}

html {
    font-size: var(--font-size);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
    scroll-behavior: smooth
}

body {
    color: var(--color-primary);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%
}

.vc {
    padding-left: .2em
}

p span {
    display: block
}

#wordmark-wrapper {
    width: 100vw;
    text-align: center;
    will-change: transform, opacity;
    pointer-events: auto
}

.fallback #wordmark-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center
}

#wordmark-animation {
    position: relative;
    height: 1em;
    display: inline-block;
    right: .12em;
    font-feature-settings: "ss01";
    z-index: -1000
}

#wordmark-animation #wordmark-interactive {
    will-change: transform, contents, width;
    position: absolute;
    left: 0;
    pointer-events: auto
}

#wordmark-animation #wordmark-interactive span {
    will-change: transform, top
}

#wordmark-animation #comma-animation {
    display: inline-block;
    position: absolute;
    margin-left: -1.488em;
    top: -.915768em;
    width: 3.26em;
    height: 3.26em
}

#wordmark-animation #comma-animation.transform {
    transform: translate3d(-45.65%, -28.15%, 0);
    margin-left: 0;
    top: 0
}

#wordmark-animation #comma-animation.double {
    --x: 2;
    transform: translate3d(-47.85%, -39%, 0) scale(calc(1 / var(--x)));
    transform-origin: center;
    width: calc(3.26em * var(--x));
    height: calc(3.26em * var(--x));
    margin-left: 0;
    top: 0
}

#wordmark-animation .blink {
    animation: blink 1s infinite
}

#bear-view svg {
    shape-rendering: geometricPrecision;
    will-change: transform
}

.fallback #wordmark-animation,
.js-fallback #wordmark-animation {
    right: -.02em
}

@keyframes blink {

    0%,
    40% {
        opacity: 0
    }

    49%,
    to {
        opacity: 1
    }
}

@media (orientation: portrait) {
    #wordmark-wrapper {
        margin-top: calc(var(--baseline-from-top) * -1em);
        transition: none
    }

    .fallback #wordmark-animation {
        top: calc(var(--baseline-from-top) * .5em)
    }
}

@media (orientation: landscape) {
    #wordmark-wrapper {
        margin-top: 0;
        transition: margin-top .2s;
        will-change: margin-top
    }

    .fallback #wordmark-animation {
        top: 0
    }
}

:root {
    --bp-xsm: 400;
    --bp-sm: 640;
    --bp-md: 768;
    --bp-lg: 1024;
    --bp-xl: 1366;
    --bp-xxl: 2240;
    --font-sm: 14;
    --font-md: 12;
    --font-lg: 9;
    --font-xl: 7;
    --font-xxl: 6.5;
    --sm-vh: 16vh;
    --lg-vh: 22vh
}

@supports (height: 1dvh) {
    :root {
        --sm-vh: 20dvh;
        --lg-vh: 28dvh
    }
}

:root {
    --font-size-1: min(calc(var(--font-sm) * 1vw), 150px);
    --font-size: max(1px, min(var(--font-size-1), var(--sm-vh)))
}

@media (min-width: 640px) {
    :root {
        --min-f-d: calc(var(--font-sm) * var(--bp-sm) / 100);
        --max-f-d: calc(var(--font-md) * var(--bp-md) / 100);
        --f-range-d: calc(var(--max-f-d) - var(--min-f-d));
        --b-range-d: calc(var(--bp-md) - var(--bp-sm));
        --breakpoint: var(--bp-sm)
    }
}

@media (min-width: 768px) {
    :root {
        --min-f-d: calc(var(--font-md) * var(--bp-md) / 100);
        --max-f-d: calc(var(--font-lg) * var(--bp-lg) / 100);
        --f-range-d: calc(var(--max-f-d) - var(--min-f-d));
        --b-range-d: calc(var(--bp-lg) - var(--bp-md));
        --breakpoint: var(--bp-md)
    }
}

@media (min-width: 1024px) {
    :root {
        --min-f-d: calc(var(--font-lg) * var(--bp-lg) / 100);
        --max-f-d: calc(var(--font-xl) * var(--bp-xl) / 100);
        --f-range-d: calc(var(--max-f-d) - var(--min-f-d));
        --b-range-d: calc(var(--bp-xl) - var(--bp-lg));
        --breakpoint: var(--bp-lg)
    }
}

@media (min-width: 1366px) {
    :root {
        --min-f-d: calc(var(--font-xl) * var(--bp-xl) / 100);
        --max-f-d: calc(var(--font-xxl) * var(--bp-xxl) / 100);
        --f-range-d: calc(var(--max-f-d) - var(--min-f-d));
        --b-range-d: calc(var(--bp-xxl) - var(--bp-xl));
        --breakpoint: var(--bp-xl)
    }
}

@media (min-width: 640px) {
    :root {
        --font-size-1: calc(calc(var(--min-f-d) * 1px) + var(--f-range-d) * ((100vw - calc(var(--breakpoint) * 1px)) / var(--b-range-d)))
    }
}

@media (min-width: 768px) {
    :root {
        --font-size: max(1px, min(var(--font-size-1), var(--lg-vh)))
    }
}

:root {
    opacity: 0
}

:root.js-fallback {
    opacity: 1
}

:root.full {
    opacity: 1
}

html {
    overflow: hidden;
    overscroll-behavior: none
}

body {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    overflow: hidden
}

.full body,
.fallback body,
.js-fallback body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
    width: 100vw
}

.js-fallback body #info-panel {
    display: none
}

#bear-shell {
    display: block;
    position: relative;
    font-size: var(--font-size);
    pointer-events: none
}

#bear-view {
    position: absolute;
    will-change: transform;
    shape-rendering: geometricPrecision;
    pointer-events: none
}

.fallback #info-panel {
    display: none
}

#app-main {
    width: 100vw;
    width: 100dvw;
    display: flex;
    align-items: center;
    justify-content: center
}

#welcome-message {
    top: 100vh;
    top: 100dvh;
    touch-action: auto;
    pointer-events: auto
}

.fallback #welcome-message p,
.js-fallback #welcome-message p {
    -webkit-user-select: auto;
    user-select: auto
}

span {
    display: inline-block;
    will-change: transform;
    transform: translateZ(0)
}

a.nav-link {
    color: var(--color-link);
    text-decoration: none;
    font-family: var(--font-family-primary);
    font-style: italic;
    position: relative;
    cursor: default;
    z-index: 1;
    transition: color .5s ease-out, z-index .5s ease-out
}

a.nav-link:hover,
a.nav-link:focus-visible,
a.nav-link.js-link-hover {
    color: var(--color-link-hover);
    z-index: 5
}

a.nav-link:focus {
    outline: none
}

a.nav-link:before {
    content: "";
    display: block;
    position: absolute;
    --nav-link-padding: -.75em;
    top: var(--nav-link-padding);
    left: var(--nav-link-padding);
    right: var(--nav-link-padding);
    bottom: var(--nav-link-padding);
    z-index: 1
}

p.info>span.has-link {
    position: relative;
    z-index: 1
}