:root{--bg:#e8f3f9;--bg2:#dbeaf4;--ink:#314756;--muted:#8195a2;--accent:#6f96ae;--line:rgba(77,111,132,.12);--paper:rgba(249,252,253,.78)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;color:var(--ink);background:linear-gradient(180deg,#eef7fb 0%,var(--bg) 50%,var(--bg2) 100%)}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button{font:inherit}
.app{max-width:430px;height:100svh;margin:auto;padding:calc(10px + env(safe-area-inset-top)) 22px calc(58px + env(safe-area-inset-bottom));background:transparent;overflow:hidden}
.page{display:none;height:100%;overflow:hidden}.page.active{display:block}
.date,.intro{font-size:11px;color:var(--muted)}.date{margin:0 0 2px}.intro{margin:5px 0 14px}
.viewing{margin:0;font-size:8px;letter-spacing:.11em;text-transform:uppercase;color:#96a7b1}
h1{font:400 clamp(28px,8vw,34px)/1.02 Georgia,serif;letter-spacing:-.025em;margin:0}
.eyebrow{font-size:8px;font-weight:700;letter-spacing:.16em;color:#8397a3;margin:0 0 6px}
.day-switch{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;text-align:center;margin-bottom:8px}
.day-switch button{width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.48);color:#7794a5;display:grid;place-items:center}
.day-switch svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.practice-card{overflow:hidden;border-radius:19px;background:var(--paper);border:1px solid rgba(255,255,255,.9);box-shadow:0 12px 30px rgba(69,101,120,.08)}
.hero{height:min(30svh,220px);position:relative;background:linear-gradient(145deg,#c7dce8,#91afc1)}
.hero img{width:100%;height:100%;object-fit:cover;display:block}
.hero-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#5f7d8e;font:italic 13px Georgia,serif}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:var(--accent);font-size:17px;box-shadow:0 6px 20px rgba(34,56,68,.12)}
.card-body{padding:14px 17px 12px}.practice-title{font:400 23px Georgia,serif;margin:4px 0}.meta{font-size:9px;color:#879aa5}
.primary{display:none}
.text-button{display:block;width:100%;border:0;background:none;color:#7894a5;font-size:10px;padding:12px 0 10px;text-align:left}
.intention{text-align:center;padding:15px 10px 0}.intention blockquote{margin:4px 0 0;font:italic 12px/1.4 Georgia,serif;color:#78909e}
.complete-row{margin-top:0;padding:11px 0 2px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.complete-row strong{font-size:10px;font-weight:650}.complete-row small{display:block;color:#8b9ca6;margin-top:2px;font-size:8px}
.check{width:23px;height:23px;border-radius:50%;border:1px solid #9cb7c7;background:transparent;color:white}.check.done{background:var(--accent);border-color:var(--accent)}
.rest{text-align:center;padding:34px 20px;background:rgba(249,252,253,.55);border-radius:20px;margin-top:26px}.rest-mark{font:34px Georgia,serif;color:#8ca9ba}.rest h2,.month,.audio-panel h2{font:400 23px Georgia,serif;margin:8px 0}.rest p{font-size:10px;line-height:1.55;color:var(--muted)}
.track{display:grid;grid-template-columns:64px 1fr 31px;gap:11px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}.track:first-child{border-top:1px solid var(--line)}
.thumb{width:64px;height:64px;border-radius:12px;background:linear-gradient(145deg,#cadde8,#9cb9ca);overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover}
.track h3{font:400 16px Georgia,serif;margin:0 0 4px}.track p{font-size:9px;color:#899ca7;margin:0}.next{font:700 7px -apple-system,sans-serif;letter-spacing:.12em;color:var(--accent);text-transform:uppercase}
.small-play{width:29px;height:29px;border:0;border-radius:50%;background:rgba(255,255,255,.72);color:var(--accent)}
.audio-panel{text-align:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}.audio-panel audio{width:100%;height:34px;margin-top:4px}.hidden{display:none}
.month{margin:16px 0 10px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.dow{text-align:center;font-size:8px;color:#91a1aa;padding-bottom:5px}.day{height:min(6svh,39px);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;border-radius:50%}.day.today{box-shadow:inset 0 0 0 1px #8aa8b9}.dot{width:3px;height:3px;border-radius:50%;background:var(--accent);margin-top:3px}.calendar-note{text-align:center;font-size:8px;color:#8a9ca6;margin-top:12px}
.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(430px,100%);height:calc(52px + env(safe-area-inset-bottom));padding:5px 18px env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(3,1fr);align-items:center;background:rgba(237,246,250,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid rgba(87,116,133,.06);z-index:20}
.bottom-nav button{height:46px;border:0;background:none;color:#8a9ca6;font-size:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0}.bottom-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}.bottom-nav button.active{color:#668ba2}
.toast{position:fixed;bottom:70px;left:50%;transform:translate(-50%,12px);opacity:0;transition:.2s;background:#526f80;color:#fff;border-radius:30px;padding:8px 13px;font-size:9px}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-height:720px){.app{padding-top:calc(10px + env(safe-area-inset-top))}.hero{height:25svh}.intro{margin-bottom:9px}.card-body{padding:10px 15px}.intention{padding-top:7px}.complete-row{margin-top:5px}.track{padding:5px 0}.thumb{width:56px;height:56px}.track{grid-template-columns:56px 1fr 29px}}