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

body {
    background: #0a0f1a;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Georgia', serif;
    color: #9ca3af;
}

@media (prefers-color-scheme: light) {
    body {
        background: hsl(210, 20%, 88%);
        color: #5a5550;
    }
    .breath {
        border: 2px solid rgba(90, 85, 80, 0.4);
        background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
        box-shadow: 0 0 50px rgba(255, 255, 255, 0.5), inset 0 0 50px rgba(255, 255, 255, 0.3);
    }
    h1 { opacity: 0.7; }
    p { opacity: 0.6; }
}

@media (prefers-color-scheme: dark) {
    .breath {
        border: 2px solid rgba(156, 163, 175, 0.3);
        background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
        box-shadow: 0 0 50px rgba(59, 130, 246, 0.3), inset 0 0 50px rgba(59, 130, 246, 0.2);
    }
    h1 { opacity: 0.8; }
    p { opacity: 0.7; }
}

.container {
    text-align: center;
    max-width: 600px;
    padding: 40px;
    animation: fadeIn 4s ease;
}

main {
    text-align: center;
    max-width: 600px;
    padding: 40px;
    animation: fadeIn 4s ease;
}

section {
    display: contents;
}

h1 {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    margin-bottom: 120px;
    opacity: 0.7;
}

.breath {
    width: 200px;
    height: 200px;
    margin: 0 auto 120px;
    border-radius: 50%;
    animation: breathe 16s ease-in-out infinite;
}

p {
    font-size: 1.1rem;
    line-height: 2.5;
    opacity: 0.6;
    letter-spacing: 0.05em;
}

@keyframes breathe {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.4;
    }
    50% { 
        transform: scale(1.6); 
        opacity: 0.7;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}