:root {
    --phi: calc((1 + sqrt(5)) / 2);
    --phi-2: calc(var(--phi) * var(--phi));
    --phi-3: calc(var(--phi-2) * var(--phi));
    --phi-4: calc(var(--phi-3) * var(--phi));
    --phi-5: calc(var(--phi-4) * var(--phi));
    --phi-6: calc(var(--phi-5) * var(--phi));
    --phi-7: calc(var(--phi-6) * var(--phi));
    --phi-8: calc(var(--phi-7) * var(--phi));

    --phi-inv: calc(1 / var(--phi));
    --phi-inv-2: calc(var(--phi-inv) * var(--phi-inv));
    --phi-inv-3: calc(var(--phi-inv-2) * var(--phi-inv));
    --phi-inv-4: calc(var(--phi-inv-3) * var(--phi-inv));
    --phi-inv-5: calc(var(--phi-inv-4) * var(--phi-inv));

    --base: calc(var(--phi-2) * var(--phi-inv) * 10px);

    --space-xs: calc(var(--base) * var(--phi-inv-5));
    --space-sm: calc(var(--base) * var(--phi-inv-4));
    --space-md: calc(var(--base) * var(--phi-inv-3));
    --space-lg: calc(var(--base) * var(--phi-inv-2));
    --space-xl: calc(var(--base) * var(--phi-inv));
    --space-2xl: var(--base);
    --space-3xl: calc(var(--base) * var(--phi));
    --space-4xl: calc(var(--base) * var(--phi-2));
    --space-5xl: calc(var(--base) * var(--phi-3));
    --space-6xl: calc(var(--base) * var(--phi-4));
    --space-7xl: calc(var(--base) * var(--phi-5));
    --space-8xl: calc(var(--base) * var(--phi-6));
    --space-9xl: calc(var(--base) * var(--phi-7));
    --space-10xl: calc(var(--base) * var(--phi-8));

    --font-xs: calc(var(--base) * var(--phi-inv));
    --font-sm: calc(var(--base) * var(--phi));
    --font-base: var(--base);
    --font-md: calc(var(--base) * var(--phi-2));
    --font-lg: calc(var(--base) * var(--phi-3));
    --font-xl: calc(var(--base) * var(--phi-4));

    --black: #000;
    --near-black: #111;
    --dark-gray: #222;
    --gray: #333;
    --mid-gray: #888;
    --white: #fff;

    --weight-light: 200;
    --weight-normal: 300;
    --weight-medium: 400;

    --width-main: calc(var(--base) * 60);
    --width-exercises: calc(var(--base) * 120);
    --width-card: calc(var(--base) * 28);
    --width-circle: calc(var(--base) * 20);

    --border-thin: var(--space-xs);
    --border-thick: var(--space-md);

    --opacity-hidden: 0;
    --opacity-dim: 0.2;
    --opacity-full: 1;

    --transition-fast: calc(var(--base) * var(--phi-inv) * 0.1s);
    --transition-normal: calc(var(--base) * var(--phi-inv-2) * 1s);

    --scale-shrink: var(--phi-inv);
    --scale-normal: 1;
    --scale-grow: var(--phi);
    --scale-huge: calc(var(--phi) * var(--phi) * var(--phi-inv));

    --viewport-width: 90%;
    --breakpoint: calc(var(--base) * var(--phi-6) * var(--phi-3));
}

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

body {
    font-family: sans-serif;
    font-size: var(--font-base);
    background: var(--black);
    color: var(--white);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

main {
    width: var(--viewport-width);
    max-width: var(--width-main);
    padding: var(--space-4xl);
    background: var(--near-black);
    border: var(--border-thin) solid var(--gray);
    border-radius: var(--space-lg);
    text-align: center;
}

h1 {
    font-size: var(--font-xl);
    font-weight: var(--weight-normal);
    margin-bottom: var(--space-xl);
}

h2 {
    font-size: var(--font-lg);
    font-weight: var(--weight-normal);
    margin-bottom: var(--space-2xl);
}

h3 {
    font-size: var(--font-md);
    font-weight: var(--weight-medium);
}

p {
    font-size: var(--font-sm);
    color: var(--mid-gray);
    margin-bottom: var(--space-4xl);
}

button {
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: all var(--transition-normal);
}

a {
    color: var(--white);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--mid-gray);
}

nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    margin-bottom: var(--space-4xl);
}

nav button {
    padding: var(--space-2xl);
    background: var(--near-black);
    border: var(--border-thin) solid var(--gray);
    border-radius: var(--space-lg);
    color: var(--white);
    font-size: var(--font-md);
    font-weight: var(--weight-normal);
}

nav button:hover {
    background: var(--dark-gray);
    border-color: var(--white);
    transform: translateY(calc(var(--space-sm) * -1));
}

nav button:active {
    transform: translateY(0);
}

.exercises main {
    max-width: var(--width-exercises);
    text-align: left;
}

.back {
    background: none;
    color: var(--white);
    font-size: var(--font-base);
    padding: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.back:hover {
    color: var(--mid-gray);
}

.exercises h1 {
    text-align: center;
    margin-bottom: var(--space-4xl);
}

section {
    margin-bottom: var(--space-4xl);
}

section h2 {
    font-size: var(--font-md);
    color: var(--mid-gray);
    margin-bottom: var(--space-2xl);
}

.cards {
    display: flex;
    gap: var(--space-2xl);
    overflow-x: auto;
    padding-bottom: var(--space-xl);
}

.cards::-webkit-scrollbar {
    height: var(--space-lg);
}

.cards::-webkit-scrollbar-track {
    background: var(--near-black);
    border-radius: var(--space-xs);
}

.cards::-webkit-scrollbar-thumb {
    background: var(--gray);
    border-radius: var(--space-xs);
}

.card {
    min-width: var(--width-card);
    padding: var(--space-2xl);
    background: var(--near-black);
    border: var(--border-thin) solid var(--gray);
    border-radius: var(--space-lg);
    position: relative;
}

.card h3 {
    margin-bottom: var(--space-lg);
}

.card p {
    font-size: var(--font-xs);
    color: var(--mid-gray);
    margin: var(--space-xs) 0;
}

.card .pattern {
    color: var(--white);
    font-size: var(--font-base);
}

.card button {
    position: absolute;
    bottom: var(--space-2xl);
    right: var(--space-2xl);
    width: var(--space-4xl);
    height: var(--space-4xl);
    border-radius: 50%;
    background: var(--white);
    color: var(--black);
    font-size: var(--font-base);
}

.card button:hover {
    background: var(--mid-gray);
    transform: scale(var(--scale-grow));
}

.session main {
    padding: var(--space-4xl);
}

.session h2 {
    color: var(--mid-gray);
}

.breath {
    margin: var(--space-4xl) 0;
}

#phase {
    font-size: var(--font-md);
    color: var(--white);
    margin-bottom: var(--space-2xl);
    text-transform: uppercase;
    letter-spacing: var(--space-xs);
}

.circle {
    width: var(--width-circle);
    height: var(--width-circle);
    margin: 0 auto;
    border-radius: 50%;
    background: var(--dark-gray);
    border: var(--border-thick) solid var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 var(--space-4xl) rgba(255, 255, 255, var(--opacity-dim));
    transform: scale(var(--scale-normal));
    will-change: transform;
}

#count {
    font-size: var(--font-xl);
    font-weight: var(--weight-light);
}

#stop {
    padding: var(--space-xl) var(--space-4xl);
    background: var(--near-black);
    border: var(--border-thin) solid var(--gray);
    border-radius: var(--space-lg);
    color: var(--white);
    font-size: var(--font-base);
}

#stop:hover {
    background: var(--dark-gray);
    border-color: var(--white);
}

.toast {
    position: fixed;
    bottom: var(--space-5xl);
    left: 50%;
    transform: translateX(-50%) translateY(var(--space-5xl));
    padding: var(--space-xl) var(--space-2xl);
    background: var(--gray);
    color: var(--white);
    border-radius: var(--space-lg);
    font-size: var(--font-xs);
    opacity: var(--opacity-hidden);
    transition: all var(--transition-normal);
    pointer-events: none;
}

.toast.visible {
    opacity: var(--opacity-full);
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {
    h1 {
        font-size: var(--font-lg);
    }

    h2 {
        font-size: var(--font-md);
    }

    main {
        padding: var(--space-3xl);
    }

    .circle {
        width: calc(var(--width-circle) * var(--phi-inv));
        height: calc(var(--width-circle) * var(--phi-inv));
    }

    .card {
        min-width: calc(var(--width-card) * var(--phi-inv));
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: calc(var(--base) * var(--phi-inv-5) * 1ms) !important;
        transition-duration: calc(var(--base) * var(--phi-inv-5) * 1ms) !important;
    }
}