:root {
    --bg-main: #FAF9F7;
    --text-muted: #9B9B9B;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 24px;
}

body.space-mode {
    background: #000;
}

.header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}

.app-title-row {
    display: flex;
    align-items: center;
}

.app-title-part {
    font-size: 28px;
    font-weight: 300;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: lowercase;
    line-height: 1;
}

body.space-mode .app-title-part {
    color: rgba(255,255,255,0.9);
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.app-title-logo {
    width: 0;
    height: 48px;
    margin: 0 0 -6px 0;
    background: url('/assets/img/yogahhh-logo.png') center/contain no-repeat;
    transition: width 1.2s ease-out, margin 1.2s ease-out;
    cursor: pointer;
}

.expanded .app-title-logo {
    width: 48px;
    margin: 0 0 -6px -4px;
}

.app-subtitle-row {
    display: flex;
    justify-content: center;
    gap: 0.25em;
    margin-top: -4px;
    transition: gap 1.2s ease-out;
}

.expanded .app-subtitle-row {
    gap: 52px;
}

.app-subtitle-left,
.app-subtitle-right {
    font-size: 11px;
    font-weight: 300;
    font-style: italic;
    color: var(--text-muted);
    opacity: 0.6;
    white-space: nowrap;
}

body.space-mode .app-subtitle-left,
body.space-mode .app-subtitle-right {
    color: rgba(255,255,255,0.9);
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.lotus {
    position: fixed;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    margin-top: -280px;
    margin-left: -280px;
    width: 560px;
    height: 560px;
    background-size: 800% 400%;
    animation: lotus-bloom-fast 2.8s steps(1) infinite;
    z-index: 1;
}

body.space-mode .lotus {
    margin-top: -400px;
    margin-left: -400px;
    width: 800px;
    height: 800px;
    animation: lotus-bloom 4s steps(1) infinite;
}

@keyframes lotus-bloom-fast {
    0%      { background-position: 0% 0%; transform: scale(0.30) rotate(0deg); }
    2.5%    { background-position: 14.286% 0%; transform: scale(0.31) rotate(1deg); }
    5%      { background-position: 28.571% 0%; transform: scale(0.32) rotate(2deg); }
    7.5%    { background-position: 42.857% 0%; transform: scale(0.34) rotate(3deg); }
    10%     { background-position: 57.143% 0%; transform: scale(0.36) rotate(4deg); }
    12.5%   { background-position: 71.429% 0%; transform: scale(0.38) rotate(5deg); }
    15%     { background-position: 85.714% 0%; transform: scale(0.41) rotate(6deg); }
    17.5%   { background-position: 100% 0%; transform: scale(0.44) rotate(7deg); }
    18%     { background-position: 0% 33.333%; transform: scale(0.48) rotate(9deg); }
    18.5%   { background-position: 14.286% 33.333%; transform: scale(0.52) rotate(11deg); }
    19%     { background-position: 28.571% 33.333%; transform: scale(0.56) rotate(13deg); }
    19.5%   { background-position: 42.857% 33.333%; transform: scale(0.60) rotate(15deg); }
    20%     { background-position: 57.143% 33.333%; transform: scale(0.64) rotate(17deg); }
    20.5%   { background-position: 71.429% 33.333%; transform: scale(0.68) rotate(19deg); }
    21%     { background-position: 85.714% 33.333%; transform: scale(0.72) rotate(21deg); }
    21.5%   { background-position: 100% 33.333%; transform: scale(0.76) rotate(23deg); }
    22%     { background-position: 0% 66.667%; transform: scale(0.79) rotate(25deg); }
    22.5%   { background-position: 14.286% 66.667%; transform: scale(0.82) rotate(27deg); }
    23%     { background-position: 28.571% 66.667%; transform: scale(0.85) rotate(29deg); }
    23.5%   { background-position: 42.857% 66.667%; transform: scale(0.88) rotate(31deg); }
    24%     { background-position: 57.143% 66.667%; transform: scale(0.90) rotate(33deg); }
    24.5%   { background-position: 71.429% 66.667%; transform: scale(0.92) rotate(35deg); }
    25%     { background-position: 85.714% 66.667%; transform: scale(0.93) rotate(37deg); }
    25.5%   { background-position: 100% 66.667%; transform: scale(0.94) rotate(39deg); }
    26%     { background-position: 0% 100%; transform: scale(0.95) rotate(40deg); }
    31%     { background-position: 14.286% 100%; transform: scale(0.96) rotate(42deg); }
    36%     { background-position: 28.571% 100%; transform: scale(0.97) rotate(43.5deg); }
    41%     { background-position: 42.857% 100%; transform: scale(0.98) rotate(44.5deg); }
    46%     { background-position: 57.143% 100%; transform: scale(0.99) rotate(44.9deg); }
    50%     { background-position: 71.429% 100%; transform: scale(1.0) rotate(45deg); }
    54%     { background-position: 57.143% 100%; transform: scale(0.99) rotate(45.1deg); }
    59%     { background-position: 42.857% 100%; transform: scale(0.98) rotate(45.5deg); }
    64%     { background-position: 28.571% 100%; transform: scale(0.97) rotate(46.5deg); }
    69%     { background-position: 14.286% 100%; transform: scale(0.96) rotate(48deg); }
    74%     { background-position: 0% 100%; transform: scale(0.95) rotate(50deg); }
    74.5%   { background-position: 100% 66.667%; transform: scale(0.94) rotate(51deg); }
    75%     { background-position: 85.714% 66.667%; transform: scale(0.93) rotate(53deg); }
    75.5%   { background-position: 71.429% 66.667%; transform: scale(0.92) rotate(55deg); }
    76%     { background-position: 57.143% 66.667%; transform: scale(0.90) rotate(57deg); }
    76.5%   { background-position: 42.857% 66.667%; transform: scale(0.88) rotate(59deg); }
    77%     { background-position: 28.571% 66.667%; transform: scale(0.85) rotate(61deg); }
    77.5%   { background-position: 14.286% 66.667%; transform: scale(0.82) rotate(63deg); }
    78%     { background-position: 0% 66.667%; transform: scale(0.79) rotate(65deg); }
    78.5%   { background-position: 100% 33.333%; transform: scale(0.76) rotate(67deg); }
    79%     { background-position: 85.714% 33.333%; transform: scale(0.72) rotate(69deg); }
    79.5%   { background-position: 71.429% 33.333%; transform: scale(0.68) rotate(71deg); }
    80%     { background-position: 57.143% 33.333%; transform: scale(0.64) rotate(73deg); }
    80.5%   { background-position: 42.857% 33.333%; transform: scale(0.60) rotate(75deg); }
    81%     { background-position: 28.571% 33.333%; transform: scale(0.56) rotate(77deg); }
    81.5%   { background-position: 14.286% 33.333%; transform: scale(0.52) rotate(79deg); }
    82%     { background-position: 0% 33.333%; transform: scale(0.48) rotate(81deg); }
    82.5%   { background-position: 100% 0%; transform: scale(0.44) rotate(82deg); }
    85%     { background-position: 85.714% 0%; transform: scale(0.41) rotate(83deg); }
    87.5%   { background-position: 71.429% 0%; transform: scale(0.38) rotate(84deg); }
    90%     { background-position: 57.143% 0%; transform: scale(0.36) rotate(85deg); }
    92.5%   { background-position: 42.857% 0%; transform: scale(0.34) rotate(86deg); }
    95%     { background-position: 28.571% 0%; transform: scale(0.32) rotate(87deg); }
    97.5%   { background-position: 14.286% 0%; transform: scale(0.31) rotate(88deg); }
    100%    { background-position: 0% 0%; transform: scale(0.30) rotate(90deg); }
}

@keyframes lotus-bloom {
    0%      { background-position: 0% 0%; transform: scale(0.30) rotate(0deg); }
    2.5%    { background-position: 14.286% 0%; transform: scale(0.31) rotate(1deg); }
    5%      { background-position: 28.571% 0%; transform: scale(0.32) rotate(2deg); }
    7.5%    { background-position: 42.857% 0%; transform: scale(0.34) rotate(3deg); }
    10%     { background-position: 57.143% 0%; transform: scale(0.36) rotate(4deg); }
    12.5%   { background-position: 71.429% 0%; transform: scale(0.38) rotate(5deg); }
    15%     { background-position: 85.714% 0%; transform: scale(0.41) rotate(6deg); }
    17.5%   { background-position: 100% 0%; transform: scale(0.44) rotate(7deg); }
    18%     { background-position: 0% 33.333%; transform: scale(0.48) rotate(9deg); }
    18.5%   { background-position: 14.286% 33.333%; transform: scale(0.52) rotate(11deg); }
    19%     { background-position: 28.571% 33.333%; transform: scale(0.56) rotate(13deg); }
    19.5%   { background-position: 42.857% 33.333%; transform: scale(0.60) rotate(15deg); }
    20%     { background-position: 57.143% 33.333%; transform: scale(0.64) rotate(17deg); }
    20.5%   { background-position: 71.429% 33.333%; transform: scale(0.68) rotate(19deg); }
    21%     { background-position: 85.714% 33.333%; transform: scale(0.72) rotate(21deg); }
    21.5%   { background-position: 100% 33.333%; transform: scale(0.76) rotate(23deg); }
    22%     { background-position: 0% 66.667%; transform: scale(0.79) rotate(25deg); }
    22.5%   { background-position: 14.286% 66.667%; transform: scale(0.82) rotate(27deg); }
    23%     { background-position: 28.571% 66.667%; transform: scale(0.85) rotate(29deg); }
    23.5%   { background-position: 42.857% 66.667%; transform: scale(0.88) rotate(31deg); }
    24%     { background-position: 57.143% 66.667%; transform: scale(0.90) rotate(33deg); }
    24.5%   { background-position: 71.429% 66.667%; transform: scale(0.92) rotate(35deg); }
    25%     { background-position: 85.714% 66.667%; transform: scale(0.93) rotate(37deg); }
    25.5%   { background-position: 100% 66.667%; transform: scale(0.94) rotate(39deg); }
    26%     { background-position: 0% 100%; transform: scale(0.95) rotate(40deg); }
    31%     { background-position: 14.286% 100%; transform: scale(0.96) rotate(42deg); }
    36%     { background-position: 28.571% 100%; transform: scale(0.97) rotate(43.5deg); }
    41%     { background-position: 42.857% 100%; transform: scale(0.98) rotate(44.5deg); }
    46%     { background-position: 57.143% 100%; transform: scale(0.99) rotate(44.9deg); }
    50%     { background-position: 71.429% 100%; transform: scale(1.0) rotate(45deg); }
    54%     { background-position: 57.143% 100%; transform: scale(0.99) rotate(45.1deg); }
    59%     { background-position: 42.857% 100%; transform: scale(0.98) rotate(45.5deg); }
    64%     { background-position: 28.571% 100%; transform: scale(0.97) rotate(46.5deg); }
    69%     { background-position: 14.286% 100%; transform: scale(0.96) rotate(48deg); }
    74%     { background-position: 0% 100%; transform: scale(0.95) rotate(50deg); }
    74.5%   { background-position: 100% 66.667%; transform: scale(0.94) rotate(51deg); }
    75%     { background-position: 85.714% 66.667%; transform: scale(0.93) rotate(53deg); }
    75.5%   { background-position: 71.429% 66.667%; transform: scale(0.92) rotate(55deg); }
    76%     { background-position: 57.143% 66.667%; transform: scale(0.90) rotate(57deg); }
    76.5%   { background-position: 42.857% 66.667%; transform: scale(0.88) rotate(59deg); }
    77%     { background-position: 28.571% 66.667%; transform: scale(0.85) rotate(61deg); }
    77.5%   { background-position: 14.286% 66.667%; transform: scale(0.82) rotate(63deg); }
    78%     { background-position: 0% 66.667%; transform: scale(0.79) rotate(65deg); }
    78.5%   { background-position: 100% 33.333%; transform: scale(0.76) rotate(67deg); }
    79%     { background-position: 85.714% 33.333%; transform: scale(0.72) rotate(69deg); }
    79.5%   { background-position: 71.429% 33.333%; transform: scale(0.68) rotate(71deg); }
    80%     { background-position: 57.143% 33.333%; transform: scale(0.64) rotate(73deg); }
    80.5%   { background-position: 42.857% 33.333%; transform: scale(0.60) rotate(75deg); }
    81%     { background-position: 28.571% 33.333%; transform: scale(0.56) rotate(77deg); }
    81.5%   { background-position: 14.286% 33.333%; transform: scale(0.52) rotate(79deg); }
    82%     { background-position: 0% 33.333%; transform: scale(0.48) rotate(81deg); }
    82.5%   { background-position: 100% 0%; transform: scale(0.44) rotate(82deg); }
    85%     { background-position: 85.714% 0%; transform: scale(0.41) rotate(83deg); }
    87.5%   { background-position: 71.429% 0%; transform: scale(0.38) rotate(84deg); }
    90%     { background-position: 57.143% 0%; transform: scale(0.36) rotate(85deg); }
    92.5%   { background-position: 42.857% 0%; transform: scale(0.34) rotate(86deg); }
    95%     { background-position: 28.571% 0%; transform: scale(0.32) rotate(87deg); }
    97.5%   { background-position: 14.286% 0%; transform: scale(0.31) rotate(88deg); }
    100%    { background-position: 0% 0%; transform: scale(0.30) rotate(90deg); }
}

.coming-soon {
    position: fixed;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 32px;
    font-style: italic;
    color: var(--text-muted);
    z-index: 2;
}

body.space-mode .coming-soon {
    display: none;
}

.space-video {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

body.space-mode .space-video {
    display: block;
}

.mantra {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 48px;
    text-align: center;
    font-size: 16px;
    font-style: italic;
    color: rgba(255,255,255,0.85);
    line-height: 1.8;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    z-index: 2;
}

body.space-mode .mantra {
    display: flex;
}

.mantra-col {
    min-width: 200px;
}

.devanagari {
    font-style: normal;
}

.credit {
    display: none;
    position: fixed;
    bottom: 12px;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    z-index: 2;
}

body.space-mode .credit {
    display: block;
}

.credit:hover { color: rgba(255,255,255,0.7); }
.credit-left { left: 12px; }
.credit-right { right: 12px; }

@media (max-width: 768px) {
    .mantra { flex-direction: column; gap: 24px; font-size: 14px; }
    .mantra-col { min-width: auto; }
}