/* SOURCE-DERIVED: Progressive Tree 0.1E; all selectors scoped to Section 02. */
.care-tree-root {--font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;
  --radius: 2px;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--decision);

  
  --motion-scale: 1;
  --ack-ms: 150ms;
  --travel-ms: 320ms;
  --arrive-ms: 240ms;
  --retract-ms: 200ms;
  --theme-ms: 420ms;   
  --settle-ms: 480ms;  

  
  --branch-spread: 90px;
  --vertical-space: 48px;
  --line-weight: 1.5px;

  
  --waiting-mode: static;

  
  --line: color-mix(in srgb, var(--ink) 36%, var(--bg));}
.care-tree-root[data-theme="dark-lemon"] {--bg: #0c0c0c;
  --bg-elevated: #141414;
  --ink: #f2f2f0;
  --ink-muted: #8a8a84;
  --information: #f2f2f0;
  --possibility: #3d3d38;
  --decision: #ffee00;
  --history: #5c5c56;
  --connector: #ffee00;
  --connector-history: #3a3a36;
  --choice-bg: transparent;
  --choice-border: #3d3d38;
  --choice-hover: #1f1f1c;
  --selected-bg: #ffee00;
  --selected-ink: #0c0c0c;
  --waiting-cue: #ffee00;
  --control-bg: #141414;
  --control-border: #2a2a28;}
.care-tree-root[data-theme="light-anna"] {--bg: #f7f5f0;
  --bg-elevated: #ffffff;
  --ink: #1a1a18;
  --ink-muted: #6b6b64;
  --information: #1a1a18;
  --possibility: #c8d4d0;
  --decision: #2d5f67;
  --history: #8a9a96;
  --connector: #2d5f67;
  --connector-history: #c8d4d0;
  --choice-bg: transparent;
  --choice-border: #c8d4d0;
  --choice-hover: #e8eeec;
  --selected-bg: #2d5f67;
  --selected-ink: #f7f5f0;
  --waiting-cue: #2d5f67;
  --control-bg: #ffffff;
  --control-border: #d8d4cc;}
.care-tree-root[data-theme="anna-lemon"] {--bg: #0f1210;
  --bg-elevated: #171b18;
  --ink: #f0f2f0;
  --ink-muted: #8a928c;
  --information: #f0f2f0;       
  --possibility: #eeabee;       
  --decision: #ffee00;          
  --history: #4a524e;           
  --connector: #ffee00;
  --connector-history: #2a322e;
  --choice-bg: transparent;
  --choice-border: #eeabee;
  --choice-hover: #152825;
  --selected-bg: #ffee00;
  --selected-ink: #0f1210;
  --waiting-cue: #769e79;
  --control-bg: #171b18;
  --control-border: #2a322e;}
.care-tree-root *, .care-tree-root *::before, .care-tree-root *::after {box-sizing: border-box;}
.care-tree-root {-webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;}
.care-tree-root {margin: 0;
  min-height: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--theme-ms) ease, color var(--theme-ms) ease;}
.care-tree-root .lab {display: grid;
  grid-template-columns: 220px 1fr 200px;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header header"
    "controls specimen inspector";
  min-height: 100dvh;
  gap: 0;}
.care-tree-root .lab-header {grid-area: header;
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--control-border);
  background: var(--bg-elevated);
  transition: background-color var(--theme-ms) ease, border-color var(--theme-ms) ease;}
.care-tree-root .lab-title {display: flex;
  align-items: center;
  gap: 12px;}
.care-tree-root .lab-mark {font-size: 22px;
  line-height: 1;}
.care-tree-root .lab-header h1 {margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;}
.care-tree-root .lab-sub {margin: 2px 0 0;
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;}
.care-tree-root .controls {grid-area: controls;
  padding: 16px 14px;
  border-right: 1px solid var(--control-border);
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  transition: background-color var(--theme-ms) ease, border-color var(--theme-ms) ease;}
.care-tree-root .control-group {display: flex;
  flex-direction: column;
  gap: 6px;}
.care-tree-root .control-group > label {font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);}
.care-tree-root .theme-switch, .care-tree-root .waiting-switch {display: flex;
  flex-direction: column;
  gap: 4px;}
.care-tree-root .theme-btn, .care-tree-root .waiting-btn {appearance: none;
  border: 1px solid var(--control-border);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  padding: 7px 10px;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 120ms ease, border-color 120ms ease;}
.care-tree-root .theme-btn:hover, .care-tree-root .waiting-btn:hover {background: var(--choice-hover);}
.care-tree-root .theme-btn.is-active, .care-tree-root .waiting-btn.is-active {border-color: var(--decision);
  background: color-mix(in srgb, var(--decision) 12%, transparent);
  color: var(--ink);}
.care-tree-root .theme-btn:focus-visible, .care-tree-root .waiting-btn:focus-visible, .care-tree-root .reset-btn:focus-visible, .care-tree-root .choice:focus-visible {outline: none;
  box-shadow: var(--focus-ring);}
.care-tree-root input[type="range"] {width: 100%;
  accent-color: var(--decision);
  height: 4px;}
.care-tree-root .control-hint {font-size: 11px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;}
.care-tree-root .reset-btn {appearance: none;
  border: 1px solid var(--control-border);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: var(--radius);
  width: 100%;}
.care-tree-root .reset-btn:hover {border-color: var(--decision);
  background: color-mix(in srgb, var(--decision) 10%, transparent);}
.care-tree-root .inspector {grid-area: inspector;
  padding: 16px 14px;
  border-left: 1px solid var(--control-border);
  background: var(--bg-elevated);
  overflow-y: auto;
  transition: background-color var(--theme-ms) ease, border-color var(--theme-ms) ease;}
.care-tree-root .inspector h2 {margin: 0 0 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);}
.care-tree-root #state-view {margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--information);
  white-space: pre-wrap;
  word-break: break-word;}
.care-tree-root .specimen-wrap {grid-area: specimen;
  position: relative;
  overflow: auto;
  padding: 40px 32px 80px;
  min-height: 0;
  transition: background-color var(--theme-ms) ease;}
.care-tree-root .diagram {position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vertical-space);
  min-width: min(100%, 320px);
  margin: 0 auto;
  z-index: 1;}
.care-tree-root .connectors {position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;}
.care-tree-root .connectors path {fill: none;
  stroke: var(--line);
  stroke-width: var(--line-weight);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke var(--theme-ms) ease, opacity var(--settle-ms) ease;}
.care-tree-root .connectors path[data-dim="true"] {opacity: 0.4;}
.care-tree-root .node {position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  max-width: 22rem;
  text-align: center;
  opacity: 1;
  transform: translateX(var(--node-shift, 0px));
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);}
.care-tree-root .node[data-state="inactive"], .care-tree-root .node[data-state="retracting"] {pointer-events: none;}
.care-tree-root .node[data-state="history"] .label {color: var(--history);}
.care-tree-root .node[data-state="current"] .label {color: var(--information);}
.care-tree-root .label {font-size: clamp(1.45rem, 4.5vw, 2.15rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.28;
  color: var(--information);
  white-space: pre-line;
  max-width: 18ch;
  transition: color var(--settle-ms) ease;}
.care-tree-root .label .price {display: block;
  margin-top: 0.45rem;
  font-size: clamp(1.35rem, 4.2vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--decision);
  transition: color var(--theme-ms) ease;}
.care-tree-root .detail {max-width: 34rem;
  margin-top: -0.35rem;
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 1.8vw, 0.86rem);
  line-height: 1.5;
  letter-spacing: 0.015em;
  color: var(--ink-muted);
  text-transform: none;
  transition: color var(--theme-ms) ease;}
.care-tree-root .node[data-terminal="true"]::after {content: "↩  tap an earlier answer to revise";
  transition: color var(--theme-ms) ease;
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--history);}
.care-tree-root .choices {display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  
  gap: 1rem 1.5rem;
  position: relative;
  
  padding: 0;
  margin: 0.6rem 0 0;}
.care-tree-root .choice {appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  min-height: 44px; 
  padding: 0.35rem 0.15rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font: inherit;
  font-size: clamp(1.12rem, 3.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--settle-ms) ease, opacity var(--settle-ms) ease, text-decoration-color 140ms ease;
  text-decoration: none;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 2px;
  white-space: pre-line;}
.care-tree-root .choice::before {content: "↓";
  display: inline-block;
  width: 1.15em;
  text-align: left;
  font-weight: 400;
  opacity: 0.45;
  letter-spacing: 0;
  transition: color var(--settle-ms) ease, opacity var(--settle-ms) ease;}
.care-tree-root .choice:hover:not(:disabled) {color: var(--decision);
  background: transparent;}
.care-tree-root .choice:hover:not(:disabled)::before {opacity: 0.9;}
.care-tree-root .choice:focus {outline: none;}
.care-tree-root .choice:focus-visible {outline: none;
  text-decoration: underline;
  text-decoration-color: var(--decision);
  color: var(--decision);}
.care-tree-root .choice:focus-visible::before {opacity: 1;
  color: var(--decision);}
.care-tree-root .choice[data-state="possible"] {color: var(--information);}
.care-tree-root .choice[data-state="possible"]::before {color: var(--possibility);
  opacity: 0.7;}
.care-tree-root .choice[data-state="selected"], .care-tree-root .choice[data-state="history"] {color: var(--decision);
  background: transparent;}
.care-tree-root .choice[data-state="selected"]::before, .care-tree-root .choice[data-state="history"]::before {opacity: 1;
  color: var(--decision);}
.care-tree-root .choice[data-state="inactive"] {opacity: 0.4;
  color: var(--history);}
.care-tree-root .choice[data-state="inactive"]::before {opacity: 0.35;}
.care-tree-root .choice:disabled {cursor: default;}
.care-tree-root .choices::after {content: "◇";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.5rem);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--waiting-cue);
  opacity: 0;
  text-align: center;
  pointer-events: none;
  transition: color var(--theme-ms) ease, opacity 160ms ease;}
.care-tree-root .node[data-state="current"][data-waiting="static"] .choices::after, .care-tree-root .node[data-state="current"][data-waiting="pulse"] .choices::after {opacity: 0.55;}
.care-tree-root .node[data-state="current"][data-waiting="pulse"] .choices::after {animation: waiting-tick 1.8s ease-in-out infinite;}
@keyframes waiting-tick {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.85; }
}@media (prefers-reduced-motion: reduce) {
.care-tree-root .node[data-state="current"][data-waiting="pulse"] .choices::after {animation: none;
    opacity: 0.55;}
}
.care-tree-root [data-knockout="true"] {text-shadow:
    0 0 2px var(--bg), 0 0 3px var(--bg), 0 0 5px var(--bg), 0 0 7px var(--bg);}
.care-tree-root .node[data-terminal="true"] .label {font-weight: 600;}
@media (max-width: 860px) {
.care-tree-root .lab {grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "header"
      "controls"
      "specimen"
      "inspector";}
.care-tree-root .controls {border-right: none;
    border-bottom: 1px solid var(--control-border);
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 12px 14px;}
.care-tree-root .control-group {min-width: 120px;
    flex: 1 1 120px;}
.care-tree-root .theme-switch, .care-tree-root .waiting-switch {flex-direction: row;
    flex-wrap: wrap;}
.care-tree-root .inspector {border-left: none;
    border-top: 1px solid var(--control-border);
    max-height: 140px;}
.care-tree-root .specimen-wrap {padding: 28px 16px 60px;}
.care-tree-root .diagram {gap: calc(var(--vertical-space) * 0.85);}
.care-tree-root .label {font-size: clamp(1.3rem, 6vw, 1.8rem);}
.care-tree-root .choice {font-size: clamp(1.05rem, 4.8vw, 1.35rem);
    min-height: 44px;}
.care-tree-root .diagram {min-width: 0;
    width: 100%;}
}
@media (max-width: 400px) {
.care-tree-root .specimen-wrap {padding: 20px 12px 48px;}
.care-tree-root .node {max-width: calc(100% - 44px);}
}
.care-tree-root, .care-tree-root {min-height:0}
.care-tree-root {overflow-x:hidden}
.care-tree-root .embed-shell {min-height:0;background:var(--bg);color:var(--ink);transition:background-color var(--theme-ms) ease,color var(--theme-ms) ease}
.care-tree-root .embed-head {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px;padding:14px 16px;border-bottom:1px solid var(--control-border);font-family:var(--font-sans)}
.care-tree-root .embed-head p {margin:0;color:var(--ink-muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.care-tree-root .embed-head h1 {margin:3px 0 0;font-size:14px;line-height:1.25;letter-spacing:.05em;text-transform:uppercase}
.care-tree-root .embed-actions {display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.care-tree-root .embed-actions .theme-btn, .care-tree-root .embed-actions .reset-btn {width:auto;padding:6px 9px;font-size:11px;text-align:center}
.care-tree-root .embed-hidden {display:none!important}
.care-tree-root .specimen-wrap {position:relative;overflow:hidden;padding:34px 18px 52px;min-height:0;background:var(--bg)}
.care-tree-root .diagram {max-width:760px;min-height:0}
.care-tree-root .inspector {display:none}
@media (max-width:560px) {
.care-tree-root .specimen-wrap {padding:26px 10px 44px;min-height:0}
.care-tree-root .label {font-size:clamp(1.25rem,7vw,1.7rem)}
.care-tree-root .choice {font-size:clamp(1rem,5vw,1.3rem)}
}
.care-tree-root {display: block;
  width: 100%;
  max-width: 100%;
  overflow: visible;}
.care-tree-root .embed-shell {overflow: visible;}
.care-tree-root .specimen-wrap {overflow: visible; 
  padding: 28px 16px 56px;}
@media (max-width: 560px) {
.care-tree-root .specimen-wrap {padding: 22px 10px 48px;}
}
.care-tree-root .mode-toggle-bar {display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: 0 4px 8px;
  max-width: 760px;
  margin: 0 auto;}
.care-tree-root .mode-toggle {appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--control-border, var(--choice-border));
  background: var(--control-bg, var(--bg-elevated));
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45rem 0.75rem;
  min-height: 40px;
  border-radius: var(--radius, 2px);
  cursor: pointer;
  transition:
    background-color var(--theme-ms, 420ms) ease,
    border-color var(--theme-ms, 420ms) ease,
    color var(--theme-ms, 420ms) ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;}
.care-tree-root .mode-toggle:hover {border-color: var(--decision);}
.care-tree-root .mode-toggle:focus-visible {outline: none;
  box-shadow: var(--focus-ring);}
.care-tree-root .mode-toggle__icon {display: inline-grid;
  place-items: center;
  width: 1.1em;
  height: 1.1em;
  line-height: 1;
  font-size: 0.95rem;
  font-weight: 400;}
.care-tree-root .mode-toggle__icon--sun {display: none;}
.care-tree-root .mode-toggle__icon--moon {display: inline-grid;}
.care-tree-root .mode-toggle[data-mode="dark"] .mode-toggle__icon--sun {display: inline-grid;}
.care-tree-root .mode-toggle[data-mode="dark"] .mode-toggle__icon--moon {display: none;}
.care-tree-root .mode-toggle__label::before {content: "Dark";}
.care-tree-root .mode-toggle[data-mode="dark"] .mode-toggle__label::before {content: "Light";}
@media (max-width: 560px) {
.care-tree-root .mode-toggle-bar {padding: 0 2px 6px;}
}

/* Host integration: paper-sized flowchart with NO interior scroll or duplicated heading. */
#start-here .care-tree-root { display:block; width:100%; max-width:100%; margin:0 auto; overflow:visible; min-height:0; border:0; font-family:var(--font-sans); }
#start-here .care-tree-root .embed-shell {overflow:visible; border:0;}
#start-here .care-tree-root .specimen-wrap {overflow:visible; min-height:0; padding:28px 8px 55px; background:var(--bg);}
#start-here .care-tree-root .diagram {width:100%;max-width:900px;margin:0 auto;min-width:0;}
#start-here .care-tree-root .choice {background:var(--choice-bg);font-family:var(--font-sans);}
#start-here .care-tree-root .choice:hover:not(:disabled) {background:var(--choice-hover);}
#start-here .care-tree-root .choice[data-state="selected"] {background:var(--selected-bg);color:var(--selected-ink);}
#start-here .care-tree-root[data-theme="light-anna"] .specimen-wrap {background:transparent;}
#start-here .care-tree-root[data-theme="anna-lemon"] .specimen-wrap {background:var(--bg);}
#start-here .care-tree-root .connectors {overflow:visible;}
#start-here .care-tree-root .mode-toggle-bar {max-width:900px;padding:15px 10px 0;margin:0 auto;}
#start-here .care-tree-root .mode-toggle {border-radius:0; min-height:44px; font-size:12px; font-family:var(--font-sans);}
#start-here .care-tree-root .mode-toggle:hover {color:var(--ink);background:var(--choice-hover);}
#start-here .care-tree-root .mode-toggle:focus-visible {outline:2px solid var(--decision);outline-offset:4px;}
@media(max-width:640px){
 #start-here .care-tree-root .specimen-wrap {padding:20px 2px 45px;}
 #start-here .care-tree-root .mode-toggle-bar {padding:12px 3px 0;}
}
@media print{
 #start-here .care-tree-root[data-theme] {--bg:#fff;--bg-elevated:#fff;--ink:#000;--information:#000;--decision:#000;--selected-bg:#ddd;--selected-ink:#000;--choice-border:#666;--line:#666;}
 #start-here .care-tree-root .mode-toggle-bar {display:none;}
}
