@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --color-bg: #efefef;
    --color-text: #1c1c1c;
    --color-accent: #32ff00;
    --color-white: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    min-height: 100svh;
    overflow: hidden;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: 'DM Sans', sans-serif;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

button {
    font: inherit;
}

.bright-side-page {
    min-height: 100svh;
}

.interact-cta {
    position: fixed;
    top: calc(24px + env(safe-area-inset-top));
    left: 18px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.bright-side-page.cover-is-black .interact-cta {
    color: var(--color-bg);
}

.bright-side-page.cover-is-green .interact-cta {
    color: var(--color-text);
}

.bright-side-start,
.bright-side-stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: var(--color-bg);
}

.bright-side-start {
    z-index: 2;
    display: grid;
    place-items: center;
    padding: 96px 24px;
}

.bright-side-start-btn {
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}

.bright-side-message {
    position: absolute;
    left: var(--message-x, 50%);
    top: var(--message-y, 50%);
    z-index: 1;
    width: min(68vw, 300px);
    transform: translate(-50%, -50%);
    text-align: center;
}

.bright-side-message p {
    color: var(--color-text);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.04em;
    overflow-wrap: anywhere;
}

.bright-side-canvas {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
}

.bright-side-canvas:active {
    cursor: grabbing;
}