.mind-hero {
  min-height: 330px;
  display: flex;
  align-items: center;
  padding: clamp(22px, 5vw, 64px);
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(90deg,#201632d9,#20163230 70%),url("art/yogi-lake.jpg") center 55% / cover;
}
.mind-hero h1 { font-size: clamp(2.6rem,7vw,5.4rem); margin: 0 0 20px; }
.mind-hero nav { display:flex; flex-wrap:wrap; gap:8px; }
.mind-hero button { background: #fff; color: #34234e; border-color: transparent; }
.mind-panel { margin-top: 22px; scroll-margin-top: 16px; }
.mind-panel h2 { margin-bottom: 18px; }
.mind-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.mind-panel select { display:block; width:100%; margin-top:6px; }
.mind-breath-scene, .mind-meditation-scene { min-height: 410px; border-radius: 20px; background-position: center; background-size: cover; }
.mind-breath-scene { display: grid; justify-items:center; align-content:end; gap:24px; padding:24px; }
.mind-orb {
  width: 92px; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 28px #f5e1ffc9, inset 0 0 28px #e9d9ff;
  background: radial-gradient(circle at 30% 25%,#fff9,#e5c4ff55 48%,#e0bfff88);
  transition: transform 1s linear;
}
.mind-orb[data-motion="inhale"],.mind-orb[data-motion="hold-full"] { transform:scale(1.28); }
.mind-orb[data-motion="sip"] { transform:scale(1.43); }
.mind-breath-card, .mind-player { padding: 18px 20px; border-radius: 18px; color:#261e3f; background: #fbf7fff2; }
.mind-breath-card { text-align:center; width:min(100%,420px); }
.mind-breath-scene.is-practising .mind-breath-card {
  background: transparent;
  color: #fff;
  text-shadow: 0 1px 4px #12152c, 0 2px 12px #12152c;
}
.mind-breath-scene.is-practising .mind-breath-card button { text-shadow: none; }
.mind-breath-card h3,.mind-breath-card p { margin:0 0 10px; }
.mind-breath-card .actions { justify-content:center; }
.mind-meditation-scene {
  display:flex; align-items:flex-end; padding:clamp(12px,4vw,36px);
  background-image: url("art/meditation-buddha.jpg");
  background-position: center 58%;
}
.mind-player { width:min(100%,420px); }
.mind-player audio { width:100%; }
.mind-links { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.92rem; }
.mind-links a,.mind-week-link { text-decoration: underline; }
.mind-week-link { margin-left:12px; }
.mind-panel details { margin-top:16px; }
#mind-affirmation { max-width: 720px; }
#mind-affirmation fieldset { margin:0 0 16px; border:1px solid #d6cce9; border-radius:12px; padding:12px; }
.mind-values { display:flex; flex-wrap:wrap; gap:8px 16px; }
.mind-values label { white-space:nowrap; }
@media(max-width:550px) {
  .mind-hero { min-height:235px; }
  .mind-breath-scene { min-height:360px; padding:12px; }
  .mind-meditation-scene { min-height:400px; background-position:65% center; }
  .mind-options { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { .mind-orb { transition:none !important; } }
.heart-layout {display:grid;grid-template-columns:minmax(0,1fr) minmax(140px,.8fr);gap:12px;align-items:center}
.heart-stickers {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.heart-stickers button {display:grid;justify-items:center;align-content:center;gap:4px;padding:6px 2px;min-height:64px;line-height:1.15;font-size:clamp(.72rem,1.8vw,.9rem);background:#f8fbff}
.heart-stickers button img {width:100%;max-width:74px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 3px 4px #5d418c27);pointer-events:none}
.heart-stickers button[aria-pressed=true],.heart-stickers button.in-heart {background:#fff3dc;border-color:#d2a654}
.heart-portrait {position:relative;isolation:isolate;aspect-ratio:1;max-width:280px;width:100%;margin:auto;display:grid;place-items:center;border-radius:22px;background:radial-gradient(ellipse at center,#fffaf6,#eae4f8)}
.heart-wolf,.heart-sparkles,.heart-colours {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.heart-colours {border-radius:50%;inset:12%;width:76%;height:76%;opacity:0;filter:blur(17px);transition:opacity .35s}
.heart-sparkles {opacity:0;transition:opacity .3s}
.has-values .heart-colours {opacity:.66}
.has-values .heart-sparkles {opacity:1}
.heart-drop {position:absolute;left:50%;top:75%;transform:translate(-50%,-50%);border-radius:50%;width:44px;height:44px;padding:0;color:#8c2650;background:#fff5efc9;border-color:#fff;font-size:22px;box-shadow:0 0 15px var(--heart-glow)}
.has-values .heart-drop {background:radial-gradient(circle at 30% 25%,#fff,var(--heart-glow));}
.is-drop-target .heart-drop {outline:3px solid #a44c81;outline-offset:4px}
.heart-pop .heart-sparkles {animation:heart-twinkle .65s ease-out}
@keyframes heart-twinkle {0%{opacity:0;transform:scale(.8)}55%{opacity:1;transform:scale(1.12)}100%{transform:scale(1)}}
.heart-kept {display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.heart-kept button {font-size:.8rem;padding:5px 8px}
.heart-status {margin-top:5px}
#handstand-log {margin-top:16px}
#handstand-log .actions {margin-bottom:12px}
#handstand-clock {font-size:1.65rem;font-weight:700;font-variant-numeric:tabular-nums;min-width:80px}
.handstand-bests {grid-template-columns:repeat(2,minmax(0,1fr))}
.handstand-bests>div {padding:10px;background:#f6efff;border-radius:10px}
#handstand-target {margin-bottom:12px;align-items:end}
@media(max-width:480px){.heart-layout{grid-template-columns:1fr}.heart-portrait{max-width:205px}}
@media(prefers-reduced-motion:reduce){.heart-pop .heart-sparkles{animation:none}.heart-colours,.heart-sparkles{transition:none}}