/* MIND STUDIO — Guided Visualizations (2026-10-04). Uses the existing site
   tokens (--bg-card, --border, --accent-2, --text, --text-dim). Cards stack
   inside the site's existing 460px column at every width. */
.ms-cards { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.ms-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: border-color 0.2s ease;
}
.ms-card.ms-playing { border-color: rgba(34,211,238,0.55); }
.ms-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ms-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; color: var(--accent-2); }
.ms-duration { font-size: 12px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ms-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px; color: var(--text); margin-bottom: 4px; }
.ms-desc { font-size: 13px; color: var(--text-dim); line-height: 1.45; margin-bottom: 14px; }
.ms-player { display: flex; align-items: center; gap: 14px; }
.ms-play {
  appearance: none; flex: 0 0 auto;
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(34,211,238,0.1);
  border: 1px solid rgba(34,211,238,0.5);
  color: var(--accent-2);
  cursor: pointer; padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ms-play:hover { background: rgba(34,211,238,0.18); border-color: var(--accent-2); }
.ms-play:focus-visible, .ms-seek:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.ms-play svg { width: 20px; height: 20px; }
.ms-icon-pause { display: none; }
.ms-playing .ms-icon-play { display: none; }
.ms-playing .ms-icon-pause { display: block; }
.ms-track { flex: 1 1 auto; min-width: 0; }
.ms-seek {
  --ms-pct: 0%;
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 24px; margin: 0;
  background: transparent; cursor: pointer;
}
.ms-seek::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2) var(--ms-pct), rgba(255,255,255,0.1) var(--ms-pct));
}
.ms-seek::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.1); }
.ms-seek::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--accent-2); }
.ms-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
  background: var(--text); border: 0; box-shadow: 0 0 0 3px rgba(34,211,238,0.25);
}
.ms-seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text); border: 0; box-shadow: 0 0 0 3px rgba(34,211,238,0.25); }
.ms-times { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ms-status { font-size: 12px; color: var(--text-dim); line-height: 1.4; margin-top: 10px; }
.ms-status:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ms-card, .ms-play { transition: none; }
}

/* ---- Homepage teaser (compact; full players live on /mind-studio) ---- */
.ms-teaser-wrap { width: 100%; position: relative; z-index: 1; }
.ms-teaser {
  width: 100%; margin-top: 16px; padding: 22px 20px; text-align: center;
  background: rgba(15,16,28,0.5);
  border: 1px solid rgba(34,211,238,0.18);
  border-radius: 20px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 30px rgba(34,211,238,0.14);
}
.ms-teaser-heading {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(19px, 5vw, 24px); line-height: 1.25; color: var(--text); margin-bottom: 8px;
}
.ms-teaser .hero-choice-subtext { max-width: 520px; margin-left: auto; margin-right: auto; }
.ms-teaser-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 16px; padding: 0; }
.ms-teaser-chips li {
  font-size: 12px; font-weight: 700; color: var(--text);
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(34,211,238,0.28); background: rgba(34,211,238,0.06);
}
.ms-teaser-cta, .ms-back-cta {
  display: inline-block; text-decoration: none;
  font-weight: 800; font-size: 14px; color: var(--text);
  padding: 12px 22px; border-radius: 12px;
  border: 1px solid rgba(34,211,238,0.5); background: rgba(34,211,238,0.1);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ms-teaser-cta:hover, .ms-back-cta:hover { background: rgba(34,211,238,0.2); border-color: var(--accent-2); }
.ms-teaser-cta:focus-visible, .ms-back-cta:focus-visible, .ms-page-home:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
@media (min-width: 681px) {
  .ms-teaser-wrap { display: flex; justify-content: center; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 32px; }
  .ms-teaser { max-width: 860px; padding: 26px 40px; }
}

/* ---- Dedicated /mind-studio page ---- */
.ms-page { position: relative; z-index: 1; min-height: 100vh; max-width: 1040px; margin: 0 auto; padding: 22px 18px 56px; }
.ms-page-bar { display: flex; align-items: center; margin-bottom: 36px; }
.ms-page-home { color: var(--text-dim); text-decoration: none; font-size: 13px; font-weight: 700; }
.ms-page-home:hover { color: var(--text); }
.ms-page-hero { text-align: center; max-width: 620px; margin: 0 auto 30px; }
.ms-page-hero .section-heading { font-size: clamp(26px, 6vw, 36px); margin-bottom: 10px; }
.ms-page-hero .section-sub { font-size: 15px; margin-bottom: 12px; }
.ms-page-voice { font-size: 12px; color: var(--text-dim); }
.ms-page { width: 100%; }
.ms-page .ms-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; max-width: 100%; }
.ms-page .ms-card, .ms-page .ms-track { min-width: 0; max-width: 100%; }
.ms-page .ms-seek { min-width: 0; width: 100%; }
.ms-page .ms-title, .ms-page .ms-desc { overflow-wrap: anywhere; }
/* Medium widths: 2 columns, third card spans the full row. Large: 3 fluid columns. */
@media (min-width: 700px) {
  .ms-page .ms-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-page .ms-cards > .ms-card:nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 1120px) {
  .ms-page .ms-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ms-page .ms-cards > .ms-card:nth-child(3) { grid-column: auto; }
}
.ms-page .ms-card { display: flex; flex-direction: column; padding: 20px; background: rgba(19,19,32,0.82); }
.ms-page .ms-desc { flex: 1 1 auto; }
.ms-page-foot { text-align: center; margin-top: 40px; }
.ms-page-foot p { font-size: 13px; color: var(--text-dim); margin-bottom: 14px; }


/* ================= Mind Studio v2 (2026-10): atmospheric depth + hub =================
   Subtle cyan/indigo halo that fades into the background — depth, not a border.
   Independent of the hero code. No aggressive animation; reduced-motion safe. */

/* ---- Homepage teaser: clickable + important ---- */
.ms-teaser { position: relative; isolation: isolate; cursor: pointer; border-color: rgba(34,211,238,0.28);
  box-shadow: 0 0 0 1px rgba(99,102,241,0.12), 0 24px 70px -28px rgba(34,211,238,0.45), 0 0 60px rgba(99,102,241,0.14);
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }
.ms-teaser::before { content: ""; position: absolute; inset: -30px -14px; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(60% 55% at 50% 45%, rgba(34,211,238,0.20), rgba(99,102,241,0.12) 55%, transparent 75%);
  filter: blur(22px); opacity: 0.85; animation: ms-halo 9s ease-in-out infinite; }
.ms-teaser:hover, .ms-teaser:focus-within { border-color: rgba(34,211,238,0.6); transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(34,211,238,0.28), 0 30px 90px -26px rgba(34,211,238,0.7), 0 0 90px rgba(99,102,241,0.28); }
.ms-teaser-cta::after { content: ""; position: absolute; inset: 0; border-radius: 20px; } /* stretched link: the whole card (positioned ancestor) is the click target */
.ms-teaser-chips li { border-color: rgba(34,211,238,0.34); }
@media (min-width: 681px) { .ms-teaser::before { inset: -40px -28px; } }
.ms-teaser-wrap { overflow-x: clip; }
@keyframes ms-halo { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }

/* ---- Studio pages: page-level halo ---- */
.ms-page::before { content: ""; position: absolute; left: 50%; top: -80px; width: min(1200px, 100vw); height: 640px; transform: translateX(-50%);
  z-index: -1; pointer-events: none;
  background: radial-gradient(48% 52% at 50% 38%, rgba(34,211,238,0.17), transparent 72%), radial-gradient(38% 42% at 78% 30%, rgba(99,102,241,0.17), transparent 74%), radial-gradient(34% 40% at 20% 34%, rgba(34,211,238,0.07), transparent 74%);
  filter: blur(18px); }
.ms-page { isolation: isolate; }
.ms-page .ms-card { box-shadow: 0 0 0 1px rgba(34,211,238,0.10), 0 22px 60px -30px rgba(34,211,238,0.35); transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.3s ease; }
.ms-page .ms-card:hover, .ms-page .ms-card:focus-within { border-color: rgba(34,211,238,0.5); box-shadow: 0 0 0 1px rgba(34,211,238,0.22), 0 28px 80px -28px rgba(34,211,238,0.55), 0 0 60px rgba(99,102,241,0.18); }
.ms-page .ms-card.ms-playing { box-shadow: 0 0 0 1px rgba(34,211,238,0.3), 0 28px 80px -26px rgba(34,211,238,0.6); }

/* ---- Hub: three tool cards ---- */
.ms-hub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 900px) { .ms-hub { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.ms-hub-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 24px 22px 20px; text-align: left; text-decoration: none; color: var(--text);
  background: rgba(19,19,32,0.82); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px rgba(34,211,238,0.10), 0 26px 70px -32px rgba(34,211,238,0.4);
  transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.3s ease; }
.ms-hub-card:hover, .ms-hub-card:focus-visible { border-color: rgba(34,211,238,0.6); transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(34,211,238,0.28), 0 34px 90px -28px rgba(34,211,238,0.7), 0 0 70px rgba(99,102,241,0.22); }
.ms-hub-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.ms-hub-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--accent-2); }
.ms-hub-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 24px; line-height: 1.2; margin: 8px 0 8px; }
.ms-hub-desc { font-size: 14px; line-height: 1.5; color: var(--text-dim); flex: 1 1 auto; }
.ms-hub-meta { margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--text-dim); }
.ms-hub-open { margin-top: 16px; font-weight: 800; font-size: 14px; color: var(--accent-2); }

/* ---- Tool pages (Train / Reset): reuse the shared .pillar-* engine, centered ---- */
.ms-tool { max-width: 560px; margin: 0 auto; text-align: center; }
.ms-tool .pillar-tabs { margin-bottom: 14px; }
.ms-tool .pillar-exercise { box-shadow: 0 0 0 1px rgba(34,211,238,0.10), 0 24px 70px -34px rgba(34,211,238,0.4); }
.ms-more { margin-top: 44px; text-align: center; }
.ms-more p { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: var(--text-dim); margin-bottom: 12px; }
.ms-more-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ms-more-links a { color: var(--text); text-decoration: none; font-weight: 800; font-size: 13.5px; padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(34,211,238,0.34); background: rgba(34,211,238,0.06); }
.ms-more-links a:hover { background: rgba(34,211,238,0.16); border-color: var(--accent-2); }
.ms-more-links a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ms-teaser, .ms-hub-card, .ms-page .ms-card { transition: none; }
  .ms-teaser::before { animation: none; }
  .ms-teaser:hover, .ms-teaser:focus-within, .ms-hub-card:hover, .ms-hub-card:focus-visible { transform: none; }
}

.ms-page-bar { justify-content: space-between; }
.ms-page-home-r { margin-left: auto; }