@font-face {
  font-family: "LING Hand";
  src: url("/fonts/lxgw-zhenkai.woff2?v=0.825-full") format("woff2");
  font-display: swap;
}

:root {
  --paper: #f7f1e5;
  --paper-2: #fffaf0;
  --paper-deep: #eadfce;
  --ink: #353c35;
  --muted: #70786f;
  --sage: #b7c8ad;
  --sage-deep: #718971;
  --sage-soft: #e6eddf;
  --blue: #9ebdd0;
  --blue-deep: #6789a1;
  --blue-soft: #e3edf3;
  --peach: #efb18d;
  --peach-soft: #f8e2d2;
  --yellow: #e8cb79;
  --yellow-soft: #f8efce;
  --wood: #b48f6b;
  --wood-deep: #785e48;
  --line: rgba(59, 69, 59, .28);
  --shadow: 0 20px 42px rgba(95, 73, 50, .12), 0 3px 10px rgba(95, 73, 50, .07);
  --ease: cubic-bezier(.2, .76, .24, 1);
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body {
  background: #202621;
  color: var(--ink);
  font-family: "LING Hand", "Kaiti SC", "PingFang SC", sans-serif;
}

button { font: inherit; color: inherit; }

.recording-shell {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 20%, #3a463d 0, #252d27 52%, #1e241f 100%);
}

.stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 14% 12%, rgba(239, 177, 141, .19), transparent 23%),
    radial-gradient(circle at 88% 20%, rgba(158, 189, 208, .19), transparent 25%),
    linear-gradient(145deg, #fbf7ed 0%, #f6efe2 56%, #f2eadc 100%);
}

.paper-grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .21;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(7deg, rgba(91, 71, 48, .025) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(93deg, rgba(255,255,255,.25) 0 1px, transparent 1px 9px);
  mix-blend-mode: multiply;
}

.stage-header {
  height: 8.4%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 3.2%;
  border-bottom: 1px solid rgba(59, 69, 59, .14);
  background: rgba(255, 250, 240, .56);
  backdrop-filter: blur(12px);
}

.brand-mark { display:flex; align-items:center; gap:.65em; min-width:0; }
.brand-mark > img { width:clamp(42px,3.2vw,64px); height:clamp(25px,1.55vw,31px); object-fit:contain; object-position:center; }
.brand-copy { display:flex; flex-direction:column; gap:.12em; font-family:"LING Hand","Kaiti SC",sans-serif; letter-spacing:.08em; line-height:1; }
.brand-copy strong { font-size:clamp(14px,1.05vw,21px); font-weight:600; white-space:nowrap; }
.brand-copy small { color:var(--muted); font:500 clamp(6px,.42vw,8px)/1 sans-serif; letter-spacing:.12em; white-space:nowrap; }

.scene-tabs { display: flex; align-items: center; gap: .28vw; padding: .28vw; border-radius: 999px; background: rgba(232, 223, 206, .55); font-family:"PingFang SC","Microsoft YaHei",sans-serif; }
.scene-tab { border: 0; border-radius: 999px; padding: .56em .86em; background: transparent; cursor: pointer; font-family:inherit; font-size: clamp(11px, .78vw, 15px); font-weight:500; letter-spacing:.015em; transition: .3s var(--ease); white-space: nowrap; }
.scene-tab b { opacity: .48; margin-right: .45em; font-family: sans-serif; font-size: .82em; }
.scene-tab:hover { background: rgba(255,255,255,.48); }
.scene-tab.is-active { background: #fffaf1; color: #4d674e; box-shadow: 0 6px 18px rgba(80, 65, 45, .1); }

.status-pill { justify-self: end; display: flex; align-items: center; gap: .55em; font-family:"PingFang SC","Microsoft YaHei",sans-serif; font-size: clamp(10px, .78vw, 15px); color: var(--muted); }

.scene-viewport { position: relative; height: 91.6%; }
.scene { position: absolute; inset: 0; padding: 2.2% 4% 1.2%; opacity: 0; visibility: hidden; transform: translateX(2.5%); transition: opacity .44s var(--ease), transform .44s var(--ease), visibility 0s .44s; }
.scene.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

body.is-embedded .stage-header { display: none; }
body.is-embedded .scene-viewport { height: 100%; }
body.is-embedded h1 { font-size: clamp(32px, 3vw, 58px); }
body.is-embedded :is(.module-card strong,.safety-layer strong,.assembled-card strong,.pipeline-node strong,.next-session strong,.front-copy strong,.agent-card strong,.realtime-dock strong,.iteration-card-copy strong,.security-copy strong,.crisis-wide-copy strong) { font-size: clamp(18px, 1.5vw, 28px); }
body.is-embedded :is(.module-number,.keyword-line,.safety-layer span,.assembled-card p,.assembled-label,.fact-note,.pipeline-node small,.node-badge,.soft-tag,.next-session span,.zone-label,.scene-chip,.front-copy small,.agent-card small,.agent-state,.state-label,.realtime-dock p,.iteration-card-copy small,.feedback-card strong,.security-lane-title,.security-copy small,.security-chip,.limit-note,.crisis-wide-copy small) { font-size: clamp(13px, 1.05vw, 20px); }
body.is-embedded .security-lane-title { font-size: clamp(18px, 1.6vw, 30px); }
body.is-embedded .crisis-flow::before,
body.is-embedded .crisis-validation::before { font-size: clamp(11px, .88vw, 17px); }

.scene-heading { height: 16%; display: grid; grid-template-columns: 1.45fr 1fr; align-items: start; gap: 4%; }
.eyebrow { margin: 0 0 .25em; color: var(--sage-deep); font: 700 clamp(9px, .72vw, 14px)/1.2 sans-serif; letter-spacing: .22em; }
h1 { margin: 0; font-size: clamp(25px, 2.5vw, 49px); font-weight: 500; line-height: 1.1; letter-spacing: .02em; }
h1 em { color: #66816b; font-style: normal; position: relative; white-space: nowrap; }
h1 em::after { content: ""; position: absolute; left: 3%; right: 1%; bottom: -.08em; height: .13em; border-radius: 50%; background: rgba(239, 177, 141, .68); transform: rotate(-1deg); }
.iteration-term { font-family:"PingFang SC","Microsoft YaHei",sans-serif; font-weight:500; letter-spacing:.035em; }
.scene-summary { margin: .65em 0 0; max-width: 34em; justify-self: end; color: var(--muted); font-size: clamp(12px, 1vw, 19px); line-height: 1.55; }

.flow-board { position: relative; height: 75%; }
.scene[data-scene="2"] .scene-heading { height: 11%; }
.scene[data-scene="2"] .flow-board { height: 82%; }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flow-lines > path { fill:none; stroke:rgba(102,129,107,.64); stroke-width:2.25; stroke-dasharray:8 8; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; opacity:.82; transition:opacity .35s,stroke-width .35s,stroke .35s; }
.flow-lines > path.is-live { stroke:#6f966f; stroke-width:3.25; stroke-dasharray:10 8; opacity:1; animation:dash-flow 1.15s linear infinite; }
.flow-lines marker path { fill:none; stroke:context-stroke; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }

@keyframes dash-flow { to { stroke-dashoffset: -44; } }
@keyframes paper-in { from { opacity: 0; transform: translateY(16px) rotate(-.3deg); } to { opacity: 1; transform: none; } }
@keyframes soft-pulse { 0%,100% { box-shadow: var(--shadow), 0 0 0 0 rgba(111,150,111,.18); } 50% { box-shadow: var(--shadow), 0 0 0 16px rgba(111,150,111,0); } }

.module-card, .pipeline-node, .front-room, .agent-card, .realtime-dock, .assembled-card, .next-session, .safety-layer, .iteration-ring-card, .security-card, .model-choice-hub, .model-option, .crisis-wide-card {
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .48s var(--ease), opacity .4s, filter .4s, box-shadow .4s, border-color .4s;
}

.focusable.is-focus { z-index: 8; transform: scale(1.07) translateZ(0); border-color: rgba(93,129,94,.72); animation: soft-pulse 2.6s ease-in-out infinite; }
.scene[data-scene="0"] .assembled-card.is-focus { transform: translateX(-50%) scale(1.06); }

.module-card {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 1.4%;
  display: grid;
  grid-template-columns: 42% 58%;
  align-items: stretch;
  text-align: left;
  border-radius: 1.5vw;
  cursor: pointer;
  animation: paper-in .6s var(--ease) both;
  animation-delay: var(--delay);
  overflow: hidden;
}
.values-card { background: linear-gradient(145deg, #e9efdf, #dfe9d7); }
.core-card { background: linear-gradient(145deg, #f9e8d9, #f4dcc8); }
.scene-card { background: linear-gradient(145deg, #e7f0f4, #d9e7ef); }
.modules-row { position:absolute; z-index:2; left:2.3%; right:2.3%; top:1%; height:44%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.3%; }
.module-number { display: inline-block; padding: .34em .7em; border-radius: 999px; background: rgba(255,255,255,.7); font-size: clamp(9px, .72vw, 14px); color: var(--muted); }
.module-copy { min-width: 0; padding: 5.5% 5.5% 4.5%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.module-card strong { display: block; margin-top: .65em; font-size: clamp(16px, 1.28vw, 25px); font-weight: 500; line-height: 1.15; }
.keyword-line { display: block; margin-top: .75em; color: var(--muted); font-size: clamp(9px,.68vw,13px); line-height: 1.45; }
.module-thumb { position: relative; width: 100%; height: 100%; overflow: hidden; border: 0; border-radius: 1.05vw; background: #fff9ee; }
.module-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.module-thumb-character img { height: 145%; object-position: 50% 3%; transform: translateY(-2%); }

.safety-layer { position:absolute; z-index:3; left:12%; right:12%; top:51%; height:14%; display:flex; align-items:center; justify-content:center; gap:1.1em; border:1.5px solid rgba(88,128,92,.42); border-radius:1.15vw; background:linear-gradient(135deg,rgba(224,238,218,.98),rgba(207,228,205,.96)); box-shadow:0 12px 26px rgba(65,93,68,.12); }
.safety-layer strong { font-size:clamp(14px,1.12vw,22px); font-weight:600; color:#486b4d; }
.safety-layer span { color:#617662; font-size:clamp(10px,.75vw,14px); }
.safety-symbol { width:2em; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; color:white; background:#6f9773; font:700 clamp(10px,.72vw,14px)/1 sans-serif; box-shadow:0 4px 10px rgba(59,99,65,.18); }

.assembled-card { position:absolute; z-index:3; left:50%; bottom:0; width:48%; height:27%; transform:translateX(-50%); border-radius:1.7vw; background:linear-gradient(145deg,rgba(255,253,246,.98),rgba(242,237,221,.95)); padding:.9% 2.2% .8%; display:grid; grid-template-columns:27% 1fr; align-items:center; gap:2%; text-align:left; overflow:hidden; }
.assembled-card strong { display:block; font-size: clamp(17px, 1.5vw, 29px); font-weight:500; line-height:1.2; }
.assembled-card p { color:var(--muted); font-size:clamp(10px,.78vw,15px); line-height:1.45; margin:.65em 0 0; }
.assembled-label { color:var(--sage-deep); font-size:clamp(9px,.7vw,14px); }
.counselor-portrait { position: relative; align-self: stretch; min-height: 0; }
.counselor-portrait img { position: absolute; z-index: 2; inset: -5% 0 -12%; width: 100%; height: 117%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 10px 10px rgba(86,62,40,.12)); }

.fact-note { position:absolute; left:4%; right:4%; bottom:.1%; display:flex; align-items:center; gap:.8em; color:var(--muted); font-size:clamp(10px,.78vw,15px); }
.fact-note span { flex:none; padding:.3em .7em; border-radius:999px; background:#eef0df; color:#617660; }

.post-board { display:grid; grid-template-columns: repeat(5, 1fr); align-items:center; gap:2.6%; padding: 2% .5% 16%; }
.pipeline-node { position:relative; z-index:2; min-height:72%; border-radius:1.5vw; padding:12% 6% 6%; background:rgba(255,252,245,.88); text-align:center; }
.pipeline-node:nth-of-type(2){background:#e7eee0}.pipeline-node:nth-of-type(3){background:#f7edcf}.pipeline-node:nth-of-type(4){background:#e1ebf1}.pipeline-node:nth-of-type(5){background:#f6e0d1}
.pipeline-node strong { display:block; font-size:clamp(14px,1.18vw,23px); font-weight:500; margin-top:.8em; }
.pipeline-node small { display:block; color:var(--muted); font-size:clamp(9px,.7vw,14px); margin-top:.25em; line-height:1.4; }
.node-badge { position:absolute; top:5%; left:50%; transform:translateX(-50%); padding:.3em .7em; border-radius:999px; background:rgba(255,255,255,.7); font-size:clamp(8px,.63vw,12px); color:var(--muted); white-space:nowrap; }
.soft-tag { display:inline-block; margin-top:.8em; padding:.3em .6em; border-radius:.55em; background:rgba(255,255,255,.55); font-size:clamp(8px,.58vw,11px); color:var(--muted); }
.pipeline-node ul { text-align:left; margin-left:8%; }
.pipeline-node li::before { content:"○"; margin-right:.4em; color:var(--blue-deep); }
.node-scene { position: relative; width: 91%; height: 5.7vw; min-height: 66px; max-height: 110px; margin: 1.2em auto 0; overflow: hidden; border: 3px solid rgba(255,255,255,.76); border-radius: 1vw; box-shadow: 0 8px 18px rgba(74,55,38,.11); background: #efe5d8; }
.node-scene img { width: 100%; height: 100%; object-fit: cover; }
.node-scene-session img { object-position: 50% 48%; }
.node-scene-supervision { width: 92%; }
.node-scene-supervision img { object-position: 50% 28%; }
.paper-stack { position:relative; width:46%; aspect-ratio:1; margin:1.4em auto 0; }
.paper-stack i { position:absolute; inset:16% 8%; border:2px solid var(--sage-deep); border-radius:.35em; background:#fffdf6; }
.paper-stack i:nth-child(1){transform:rotate(-11deg)}.paper-stack i:nth-child(2){transform:rotate(7deg)}.paper-stack i:nth-child(3){transform:none}
.timeline-mark { display:flex; justify-content:center; align-items:center; gap:8%; height:4vw; margin-top:1.2em; }
.timeline-mark i { position:relative; width:18%; aspect-ratio:1; border:2px solid #b89a48; border-radius:50%; background:#fffdf5; }
.timeline-mark i:not(:last-child)::after { content:""; position:absolute; width:85%; height:2px; background:#b89a48; left:105%; top:45%; }
.review-glasses { position:relative; width:50%; height:3.2vw; margin:1.5em auto 0; }
.review-glasses i { position:absolute; width:42%; aspect-ratio:1; border:3px solid var(--blue-deep); border-radius:50%; top:0; }
.review-glasses i:first-child{left:3%}.review-glasses i:last-child{right:3%}.review-glasses::after{content:"";position:absolute;width:17%;height:3px;background:var(--blue-deep);left:41.5%;top:36%}
.memo-book { position:relative; width:45%; aspect-ratio:.82; margin:1.2em auto 0; border:3px solid #a46f51; border-radius:.45em .75em .75em .45em; background:#fff8ee; }
.memo-book::after { content:""; position:absolute; left:20%; right:14%; top:30%; height:3px; background:#d2aa8e; box-shadow:0 .65em 0 #d2aa8e,0 1.3em 0 #d2aa8e; }
.next-session { position:absolute; left:6%; right:6%; bottom:0; height:25%; border-radius:1.3vw; background:rgba(231,238,224,.88); padding:1.1% 2.4%; display:flex; align-items:center; justify-content:center; gap:2.4%; }
.next-session-scene { position: relative; align-self: stretch; width: 25%; min-width: 260px; overflow: hidden; border: 3px solid rgba(255,255,255,.74); border-radius: 1vw; background: #fff8ea; box-shadow: 0 6px 14px rgba(77,59,42,.1); }
.next-session-scene img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.next-session span,.next-session strong{display:block}.next-session span{color:var(--sage-deep);font-size:clamp(9px,.66vw,13px)}.next-session strong{font-size:clamp(14px,1.2vw,23px);font-weight:500}

.team-board { display:grid; grid-template-columns: 39% 57%; gap:4%; padding:1% 2% 1%; }
.front-room { position:relative; z-index:2; align-self:start; height:86%; min-height:0; border-radius:2vw; background:linear-gradient(#f5eadc,#eadbc8); padding:7% 6% 3.5%; }
.zone-label { position:absolute; top:4%; left:5%; padding:.36em .8em; border-radius:999px; background:rgba(255,255,255,.72); color:var(--muted); font-size:clamp(9px,.68vw,13px); }
.room-scene { position:relative; height:72%; margin-top:4%; border: 3px solid rgba(255,255,255,.74); border-radius:1.5vw; background:#e8dfd2; overflow:hidden; box-shadow: 0 12px 26px rgba(82,60,42,.12); }
.room-scene > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.scene-chip { position: absolute; z-index: 2; padding: .34em .66em; border: 1px solid rgba(255,255,255,.82); border-radius: 999px; color: #4a514b; background: rgba(255,252,244,.86); box-shadow: 0 5px 12px rgba(62,50,39,.12); font-size: clamp(8px,.58vw,11px); backdrop-filter: blur(5px); }
.scene-chip-front { left: 6%; bottom: 7%; }
.scene-chip-client { right: 6%; bottom: 7%; background: rgba(225,237,240,.9); }
.front-copy{text-align:center;margin-top:2%}.front-copy strong,.front-copy small{display:block}.front-copy strong{font-size:clamp(15px,1.3vw,25px);font-weight:500}.front-copy small{color:var(--muted);font-size:clamp(9px,.72vw,14px);margin-top:.25em}
.collaboration-lanes { position:relative; z-index:2; display:grid; grid-template-rows: 43% 53%; gap:4%; height:92%; }
.post-team-zone { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2.4%; padding:10% 2.2% 2.2%; border:1.5px solid var(--line); border-radius:1.6vw; background:rgba(247,244,234,.58); }
.agent-card { position:relative; z-index:2; min-width:0; display:grid; grid-template-rows:1fr auto; gap:5%; padding:5%; border-radius:1.15vw; background:rgba(255,252,245,.94); border:1.5px solid var(--line); box-shadow:var(--shadow); text-align:center; overflow:hidden; }
.concept-agent{background:#fffaf0}.supervisor-agent{background:#e7eee0}.memo-agent{background:#f7e3d5}.letter-agent{background:#f8efce}
.agent-card strong,.agent-card small{display:block}.agent-card strong{font-size:clamp(12px,.92vw,18px);font-weight:500}.agent-card small{color:var(--muted);font-size:clamp(8px,.62vw,12px);margin-top:.12em}
.agent-state{position:absolute;right:6%;top:6%;padding:.28em .58em;border-radius:999px;background:rgba(255,255,255,.82);color:var(--muted);font-size:clamp(7px,.5vw,10px);line-height:1}.agent-state.is-live{background:#f4ddc9;color:#966145}
.agent-visual { width:100%; min-height:0; overflow:hidden; border:2px solid rgba(255,255,255,.76); border-radius:.75vw; background:#f4eadc; box-shadow:0 5px 12px rgba(73,54,39,.1); }
.agent-visual img { width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.agent-visual-letter { background:linear-gradient(145deg,#fffaf0,#f2e2bd); }
.agent-visual-letter img { object-fit:contain; object-position:center; padding:3%; }
.state-label{display:inline-block;padding:.33em .65em;border-radius:999px;font-size:clamp(8px,.58vw,11px);white-space:nowrap}.state-label.current{background:#dfead9;color:#607860}.state-label.always{background:#f4ddc9;color:#966145}.state-label.planned{background:#f5e9bd;color:#8c722d}
.realtime-dock { position:relative; z-index:3; min-height:0; display:grid; grid-template-columns:55% 1fr; align-items:center; gap:3%; padding:7% 2.6% 2.4%; border-radius:1.5vw; background:rgba(255,249,232,.96); border:1.5px solid rgba(184,154,72,.4); box-shadow:var(--shadow); }
.realtime-dock strong{display:block;font-size:clamp(14px,1.15vw,22px);font-weight:500;margin:.35em 0}.realtime-dock p{font-size:clamp(9px,.68vw,13px);color:var(--muted);line-height:1.4;margin:0}
.realtime-visual { width:100%; height:100%; min-height:0; overflow:hidden; border:2px solid rgba(255,255,255,.78); border-radius:1vw; background:#f2e8d8; box-shadow:0 7px 16px rgba(75,55,39,.12); }
.realtime-visual img { width:100%; height:100%; object-fit:cover; object-position:50% 48%; }
.scene[data-scene="3"] .front-room.is-focus { transform: scale(1.045) translateZ(0); }

.iteration-board { position:relative; width:96%; margin:0 auto; border:1.5px solid rgba(101,129,105,.25); border-radius:2.15vw; background:linear-gradient(145deg,rgba(255,253,247,.46),rgba(236,242,232,.42)); box-shadow:inset 0 0 0 6px rgba(255,255,255,.22),0 16px 34px rgba(81,70,55,.06); }
.iteration-ring-card { position:absolute; z-index:3; width:31.5%; height:34%; display:grid; grid-template-columns:49% 1fr; align-items:center; gap:4%; padding:3.6% 1.5% 1.5%; border-radius:1.42vw; overflow:hidden; }
.iteration-simulation { left:1.8%; top:2%; background:linear-gradient(145deg,#f7e7d6,#ead8c4); }
.iteration-feedback { right:1.8%; top:2%; display:block; padding:4.5% 1.2% 1.2%; background:linear-gradient(145deg,#edf3f4,#e2ecee); }
.iteration-revise { right:1.8%; bottom:2%; background:linear-gradient(145deg,#f7e3d5,#f1d5c2); }
.iteration-retest { left:1.8%; bottom:2%; background:linear-gradient(145deg,#e5edde,#d8e6d2); }
.iteration-card-visual { width:100%; height:100%; min-height:0; border:2px solid rgba(255,255,255,.78); border-radius:.85vw; overflow:hidden; background:#f4eadc; box-shadow:0 6px 14px rgba(73,54,39,.1); }
.iteration-card-visual img { width:100%; height:100%; object-fit:cover; object-position:center; }
.iteration-card-copy strong,.iteration-card-copy small { display:block; }
.iteration-card-copy strong { font-size:clamp(13px,1.02vw,20px); font-weight:500; line-height:1.25; }
.iteration-card-copy small { margin-top:.4em; color:var(--muted); font-size:clamp(8px,.62vw,12px); line-height:1.35; }
.feedback-grid { height:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.2%; }
.feedback-card { min-width:0; display:grid; grid-template-rows:1fr auto; gap:3%; padding:3.5%; border:1px solid rgba(59,69,59,.18); border-radius:.82vw; text-align:center; background:#fffaf1; overflow:hidden; }
.client-feedback { background:#e7f0f4; }
.supervisor-feedback { background:#e7eee0; }
.reflection-feedback { background:#f7e3d5; }
.feedback-visual { min-height:0; border:2px solid rgba(255,255,255,.76); border-radius:.75vw; overflow:hidden; background:#f4eadc; box-shadow:0 5px 12px rgba(73,54,39,.09); }
.feedback-visual img { width:100%; height:100%; object-fit:cover; object-position:center; }
.client-feedback .feedback-visual img { object-position:58% 50%; }
.supervisor-feedback .feedback-visual img { object-position:50% 33%; }
.reflection-feedback .feedback-visual img { object-position:50% 44%; }
.feedback-card strong { display:block; font-size:clamp(9px,.66vw,13px); font-weight:500; line-height:1.15; }
.iteration-center { position:absolute; z-index:4; left:50%; top:50%; width:22%; height:19%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; border:1.5px solid var(--line); border-radius:1.5vw; background:linear-gradient(145deg,#f9efc9,#f1dda2); box-shadow:var(--shadow); pointer-events:none; }
.iteration-center-label { display:flex; align-items:center; justify-content:center; text-align:center; }
.iteration-center-label strong { font-size:clamp(23px,1.72vw,34px); line-height:1.1; white-space:nowrap; }
.scene[data-scene="2"] .iteration-ring-card.is-focus { transform:scale(1.045) translateZ(0); }

.scene[data-scene="4"] .scene-heading,
.scene[data-scene="5"] .scene-heading,
.scene[data-scene="6"] .scene-heading { height:13%; }
.scene[data-scene="4"] .flow-board,
.scene[data-scene="5"] .flow-board,
.scene[data-scene="6"] .flow-board { height:68%; }
.privacy-board,
.crisis-board { width:96%; margin:0 auto; border:1.5px solid rgba(101,129,105,.24); border-radius:2vw; background:linear-gradient(145deg,rgba(255,253,247,.54),rgba(237,242,232,.48)); box-shadow:inset 0 0 0 6px rgba(255,255,255,.22),0 16px 34px rgba(81,70,55,.06); }
.privacy-board { background:transparent; border:0; border-radius:0; box-shadow:none; }
.privacy-lines,
.crisis-lines { inset:2.5% 2.2% 2.5%; width:95.6%; height:95%; }
.security-lane-title { position:absolute; z-index:4; left:1.5%; top:.1em; display:flex; align-items:center; gap:.5em; padding:0; border-radius:0; color:#546b58; background:transparent; font-size:clamp(16px,1.4vw,26px); font-weight:600; box-shadow:none; }
.security-lane-title b { color:#8ba08c; font:700 .9em/1 sans-serif; }
.security-card { min-width:0; position:relative; display:grid; grid-template-columns:52% 1fr; align-items:stretch; gap:4%; padding:2.2%; border-radius:1.35vw; background:rgba(255,252,245,.94); cursor:pointer; text-align:left; overflow:hidden; }
.security-local { background:linear-gradient(145deg,#f8ead9,#f2ddca); }
.security-password { background:linear-gradient(145deg,#f8e4d3,#f3d8c3); }
.security-vault { background:linear-gradient(145deg,#e6eddf,#dce8d5); }
.security-credentials { background:linear-gradient(145deg,#e5edf2,#dce8ee); }
.security-boundary { background:linear-gradient(145deg,#e4edf2,#d8e7ee); }
.security-policy { background:linear-gradient(145deg,#f8ead9,#f2ddca); }
.security-support { background:linear-gradient(145deg,#e5eddf,#d8e6d1); }
.security-visual { min-width:0; min-height:0; padding:.5em; border:2px solid rgba(255,255,255,.8); border-radius:.9vw; overflow:hidden; background:#f4eadc; box-shadow:0 6px 14px rgba(73,54,39,.1); }
.security-visual img { width:100%; height:100%; display:block; object-fit:contain; object-position:center; }
.security-password .security-visual img { object-position:47% 52%; }
.security-vault .security-visual img { object-position:50% 48%; }
.security-credentials .security-visual img { object-position:42% 48%; }
.security-boundary .security-visual img { object-position:50% 48%; }
.security-policy .security-visual img { object-position:42% 44%; }
.security-support .security-visual img { object-position:50% 52%; }
.security-copy { min-width:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.security-copy strong { font-size:clamp(17px,1.4vw,27px); font-weight:500; line-height:1.3; }
.security-copy small { margin-top:.6em; color:var(--muted); font-size:clamp(12.5px,1vw,19px); line-height:1.7; }
.security-chip { display:inline-block; margin-top:.7em; padding:.32em .62em; border-radius:999px; color:#60765f; background:rgba(255,255,255,.65); font-size:clamp(10.5px,.85vw,16px); line-height:1.3; white-space:nowrap; }
.scene[data-scene="4"] .focusable.is-focus,
.scene[data-scene="5"] .focusable.is-focus,
.scene[data-scene="6"] .focusable.is-focus { transform:scale(1.045) translateZ(0); }

.privacy-board { padding:1.2% 1.5% 1.5%; }
.privacy-storage-lane,
.model-choice-lane { position:relative; z-index:2; display:flex; align-items:center; gap:3.2%; height:100%; padding:4.6% 1.5% 1.2%; }
.privacy-storage-lane .security-card,
.model-choice-lane .security-card { flex:1 1 0; height:94%; }
.model-choice-lane .model-title { background:#e6eef1; color:#587481; }
.flow-arrow {
  flex:0 0 auto;
  width:4.2%;
  display:grid;
  place-items:center;
  color:#6f966f;
  font-size:clamp(22px, 2vw, 38px);
  font-weight:700;
  line-height:1;
  animation:soft-pulse 2.6s ease-in-out infinite;
}
.flow-vs {
  flex:0 0 auto;
  width:4.6%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e6eef1;
  color:#587481;
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:clamp(12px, 1vw, 18px);
  font-weight:700;
  box-shadow:var(--shadow);
}
.scene-detail {
  position:absolute;
  left:4%;
  right:4%;
  bottom:1%;
  min-height:10%;
  display:flex;
  align-items:flex-start;
  padding-top:.55em;
  color:#5a4d3e;
  font-size:clamp(17px, 1.45vw, 28px);
  font-weight:600;
  line-height:1.55;
  pointer-events:none;
}
body.is-embedded .scene-detail { font-size: clamp(18px, 1.6vw, 31px); font-weight: 600; }
.local-model { background:linear-gradient(145deg,#e5edde,#d8e6d2); }
.cloud-model { background:linear-gradient(145deg,#e4edf2,#d8e7ee); }
.limit-note { display:inline-block; margin-top:.65em; padding:.34em .68em; border-radius:999px; background:rgba(255,255,255,.72); color:#7b5d4d; font-size:clamp(9px,.7vw,13px); line-height:1.25; white-space:nowrap; }

.crisis-board { padding:1.1% 1.5% 1.5%; background:linear-gradient(145deg,rgba(255,251,244,.62),rgba(236,242,232,.5)); }
.crisis-flow { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3.4%; height:49%; padding:1.2% 1.5% 2.2%; }
.crisis-flow::before { content:"实时咨询安全模块"; position:absolute; z-index:4; left:1.5%; top:0; transform:translateY(-48%); padding:.34em .82em; border-radius:999px; color:#587481; background:#e6eef1; box-shadow:0 4px 12px rgba(80,65,45,.06); font-size:clamp(9px,.72vw,14px); }
.crisis-module { background:linear-gradient(145deg,#e5edde,#d8e6d2); }
.crisis-shift { background:linear-gradient(145deg,#f8ead9,#f2ddca); }
.crisis-shift .security-visual img { object-position:50% 50%; }
.crisis-validation { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3.4%; height:44%; padding:4.5% 1.5% 1.2%; border-top:1.5px dashed rgba(102,129,107,.28); }
.crisis-validation::before { content:"反复验证与能力边界"; position:absolute; z-index:4; left:1.5%; top:0; padding:.34em .82em; border-radius:999px; color:#665f4d; background:#f7f0de; box-shadow:0 4px 12px rgba(80,65,45,.06); font-size:clamp(9px,.72vw,14px); }
.crisis-wide-card { min-width:0; display:grid; grid-template-columns:43% 1fr; align-items:stretch; gap:4%; padding:2.4%; border:1.5px solid var(--line); border-radius:1.35vw; box-shadow:var(--shadow); cursor:pointer; text-align:left; overflow:hidden; }
.crisis-testing { background:linear-gradient(145deg,#e5edf2,#dce8ee); }
.crisis-limit { background:linear-gradient(145deg,#f7e4d7,#f1d7c5); }
.crisis-wide-visual { min-width:0; min-height:0; overflow:hidden; border:2px solid rgba(255,255,255,.8); border-radius:.9vw; background:#f4eadc; box-shadow:0 6px 14px rgba(73,54,39,.1); }
.crisis-wide-visual img { width:100%; height:100%; object-fit:cover; object-position:center; }
.crisis-testing .crisis-wide-visual img { object-position:55% 48%; }
.crisis-limit .crisis-wide-visual img { object-position:50% 50%; }
.crisis-wide-copy { min-width:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.crisis-wide-copy strong { font-size:clamp(16px,1.25vw,24px); font-weight:500; line-height:1.25; }
.crisis-wide-copy small { margin-top:.48em; color:var(--muted); font-size:clamp(10.5px,.85vw,16px); line-height:1.42; }

@media (max-aspect-ratio: 4/3) { .status-pill{display:none}.stage-header{grid-template-columns:auto 1fr}.scene-tabs{justify-self:end} }

@media (prefers-reduced-motion: reduce) { *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important} }