@charset "UTF-8";
/* User-supplied Mindful Companion and Breathstone: cloud light and living stone.
   Scenic layers are decorative. Member media and long reviews stay ordinary flow. */
:root { --nature-lilac: #756d9e; --nature-warm: #f2ece3; }
body { background: linear-gradient(155deg, #f6f8f3 0, #f3f5f8 30rem, #f8f6f1 75rem, #f6f8f3 110rem); }
.club-note { border-bottom-color: #dce4df; }
.section-heading .eyebrow { color: #8b8198; }
.leaderboard { position: relative; }
.podium-card { background: #fffefa; border-color: #e4e5dd; }
.podium-card .feedback-preview { background: linear-gradient(120deg, #f0f2fc, #f4f5ed); border-color: #e1e3ef; }
.feedback-preview-heading { color: #77718e; }
.feedback-preview-heading strong { color: #526956; }

/* Warm, tactile record invitation. Only the artwork has a mouse reveal. */
#app-shell .quiet-invite.nature-measured {
  position: relative; isolation: isolate; display: flex; justify-content: flex-start;
  min-height: 380px; overflow: hidden; padding: 54px 52px; gap: 0;
  border: 1px solid #ded8ce; background: #eee8de; border-radius: 24px;
}
.nature-measured-art { position: absolute; inset: 0 0 0 32%; z-index: -2; overflow: hidden; }
.nature-measured-art>img, .nature-measured-art>canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#app-shell .nature-measured::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #f1ece3 0%, #f1ece3f5 27%, #f1ece3d6 37%, #f1ece34a 53%, transparent 66%); }
.nature-measured::after { content: ""; position: absolute; inset: 10px; border: 1px solid #fff8; border-radius: 17px; pointer-events: none; }
.nature-measured-copy { max-width: 56%; }
.nature-measured .eyebrow { color: #7e806c; font-size: 10px; letter-spacing: 2px; }
.nature-measured h2 { font-size: clamp(24px, 2.7vw, 35px); line-height: 1.6; letter-spacing: -1px; margin: 15px 0 14px; color: #394938; }
.nature-measured p { color: #697463; margin-bottom: 23px; }
.nature-measured .secondary { background: #fffefa; border-color: #cfd4c4; min-height: 44px; }
.nature-caption { position: absolute; right: 23px; bottom: 19px; font-size: 8px; letter-spacing: 2.3px; color: #626e5b; pointer-events: none; }

/* Cloud garden: one new decorative video, loaded only in the visible community. */
#community-page>.page-title.nature-cloud-banner {
  position: relative; isolation: isolate; overflow: hidden; align-items: center;
  min-height: 300px; margin: 24px 0 22px; padding: 43px 48px;
  background: #e8e7f4; border: 1px solid #dcd9ea; border-radius: 24px;
}
.nature-cloud-art { position: absolute; inset: 0 0 0 25%; z-index: -3; }
.nature-cloud-art>img, .nature-cloud-art>video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.nature-cloud-art>video { opacity: 0; transition: opacity .6s ease; }
.nature-cloud-art>video.nature-video-ready { opacity: 1; }
#community-page>.nature-cloud-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #e8e7f4 0%, #e8e7f4f5 28%, #e8e7f4c9 43%, #e8e7f438 62%, transparent 82%); }
.nature-cloud-copy { position: relative; max-width: 66%; }
.nature-cloud-copy .eyebrow { color: #797195; font-size: 10px; letter-spacing: 2.2px; }
.nature-cloud-copy h1 { color: #48445f; font-size: clamp(30px, 3.5vw, 47px); line-height: 1.3; letter-spacing: -1.4px; margin: 13px 0 10px; }
.nature-cloud-copy p { color: #69637c; margin: 0 0 24px; }
.nature-cloud-copy .primary { background: linear-gradient(130deg, #8980aa, #69638c); box-shadow: inset 0 1px #ffffff40, 0 6px 18px #71698b12; border-color: #7d759b; }
.nature-cloud-foreground { position: absolute; width: 39%; height: 95%; object-fit: contain; object-position: right bottom; right: -5%; bottom: -26%; opacity: .7; z-index: -2; pointer-events: none; }
.nature-cloud-banner .nature-caption { color: #eeecfa; text-shadow: 0 1px 3px #716681; }
.community-tabs { background: #eeedf7; border-color: #e0dced; }
#community-page .community-intro { background: linear-gradient(120deg, #eeeef8, #f6f2ed); border-color: #e6e2eb; }
#community-page .discussion-card { background: #fffefa; border-color: #e6e2e9; }

/* A small invitation shares the cached cloud still, rather than a second video. */
#app-shell .community-invite { position: relative; isolation: isolate; overflow: hidden; background: #e8e7f3; border-color: #dcd9e7; padding: 37px 40px; }
#app-shell .community-invite::before { content: ""; position: absolute; inset: 0 0 0 43%; width: auto; height: auto; border: 0; border-radius: 0; transform: none; animation: none; z-index: -2; background: url('/assets/noola-cloud-poster.575ee43d1c0f.webp') center 45% / cover no-repeat; opacity: .72; }
#app-shell .community-invite.club-in-view::before { animation: none; }
#app-shell .community-invite::after { content: ""; position: absolute; inset: 0; border: 0; border-radius: 0; pointer-events: none; z-index: -1; background: linear-gradient(90deg, #e8e7f3 0%, #e8e7f3eb 45%, #e8e7f333 85%); }
.community-invite .eyebrow { color: #79708e; }
.community-invite h2 { color: #555168; }
.community-invite p { color: #747081; }
.community-invite .secondary { background: #fffefaf0; border-color: #d8d3e6; color: #655b7b; }

/* Static, short header treatments: no masks or moving filters on long cards. */
#sheet .feedback-card>.feedback-heading { padding: 17px 15px 18px; margin: -3px -3px 20px; border: 1px solid #e5e3ed; border-radius: 12px; background: linear-gradient(110deg, #f5f3fbef 0%, #f5f3fbef 65%, #f5f3fb8a), url('/assets/noola-cloud-poster.575ee43d1c0f.webp') right 38% / cover; }
.feedback-heading h3 { color: #55506b; }
.feedback-heading .feedback-eyebrow { color: #8b839e; }
#sheet .feedback-heading .feedback-private { background: #fcfcfae6; border-color: #e2deea; color: #726982; }
#profile-page .member-card { position: relative; overflow: hidden; background: linear-gradient(165deg, #f7f2e9, #edeedf); border-color: #dedbcc; }
#profile-page .member-card::before { content: ""; display: block; position: relative; inset: auto; z-index: auto; width: auto; height: 135px; margin: -28px -28px 25px; border: 0; border-radius: 0; box-shadow: none; transform: none; background: url('/assets/breathstone-bottom.2806a6b5b262.webp') center 48% / cover; border-bottom: 1px solid #ded9c8; }
.member-card-top .eyebrow { color: #8a8470; }
.member-card .member-badge { background: #faf8ef; border-color: #d9d9c5; color: #83846b; }
#top100-page>.page-title { border-bottom: 1px solid #dedce8; background: linear-gradient(105deg, transparent, #eae8f273); padding-inline: 18px; margin-inline: -18px; border-radius: 15px 15px 0 0; }
#top100-page>.page-title .eyebrow { color: #8a7d94; }

@media (max-width: 700px) {
  #app-shell .quiet-invite.nature-measured { min-height: 304px; padding: 31px 23px 43px; margin-top: 37px; border-radius: 20px; }
  .nature-measured-art { left: 0; }
  .nature-measured-art>img { object-position: center; }
  #app-shell .nature-measured::before { background: linear-gradient(90deg, #f2ede5f5 0%, #f2ede5e8 26%, #f2ede5b3 53%, #f2ede516 100%); }
  .nature-measured-copy { max-width: 100%; }
  .nature-measured .eyebrow { font-size: 8px; letter-spacing: 1.1px; }
  .nature-measured h2 { font-size: 23px; line-height: 1.6; margin: 14px 0 12px; }
  .nature-measured p { font-size: 11px; line-height: 1.9; margin-bottom: 22px; }
  .nature-measured .secondary { min-height: 41px; font-size: 11px; }
  .nature-caption { font-size: 7px; right: 19px; bottom: 17px; letter-spacing: 1.5px; }
  #community-page>.page-title.nature-cloud-banner { min-height: 251px; padding: 29px 24px; margin: 17px 0 18px; border-radius: 20px; }
  .nature-cloud-art { left: 0; }
  .nature-cloud-art>img, .nature-cloud-art>video { object-position: center 44%; }
  #community-page>.nature-cloud-banner::before { background: linear-gradient(90deg, #e8e7f4f5 0%, #e8e7f4ec 23%, #e8e7f4c9 51%, #e8e7f426 100%); }
  .nature-cloud-copy { max-width: 100%; }
  .nature-cloud-copy .eyebrow { font-size: 8px; letter-spacing: 1.6px; }
  .nature-cloud-copy h1 { font-size: 31px; margin: 12px 0; }
  .nature-cloud-copy p { font-size: 11px; line-height: 1.8; max-width: 20em; margin-bottom: 22px; }
  .nature-cloud-copy .primary { font-size: 11px; min-height: 41px; padding: 10px 19px; }
  .nature-cloud-foreground { width: 52%; right: -15%; bottom: -25%; opacity: .42; }
  #app-shell .community-invite { padding: 27px 24px; }
  #app-shell .community-invite::before { left: 30%; }
  #app-shell .community-invite::after { background: linear-gradient(90deg, #e8e7f3f5 0%, #e8e7f3e6 37%, #e8e7f354 100%); }
  .community-invite h2 { font-size: 22px; }
  #sheet .feedback-card>.feedback-heading { padding: 16px 12px; margin: 0 -2px 18px; gap: 10px; }
  #sheet .feedback-heading h3 { font-size: 19px; }
  #profile-page .member-card::before { margin: -23px -23px 22px; height: 136px; }
  #top100-page>.page-title { margin-inline: 0; padding-inline: 0; }
}
@media (max-width: 375px) {
  #app-shell .quiet-invite.nature-measured { padding-inline: 20px; }
  .nature-measured h2 { font-size: 21px; }
  #community-page>.page-title.nature-cloud-banner { padding-inline: 20px; }
  .nature-cloud-copy h1 { font-size: 29px; }
  .nature-cloud-copy p { max-width: 18em; }
  #sheet .feedback-card>.feedback-heading { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .nature-cloud-art>video { display: none; transition: none; }
  canvas[data-nature-trail] { display: none; }
}

/* BEGIN: Breathstone touch interaction — explicit tap, native vertical scroll. */
.nature-measured-art>.nature-touch-reveal {
  pointer-events: none; opacity: 0; transition: opacity .72s cubic-bezier(.22,1,.36,1);
}
.nature-measured-art>.nature-touch-reveal.is-open { opacity: 1; }
#app-shell .nature-bloom-toggle {
  position: absolute; z-index: 3; right: 18px; bottom: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; max-width: calc(100% - 36px); padding: 10px 14px;
  border: 1px solid #bfccb3; border-radius: 999px; background: #fafbf3f5;
  color: #52734e; font-size: 11px; line-height: 1.5; white-space: nowrap;
  box-shadow: inset 0 1px #fff, 0 3px 10px #3a593009;
  touch-action: manipulation; transition: background .2s, border-color .2s;
}
#app-shell .nature-bloom-toggle svg {
  width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
#app-shell .nature-bloom-toggle.is-open { background: #eaf1e3f5; border-color: #9bb58e; }
#app-shell .nature-bloom-toggle:active { background: #e1ebd8; }
#app-shell .nature-bloom-toggle:disabled { opacity: .75; }
.nature-measured.nature-touch-ready>.nature-caption { display: none; }
@media (max-width: 700px) {
  #app-shell .quiet-invite.nature-measured.nature-touch-ready {
    min-height: 365px; padding-bottom: 86px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nature-measured-art>.nature-touch-reveal { transition: none; }
  #app-shell .nature-bloom-toggle { transition: none; }
}
/* END: Breathstone touch interaction. */