@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
*{box-sizing:border-box}
body{margin:0;background:#0e2119;color:#17251e;font-family:DM Sans,Arial,sans-serif}
.app{min-height:100vh;max-width:540px;margin:auto;background:#f7f3ea;padding:25px 22px 118px;position:relative}
header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px}
.logo{font-weight:700;font-size:20px;letter-spacing:.08em;color:#b38c48}
.logo small{display:block;font-size:7px;letter-spacing:.55em;margin:3px 0 0 8px}
.back{color:#426755;text-decoration:none;letter-spacing:.12em;font-size:9px;font-weight:700;padding-top:5px}
button,a{font:inherit;cursor:pointer;border:0;text-decoration:none}
.screen{display:none}
.screen.active{display:block}
.eyebrow{color:#a68145;font-size:10px;font-weight:700;letter-spacing:.18em;margin:0 0 12px}
h1,h2,strong{font-family:'Playfair Display',Georgia,serif;font-weight:500}
h1{font-size:48px;line-height:.98;margin:0 0 24px;letter-spacing:-.055em}
h1 i,h2 i{color:#527462}
.about{font-size:13px;color:#536158;line-height:1.65;margin:0 0 21px}
.refuge{height:220px;width:100%;text-align:left;padding:25px;background:radial-gradient(circle at 72% 24%,#769681,#1c4031 52%,#0d251b);color:#fff;position:relative;box-shadow:0 11px 26px #112a2055}
.refuge b{font-size:44px;color:#d7b86f;display:block}
.refuge small{font-size:9px;letter-spacing:.15em}
.refuge strong{font-size:31px;line-height:1.04;display:block;margin-top:8px}
.refuge em{position:absolute;right:24px;bottom:22px;color:#e4c679;font-size:24px;font-style:normal}
.mood{margin:16px 0;padding:15px;border:1px solid #d4bd84;background:#e8ebdf;box-shadow:0 5px 14px #173a2d19}
.mood p{font-size:12px;font-weight:700;margin:0 0 8px}
.mood div{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.mood button{padding:9px 2px;background:#f7f3ea;border-radius:7px;font-size:22px;transition:.2s}
.mood button:active{background:#d9b66c;transform:scale(.95)}
.mood small{display:block;font-size:8px;font-weight:700;margin-top:4px;color:#365341}
.card{width:100%;padding:20px;text-align:left;margin-top:13px;background:#dce4d8;border-left:5px solid #c7a465;box-shadow:0 7px 17px #173a2d1d;min-height:112px}
.card span,.card b{display:block;font-size:10px;color:#51645a;font-weight:700;letter-spacing:.08em}
.card strong{font-size:29px;line-height:1.02;display:block;margin:7px 0 15px}
.card.light{min-height:176px;color:#fff;background:linear-gradient(90deg,#102d21f5 0%,#173b2ec7 50%,#17392a22 100%),url('../lolita-directora.png') center 34%/cover;border-left-color:#e0bd70}
.card.light span,.card.light b{color:#f8e8c4}
.card.light strong{font-size:31px;text-shadow:0 2px 7px #0c2119}
.ritual{width:100%;text-align:left;background:#e3e8de;margin:9px 0;padding:17px 15px;border-left:4px solid #c7a465;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 4px 11px #173a2d13}
.ritual span{display:flex;align-items:flex-start;flex-direction:column;gap:3px;font-size:19px}
.ritual span b{font-size:18px;color:#244734}
.ritual span small{font:12px/1.42 DM Sans;color:#596b60}
.ritual>b{color:#a68042;font-size:21px}
.reading,.contact,.refuge-note{background:#e3e8de;padding:18px;line-height:1.65;margin-top:20px}
.reading{font:20px/1.45 'Playfair Display',Georgia}
.reading button{background:#183d2e;color:#fff;padding:12px 14px;margin-top:14px;font:700 10px DM Sans;letter-spacing:.08em}
.breathe{text-align:center}
.breath-stage{height:210px;display:flex;align-items:center;justify-content:center;margin:24px 0 17px}
.orb{width:170px;height:170px;border-radius:50%;background:radial-gradient(circle at 32% 25%,#eddb98,#a8803f 37%,#456b57 70%);display:flex;align-items:center;justify-content:center;font:64px 'Playfair Display';color:#fff;box-shadow:0 15px 32px #2344335c;transition:transform 1s ease,background 1s ease}
.mode-666.inhale{transform:scale(1.18);background:radial-gradient(circle at 32% 25%,#f6e7ac,#b89145 39%,#456b57 70%)}
.mode-666.hold{transform:scale(1.18)}
.mode-666.exhale{transform:scale(.78);background:radial-gradient(circle,#ebdcaa,#7a9a7d 43%,#345b48)}
.mode-757{width:100%;height:105px;border-radius:18px;background:#173c2e;padding:18px;display:flex;gap:9px}
.mode-757 .dot{width:22px;height:22px;border-radius:50%;background:#557769;box-shadow:none;transition:.45s}
.mode-757 .dot.lit{background:#f0cf77;box-shadow:0 0 18px #edc45e}
.mode-compas{width:100%;height:110px;border-radius:14px;background:#173c2e;box-shadow:none;position:relative;overflow:hidden}
.mode-compas:before{content:'';position:absolute;left:11%;right:11%;height:3px;top:53px;background:#b9a166}
.mode-compas .line{width:76%;height:66px;border-left:4px solid #e8c979;border-top:4px solid #e8c979;border-right:4px solid #e8c979;border-bottom:4px solid #e8c979;border-radius:7px;clip-path:polygon(0 100%,21% 15%,43% 15%,76% 88%,100% 88%,100% 100%,0 100%);transition:transform 1s ease}
.mode-compas.inhale .line{transform:translateY(-10px)}
.mode-compas.hold .line{transform:translateY(-10px)}
.mode-compas.exhale .line{transform:translateY(12px)}
.mode-compas.rest .line{transform:translateY(12px)}
.gold{display:block;width:100%;text-align:center;background:#c7a465;color:#17281f;padding:18px;font-weight:700;font-size:10px;letter-spacing:.13em;box-shadow:0 5px 13px #8f6b2d33}
.outline{width:100%;padding:15px;margin-top:10px;background:transparent;color:#fff;border:1px solid #dfbd72;text-transform:uppercase;font-size:10px;letter-spacing:.1em}
.dark{min-height:calc(100vh - 145px);margin:-25px -22px -118px;padding:52px 26px;background:radial-gradient(circle at 60% 22%,#799078,#173a2d 40%,#0d2119);color:#fff}
.key{font-size:90px;color:#d5b666;transform:rotate(-16deg);margin:38px 0}
.dark p{font-size:15px;line-height:1.7}
.refuge-note{color:#213e30;background:#e3e1d2;text-align:left;font-size:12px}
.services{display:grid;gap:11px}
.services article{background:#e3e8de;padding:18px;border-left:4px solid #c7a465}
.services article b,.services article small,.services article strong{display:block}
.services article b{font:22px 'Playfair Display'}
.services article small{font-size:12px;color:#566b60;margin:5px 0}
.services article strong{font-size:25px;color:#a68042;margin:8px 0}
.services .featured{background:#dfc98f}
.link{margin-top:8px}
.director-photo{width:100%;max-height:440px;object-fit:cover;object-position:center 34%;display:block;margin:0 0 15px;box-shadow:0 9px 20px #173a2d3b}
.contact{font-size:12px}
.contact b{font-size:18px}
nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);height:96px;max-width:540px;width:100%;display:grid;grid-template-columns:repeat(5,1fr);background:#183b2d;border-top:3px solid #c7a465;box-shadow:0 -7px 22px #0b1f1788;z-index:4}
nav button{background:transparent;color:#eadcbb;font-size:24px;font-weight:700}
nav button.on{color:#ffda80;background:#285744}
nav small{font:700 9px DM Sans;display:block;margin-top:4px;letter-spacing:.04em}
@media(min-width:541px){.app{box-shadow:0 0 60px #0008;min-height:900px}
}

 .mode-666.inhala{transform:scale(1.18);background:radial-gradient(circle at 32% 25%,#f6e7ac,#b89145 39%,#456b57 70%)}
.mode-compas.inhala .line{transform:translateY(-10px)}

.install-app{width:100%;margin:0 0 15px;padding:15px;background:#183d2e;color:#f7db91;font-size:11px;font-weight:700;letter-spacing:.1em;box-shadow:0 5px 13px #183d2e2e}
.install-app b{font-size:17px;margin-right:8px}