#mind-play-card-preview { --mp-bg:light-dark(#f8f7f2,#1e2622); --mp-paper:light-dark(#fffefa,#28322c); --mp-ink:light-dark(#263c31,#f1f4ed); --mp-muted:light-dark(#546459,#bfcabe); --mp-line:light-dark(#d5ddd1,#536155); --mp-soft:light-dark(#e8eee1,#364737); --mp-accent:light-dark(#365742,#c5dcb8); --mp-on:light-dark(#ffffff,#203021); color:var(--mp-ink); background:var(--mp-bg); border:1px solid var(--mp-line); border-radius:24px; padding:24px; font-family:'Trebuchet MS',system-ui,sans-serif; font-size:17px; line-height:1.55; }
    #mind-play-card-preview * { box-sizing:border-box; }
    #mind-play-card-preview .mp-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
    #mind-play-card-preview .mp-brand { font-weight:500; letter-spacing:.08em; font-size:14px; }
    #mind-play-card-preview .mp-context { color:var(--mp-muted); font-size:14px; }
    #mind-play-card-preview .mp-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 20px; }
    #mind-play-card-preview .mp-tabs .mp-tab { display:flex; flex-direction:column; align-items:flex-start; gap:5px; text-align:left; min-width:0; padding:12px; border:2px solid var(--mp-line); border-radius:14px; background:var(--mp-paper); color:var(--mp-ink); position:relative; }
    #mind-play-card-preview .mp-tab-number { font-size:13px; letter-spacing:.08em; }
    #mind-play-card-preview .mp-tab-name { font-weight:500; }
    #mind-play-card-preview .mp-tab-status { font-size:12px; }
    #mind-play-card-preview .mp-tabs .mp-tab[aria-selected="true"] { background:var(--mp-accent); color:var(--mp-on); border-color:var(--mp-accent); box-shadow:0 4px 0 var(--mp-ink); }
    #mind-play-card-preview .mp-tabs .mp-tab[aria-selected="false"]:hover { background:var(--mp-soft); border-color:var(--mp-accent); }
    #mind-play-card-preview .mp-activity { background:var(--mp-paper); padding:24px; border:1px solid var(--mp-line); border-radius:20px; }
    #mind-play-card-preview .mp-overline { color:var(--mp-muted); font-size:14px; margin:0 0 8px; }
    #mind-play-card-preview h2 { font-size:clamp(24px,4.4vw,32px); font-weight:500; line-height:1.2; margin:0 0 22px; letter-spacing:-.035em; text-wrap:balance; }
    #mind-play-card-preview .mp-body { display:grid; grid-template-columns:150px minmax(0,1fr); gap:24px; align-items:center; margin-bottom:22px; }
    #mind-play-card-preview .mp-symbol { background:var(--mp-soft); border-radius:28px; padding:20px 12px; display:flex; align-items:center; flex-direction:column; gap:10px; text-align:center; }
    #mind-play-card-preview .mp-symbol svg { width:64px; height:64px; stroke-width:1.35; color:var(--mp-accent); }
    #mind-play-card-preview .mp-symbol-label { font-size:14px; }
    #mind-play-card-preview .mp-copy { margin:0; }
    #mind-play-card-preview .mp-question { margin:0 0 12px; font-size:18px; font-weight:500; }
    #mind-play-card-preview .mp-choices { display:flex; flex-wrap:wrap; gap:10px; }
    #mind-play-card-preview button { font:inherit; color:var(--mp-ink); background:var(--mp-paper); border:1px solid var(--mp-line); border-radius:12px; padding:11px 16px; cursor:pointer; min-height:46px; }
    #mind-play-card-preview button:hover { background:var(--mp-soft); }
    #mind-play-card-preview button[aria-pressed="true"] { background:var(--mp-soft); border:2px solid var(--mp-accent); padding:10px 15px; }
    #mind-play-card-preview .mp-feedback { background:var(--mp-soft); border-radius:12px; padding:14px 16px; margin:16px 0 0; }
    #mind-play-card-preview .mp-feedback[hidden] { display:none; }
    #mind-play-card-preview details { font-size:14px; color:var(--mp-muted); margin-top:22px; }
    #mind-play-card-preview summary { cursor:pointer; padding:8px 0; }
    #mind-play-card-preview details p { margin:6px 0; }
    #mind-play-card-preview .mp-footer { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:20px; }
    #mind-play-card-preview .mp-next { background:var(--mp-accent); color:var(--mp-on); border-color:var(--mp-accent); }
    #mind-play-card-preview .mp-next:hover { filter:brightness(.93); background:var(--mp-accent); }
    #mind-play-card-preview button:disabled { opacity:.45; cursor:default; }
    #mind-play-card-preview .mp-note { text-align:center; font-size:13px; color:var(--mp-muted); margin:15px 0 0; }
    #mind-play-card-preview .mp-done { padding:18px 0; }
    #mind-play-card-preview .mp-done[hidden], #mind-play-card-preview .mp-lesson[hidden] { display:none; }
    @media(max-width:600px) {
      #mind-play-card-preview { padding:12px; }
      #mind-play-card-preview .mp-top { gap:4px 12px; margin-bottom:12px; }
      #mind-play-card-preview .mp-activity { padding:16px; }
      #mind-play-card-preview h2 { margin-bottom:12px; }
      #mind-play-card-preview .mp-body { grid-template-columns:minmax(0,1fr); gap:12px; margin-bottom:16px; }
      #mind-play-card-preview .mp-symbol { justify-self:center; width:180px; max-width:100%; border-radius:18px; gap:0; }
      #mind-play-card-preview .mp-symbol-label { display:none; }
      #mind-play-card-preview .mp-choices { flex-direction:column; }
      #mind-play-card-preview .mp-choices button { text-align:left; }
      #mind-play-card-preview .mp-footer button { font-size:15px; padding:11px 12px; }
      #mind-play-card-preview .mp-tabs { gap:6px; margin-bottom:16px; }
      #mind-play-card-preview .mp-tabs .mp-tab { gap:3px; padding:8px 7px; font-size:14px; }
      #mind-play-card-preview details { margin-top:12px; }
      #mind-play-card-preview .mp-footer { margin-top:14px; }
    }
  
/* Carry the approved card design into the existing site. */
#mind-play-card-preview { max-width:850px; margin:0 auto; font-family:'DM Sans',sans-serif; }
#mind-play-card-preview button { letter-spacing:normal; text-transform:none; }
#mind-play-card-preview h2 { font-family:'Manrope',sans-serif; }
#mind-play-card-preview .mp-body .mp-symbol img { width:100%; height:auto; display:block; }
#mind-play-card-preview .mp-symbol { padding:8px 8px 14px; }
#mind-play-card-preview .mp-tabs .mp-tab:focus-visible { outline:3px solid #655191; outline-offset:5px; }
#mind-play-card-preview .mp-activity p { max-width:none; }
.anatomy-explorer { margin-top:28px; }
.anatomy-explorer > summary { padding:20px 24px; border:1px solid #b6c1b3; border-radius:16px; background:#eef1e8; color:#2c4436; font:600 17px 'DM Sans',sans-serif; cursor:pointer; }
.anatomy-explorer[open] > summary { margin-bottom:16px; }
.anatomy-explorer > .lab-shell { margin-top:0; }
/* Tabs stay distinguishable by shape, contrast, text, and a selected marker. */
.stage-tabs { gap:12px; padding:18px 24px 24px; background:#152022; }
.stage-tabs [role="tab"] { min-width:0; min-height:76px; border:2px solid #718184; border-radius:14px; background:#253438; color:#f5f7f1; opacity:1; padding:16px; font-weight:600; }
.stage-tabs [role="tab"] > span:first-child { opacity:1; }
.stage-tabs [role="tab"][aria-selected="true"] { background:#caedb4; color:#152719; border-color:#caedb4; box-shadow:0 5px 0 #f5f7f1; }
.stage-tabs [role="tab"][aria-selected="true"]::after { display:none; }
.stage-tabs [role="tab"][aria-selected="true"] .tab-icon { color:#152719; opacity:1; }
.stage-tabs [role="tab"][aria-selected="false"]:hover { background:#3d5053; border-color:#d1e7d4; }
.stage-tabs [role="tab"]:focus-visible { outline:3px solid #fff; outline-offset:6px; }
.region-buttons button[aria-pressed="true"], .region-moments button[aria-pressed="true"], .slice-controls button[aria-pressed="true"] { background:#365742; color:#fff; border:2px solid #365742; box-shadow:0 3px 0 #9bab96; }
.region-buttons button[aria-pressed="false"], .region-moments button[aria-pressed="false"], .slice-controls button[aria-pressed="false"] { border:2px solid #a6b2a2; background:#fffefa; color:#263c31; }
@media(max-width:600px) {
  .stage-tabs { gap:8px; padding:14px 12px 20px; }
  .stage-tabs [role="tab"] { padding:12px 8px; font-size:14px; line-height:1.4; min-height:90px; }
  .stage-tabs [role="tab"] .tab-icon { display:none; }
  #mind-play-card-preview .mp-symbol { padding:8px 4px; }
}