:root { color: #22453d; background: #f4f2eb; font-family: "Microsoft YaHei UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: #f4f2eb; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button { font: inherit; }
button:focus-visible { outline: 3px solid rgba(29, 112, 87, .34); outline-offset: 3px; }

.studio-brand { display: flex; align-items: center; gap: 8px; color: #74636e; white-space: nowrap; }
.studio-brand img { display: block; width: 42px; height: 28px; flex: 0 0 auto; object-fit: contain; }
.studio-brand span { font-size: 13px; font-weight: 500; letter-spacing: .02em; line-height: 1.5; }
.welcome-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.welcome-header .welcome-code { font-size: 12px; font-weight: 400; letter-spacing: 0; }
.tool-header-aside { display: grid; justify-items: end; gap: 8px; flex-shrink: 0; }

.welcome-screen { width: min(100% - 40px, 560px); min-height: 100vh; margin: 0 auto; padding: 40px 0; }
.welcome-code, .panel-intro p, .map-stage-heading p, .active-step-head span, .readout-block > span, .pause-block > span, .boundary-block > span, .coach-block > span { margin: 0; color: #688178; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.welcome-map { position: relative; height: 222px; margin: 25px 0 29px; overflow: hidden; border: 1px solid rgba(102, 129, 115, .13); border-radius: 30px; background: linear-gradient(rgba(250, 249, 244, .16), rgba(250, 249, 244, .32)), url("./assets/weight-management-constellation-bg-v1-opt.webp") center 38% / cover; }
.welcome-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.welcome-route-glow { fill: none; stroke: rgba(255, 251, 231, .72); stroke-width: 4; stroke-dasharray: 1 11; stroke-linecap: round; }
.welcome-route-trace { fill: none; stroke: rgba(115, 98, 72, .35); stroke-width: 1.2; stroke-dasharray: 3 8; stroke-linecap: round; animation: route-drift 14s linear infinite; }
.welcome-route circle { fill: #f1d08e; stroke: rgba(255, 254, 247, .82); stroke-width: 2; }
.welcome-route .welcome-truth { fill: #e8b972; filter: drop-shadow(0 0 5px rgba(240, 189, 102, .8)); }
.cover-origin, .cover-destination { position: absolute; z-index: 1; left: 50%; display: grid; place-items: center; width: 148px; color: #31594e; text-align: center; transform: translateX(-50%); }
.cover-origin { top: 13px; }
.cover-destination { bottom: 12px; }
.cover-origin span, .cover-destination span { color: #789086; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.cover-origin strong, .cover-destination strong { margin-top: 3px; font-size: 12px; line-height: 1.4; }
.cover-destination::before { position: absolute; z-index: -1; width: 90px; height: 53px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 247, 209, .8), rgba(255, 247, 209, 0) 72%); content: ""; }
.cover-waypoint { position: absolute; z-index: 1; color: #49655b; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.cover-waypoint::before { display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; content: ""; vertical-align: middle; }
.cover-one { top: 43px; left: 66px; }
.cover-two { top: 67px; right: 58px; }
.cover-three { top: 91px; left: 59px; }
.cover-four { top: 115px; right: 59px; }
.cover-five { top: 139px; left: 59px; }
.cover-six { top: 163px; right: 59px; }
.welcome-screen h1 { margin: 0 0 16px; color: #173a32; font-size: 32px; font-weight: 600; letter-spacing: 0; line-height: 1.5; }
.welcome-screen h1 > span { display: block; text-wrap: balance; }
.keep-together { white-space: nowrap; }
.welcome-copy { margin: 0 0 24px; color: #63766e; font-size: 14px; line-height: 1.85; }
.welcome-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 25px; }
.welcome-meta span, .tool-meta span { padding: 7px 11px; border: 1px solid rgba(107, 132, 119, .15); border-radius: 999px; color: #607b70; background: rgba(235, 237, 229, .88); font-size: 12px; }
.primary-button, .readout-button, .coach-button { min-height: 51px; border: 0; border-radius: 12px; color: #fffdf8; background: #165f61; font-size: 14px; font-weight: 700; cursor: pointer; }
.primary-button { width: 100%; box-shadow: 0 11px 24px rgba(25, 86, 76, .16); }
.welcome-footnote { margin: 14px 0 0; color: #8b9993; font-size: 12px; line-height: 1.6; text-align: center; }

.tool-shell { width: min(100% - 34px, 1180px); min-height: calc(100vh - 32px); margin: 16px auto; overflow: hidden; border: 1px solid rgba(98, 121, 108, .19); border-radius: 21px; background: #fbfaf6; box-shadow: 0 18px 42px rgba(57, 74, 61, .08); }
.tool-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 32px; border-bottom: 1px solid rgba(94, 121, 108, .18); }
.tool-title { min-width: 0; }
.tool-title h1 { margin: 0 0 8px; color: #173b34; font-size: 24px; font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.tool-title p { margin: 0; color: #60766c; font-size: 14px; line-height: 1.7; }
.tool-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.tool-meta button { min-height: 44px; padding: 7px 0 7px 8px; border: 0; color: #688178; background: transparent; font-size: 12px; cursor: pointer; }
.tool-meta { align-items: center; }
.tool-meta span { padding: 0; border: 0; background: transparent; }
.tool-workspace { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, 1fr); min-height: 660px; }
.map-column { position: relative; display: flex; align-items: flex-start; justify-content: center; min-width: 0; padding: 30px 28px 28px; background: linear-gradient(rgba(251, 250, 246, .18), rgba(251, 250, 246, .38)), url("./assets/weight-management-constellation-bg-v1-opt.webp") center / cover; }
.map-stage { width: min(100%, 620px); }
.map-stage-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.map-stage-heading span { color: #80958c; font-size: 12px; }
.loop-map { position: relative; width: min(100%, 560px); height: 720px; margin: 0 auto; }
.loop-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.loop-underlay { fill: none; stroke: rgba(255, 251, 231, .58); stroke-width: 4; stroke-dasharray: 1 12; stroke-linecap: round; }
.loop-arc { fill: none; stroke: rgba(118, 101, 75, .34); stroke-width: 1.4; stroke-dasharray: 3 9; stroke-linecap: round; }
.arc-amber { stroke: #b98235; fill: #b98235; }
.arc-sand { stroke: #d8b071; fill: #d8b071; }
.arc-blue { stroke: #88a7b6; fill: #88a7b6; }
.arc-rose { stroke: #9f717d; fill: #9f717d; }
.loop-dot { stroke: rgba(255, 254, 248, .8); stroke-width: 2; }
.waypoint-glow { fill: rgba(255, 229, 164, .5); }
.truth-glow { fill: rgba(242, 206, 153, .68); }
.truth-speck { fill: rgba(255, 245, 213, .9); }
.map-node { position: absolute; display: grid; width: 164px; min-height: 67px; padding: 8px 6px 8px 25px; border: 0; border-radius: 0; color: #31594e; background: transparent; box-shadow: none; text-align: left; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.map-node::before { position: absolute; top: 14px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, #fffdf5 0 16%, currentColor 18% 36%, rgba(255, 253, 245, 0) 40%); box-shadow: 0 0 13px currentColor; content: ""; opacity: .76; }
.map-node:hover, .map-node.is-active { background: linear-gradient(90deg, rgba(255, 254, 249, .46), rgba(255, 254, 249, 0)); box-shadow: none; transform: translateY(-3px); }
.map-node.is-filled { background: linear-gradient(90deg, rgba(255, 254, 249, .33), rgba(255, 254, 249, 0)); }
.map-index { position: absolute; top: 10px; left: 25px; color: #91a49c; font-family: Georgia, "Times New Roman", serif; font-size: 10px; line-height: 1; }
.map-node strong { margin: 18px 0 3px; font-size: 15px; font-weight: 700; line-height: 1.25; }
.map-node em { display: -webkit-box; overflow: hidden; color: #63786f; font-size: 11px; font-style: normal; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.node-trigger { top: 54px; left: 0; }
.node-meaning { top: 159px; right: 0; }
.node-fear { top: 264px; left: 0; }
.node-response { top: 369px; right: 0; }
.node-block { top: 474px; left: 0; }
.node-after { top: 579px; right: 0; }
.route-origin, .route-destination { position: absolute; left: 50%; z-index: 1; display: grid; width: 154px; place-items: center; color: #31594e; text-align: center; transform: translateX(-50%); }
.route-origin { top: 0; }
.route-destination { bottom: 0; }
.route-origin span, .route-destination span { color: #7f958b; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.route-origin strong, .route-destination strong { margin-top: 4px; font-size: 13px; font-weight: 700; line-height: 1.45; }
.route-destination { bottom: 4px; padding: 10px; color: #245a4b; }
.route-destination::before { position: absolute; z-index: -1; width: 108px; height: 76px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 247, 209, .82), rgba(255, 247, 209, 0) 70%); content: ""; }
.map-caption { margin: 7px 0 0; color: #80948b; font-size: 12px; line-height: 1.7; text-align: center; }
.map-headline { width: min(100%, 460px); margin: 14px auto 0; color: #1e493e; font-size: 20px; font-weight: 700; letter-spacing: -.025em; line-height: 1.45; text-align: center; }
.map-node.is-readout { background: transparent; box-shadow: none; }
.map-node.is-readout:hover { background: linear-gradient(90deg, rgba(255, 254, 249, .52), rgba(255, 254, 249, 0)); box-shadow: none; }
.map-node.is-active::before { opacity: 1; animation: star-breath 1.9s ease-in-out infinite; }
.loop-arc { animation: route-drift 14s linear infinite; }
@keyframes star-breath { 0%, 100% { box-shadow: 0 0 9px currentColor; transform: scale(1); } 50% { box-shadow: 0 0 20px currentColor; transform: scale(1.22); } }
@keyframes route-drift { to { stroke-dashoffset: -72; } }
@media (prefers-reduced-motion: reduce) { .map-node.is-active::before, .loop-arc { animation: none; } }

.tool-panel { padding: 30px 28px; border-left: 1px solid rgba(94, 121, 108, .18); background: #efeee7; }
.panel-intro { padding-bottom: 16px; border-bottom: 1px solid rgba(104, 130, 116, .17); }
.panel-intro p { margin-bottom: 5px; }
.panel-intro span { color: #83948d; font-size: 12px; line-height: 1.6; }
.active-step { margin: 17px 0 9px; padding: 17px; border: 1px solid currentColor; border-radius: 16px; background: #fffefa; }
.tone-amber { color: #ab742d; }
.tone-sand { color: #b68a49; }
.tone-blue { color: #5f8497; }
.tone-rose { color: #8a5f6e; }
.active-step-head { display: flex; align-items: center; justify-content: space-between; }
.active-step-head b { color: currentColor; font-size: 13px; }
.active-step h2 { margin: 12px 0 6px; color: #22473d; font-size: 18px; font-weight: 700; letter-spacing: -.018em; line-height: 1.45; }
.active-step > p { margin: 0 0 13px; color: #64766e; font-size: 13px; line-height: 1.68; }
.choice-options { display: grid; gap: 7px; }
.choice-option { display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: start; width: 100%; padding: 10px 11px; border: 1px solid #dce2d9; border-radius: 10px; color: #496057; background: #fffefa; font-size: 13px; line-height: 1.5; text-align: left; cursor: pointer; }
.choice-option span { width: 10px; height: 10px; margin-top: 4px; border: 1px solid #b8c6bd; border-radius: 50%; }
.choice-option:hover, .choice-option.is-selected { border-color: currentColor; color: #285e50; background: #edf4ed; }
.choice-option.is-selected span { border: 3px solid currentColor; background: #fffefa; }
.workflow-list { display: grid; gap: 8px; }
.workflow-row { display: grid; grid-template-columns: 62px 1fr auto; gap: 8px; align-items: center; width: 100%; min-height: 52px; padding: 9px 11px; border: 1px solid rgba(109, 133, 120, .17); border-radius: 11px; background: rgba(255, 254, 250, .82); text-align: left; cursor: pointer; }
.workflow-row > span { color: currentColor; font-size: 12px; font-weight: 700; }
.workflow-row strong { overflow: hidden; color: #6f8279; font-size: 12px; font-weight: 500; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.workflow-row.is-done strong { color: #345c50; font-weight: 700; }
.workflow-row i { color: #94a49d; font-size: 11px; font-style: normal; }
.readout-button { width: 100%; margin-top: 16px; }
.readout-panel { padding-bottom: 26px; }
.walk-script { position: relative; margin: 23px 0 0 12px; padding: 0 0 4px 20px; border-left: 1px solid rgba(102, 129, 115, .27); }
.walk-label { margin: 0 0 14px -20px; color: #6d867c; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.walk-script ol { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }
.walk-script li { position: relative; }
.walk-script li::before { position: absolute; top: 6px; left: -26px; width: 10px; height: 10px; border: 3px solid #efeee7; border-radius: 50%; background: currentColor; content: ""; }
.walk-script li > span { display: block; margin-bottom: 3px; color: currentColor; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.walk-script li p { margin: 0; color: #53685f; font-size: 14px; line-height: 1.68; }
.walk-script li strong { color: #294f45; font-weight: 700; }
.walk-tail { margin: 18px 0 0; color: #7d9087; font-size: 12px; line-height: 1.7; }
.pause-strip { margin: 25px -28px 0; padding: 18px 28px; border-top: 1px solid rgba(87, 123, 105, .27); border-bottom: 1px solid rgba(87, 123, 105, .27); background: rgba(222, 235, 225, .53); }
.pause-strip > span { color: #55796a; font-size: 11px; font-weight: 700; letter-spacing: .09em; }
.pause-strip p { margin: 8px 0 8px; color: #214b40; font-size: 16px; font-weight: 700; line-height: 1.6; }
.pause-strip small { display: block; color: #597167; font-size: 12px; line-height: 1.65; }
.boundary-note { margin: 18px 0 0; color: #6a604d; font-size: 12px; line-height: 1.72; }
.boundary-note b { display: block; margin-bottom: 5px; color: #8f7247; font-size: 11px; letter-spacing: .08em; }
.safety-note { margin: 10px 0 0; padding: 12px 13px; border-radius: 12px; color: #704b31; background: #f4dfc9; font-size: 12px; line-height: 1.65; }
.coach-link { margin-top: 20px; padding-top: 17px; border-top: 1px dashed rgba(97, 129, 114, .35); }
.coach-link > span { color: #55796a; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.coach-link > p { margin: 8px 0 13px; color: #486158; font-size: 13px; line-height: 1.72; }
.coach-button { width: 100%; border: 1px solid #2f6e5c; color: #225d4d; background: transparent; }
.coach-sent { margin: 0 !important; padding: 11px; border-left: 3px solid #8ebaa4; color: #527368 !important; background: rgba(221, 235, 226, .62); font-size: 12px !important; }
.reflection-reading { margin-top: 24px; }
.reflection-reading h2 { margin: 0 0 10px; color: #254c40; font-size: 17px; line-height: 1.5; }
.reflection-reading p { color: #486158; font-size: 14px; line-height: 1.8; }
.reflection-inquiry { padding-left: 14px; border-left: 2px solid #9bb9a9; }
.reflection-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; }
.reflection-controls button { min-height: 44px; padding: 8px 12px; border: 1px solid #92aa9e; border-radius: 9px; color: #32594b; background: transparent; cursor: pointer; font-size: 13px; }
.reflection-controls button[aria-pressed="true"] { color: #fffdf7; background: #285c4b; border-color: #285c4b; }
.reflection-status, .pause-strip .reflection-status { margin: 9px 0 0; color: #526c60; font-size: 12px; font-weight: 400; line-height: 1.7; }
.coach-sent small { display: block; margin-top: 10px; font-size: 12px; line-height: 1.6; }
.pause-strip { margin-right: 0; margin-left: 0; padding-right: 14px; padding-left: 14px; }

/* Shared reading hierarchy across the navigation and its summary. */
.panel-intro p, .map-stage-heading p, .active-step-head span,
.cover-origin span, .cover-destination span, .cover-waypoint,
.map-index, .map-node em, .route-origin span, .route-destination span,
.walk-script li > span, .pause-strip > span, .boundary-note b,
.coach-link > span, .workflow-row i { font-size: 12px; font-weight: 500; letter-spacing: .02em; }
.map-node strong, .route-origin strong, .route-destination strong { font-size: 14px; font-weight: 600; }
.active-step > p, .choice-option, .coach-link > p, .reflection-controls button { font-size: 14px; line-height: 1.75; }
.active-step h2, .reflection-reading h2, .map-headline { font-size: 18px; font-weight: 600; line-height: 1.6; letter-spacing: 0; }
.pause-strip p { font-size: 14px; font-weight: 600; line-height: 1.8; }
.choice-option { min-height: 44px; }
.workflow-row.is-done strong { font-weight: 500; }

@media (max-width: 860px) {
  .tool-shell { width: min(100% - 24px, 620px); margin: 12px auto; border-radius: 17px; }
  .tool-header { align-items: stretch; flex-direction: column-reverse; gap: 16px; padding: 20px 24px 24px; }
  .tool-header-aside { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .tool-workspace { display: flex; flex-direction: column; min-height: 0; }
  .map-column { padding: 24px; }
  .tool-panel { padding: 24px; border-top: 1px solid rgba(94, 121, 108, .18); border-left: 0; }
}
@media (max-width: 470px) {
  .welcome-screen { width: calc(100% - 40px); padding-top: 24px; }
  .welcome-screen h1 { font-size: 24px; }
  .welcome-map { margin: 22px 0 24px; border-radius: 22px; }
  .welcome-header { flex-wrap: wrap; gap: 8px 12px; }
  .welcome-meta { gap: 6px; margin-bottom: 24px; }
  .welcome-meta span { padding: 6px 8px; }
  .tool-shell { width: 100%; margin: 0; border-right: 0; border-left: 0; border-radius: 0; }
  .tool-header, .tool-panel { padding: 20px; }
  .tool-header-aside { flex-wrap: wrap; gap: 4px 12px; }
  .tool-title h1 { font-size: 22px; }
  .map-column { padding: 24px 20px; }
  .loop-map { height: 670px; }
  .map-node { width: 118px; min-height: 72px; padding: 9px; }
  .node-trigger { top: 48px; } .node-meaning { top: 148px; } .node-fear { top: 248px; }
  .node-response { top: 348px; } .node-block { top: 448px; } .node-after { top: 548px; }
  .route-origin, .route-destination { width: 136px; }
}