.workflow-playground{display:none}
@media(min-width:601px){
 .workflow-playground{display:block;margin:0 0 100px;position:relative}
 .with-playground>.chapter-heading{width:65%;margin-bottom:-12px}
 .with-playground>.chapter-heading svg{max-height:190px;object-fit:contain;object-position:left}
 .playground-tools{display:flex;justify-content:space-between;align-items:center;color:#78909e;font-size:10px;letter-spacing:1px;margin:0 0 12px}
 .playground-reset{padding:8px 0 8px 15px;color:#adc3cf;font-size:10px}
 .playground-reset:hover{color:white}
 .playground-surface{height:clamp(550px,65vh,740px);position:relative;isolation:isolate}
 .playground-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
 .playground-wires path{fill:none;stroke:#e1e4e5;stroke-width:1.25;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.9}
 .play-card{position:absolute;background:#242426;border-radius:24px;padding:0 12px 12px;border:1px solid #ffffff06;box-shadow:0 12px 40px #0002;touch-action:none;cursor:grab;user-select:none;z-index:1}
 .play-card.is-dragging{cursor:grabbing;box-shadow:0 12px 40px #0006;border-color:#a0baca66}
 .play-card header{height:47px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 7px;color:#f0f1f1;font-size:12px;letter-spacing:1px;outline-offset:3px}
 .play-card header>span:first-child{font-family:var(--mono);font-size:9px;letter-spacing:1px;color:#9da6ae}
 .play-card header:focus-visible{outline:1px solid #bedef1;border-radius:12px}
 .play-input{left:2%;top:5%;width:22%}
 .play-input .play-card-image{aspect-ratio:750/900;background:white}
 .play-card-image{overflow:hidden;border-radius:20px}
 .play-card-image img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
 .play-prompt{left:27%;top:67%;width:22%}
 .play-prompt textarea{display:block;width:100%;height:116px;resize:none;border:0;outline:none;background:transparent;color:#c8cbcd;font:11px/1.9 Arial,'Microsoft YaHei',sans-serif;padding:0 7px 8px;touch-action:auto;user-select:text;cursor:text}
 .play-prompt textarea:focus{background:#ffffff05;border-radius:5px}
 .play-color{left:43%;top:28%;width:22%;padding-bottom:20px}
 .play-sliders{padding:6px 8px 0}
 .play-sliders label{display:block;font:10px var(--mono);color:#d2d5d7;margin:12px 0 0;cursor:default}
 .play-sliders output{float:right;color:#9ca9b2;font-size:9px}
 .play-sliders input{display:block;width:100%;height:9px;margin:9px 0 0;appearance:none;border-radius:8px;background:linear-gradient(90deg,#838b8c,#2cddc1);cursor:ew-resize;touch-action:auto}
 .play-sliders input[data-adjust='hue']{background:linear-gradient(90deg,#f33,#edee38,#38e66f,#36dced,#6c3cec,#ee32a4,#f33)}
 .play-sliders input::-webkit-slider-thumb{appearance:none;width:11px;height:11px;background:#dae6e8;border-radius:50%;box-shadow:0 0 0 1px #fff4}
 .play-output{left:70%;top:0;width:30%}
 .play-output .play-card-image{aspect-ratio:896/1195;background:#eae2d1}
 .play-output img{will-change:filter}
 .play-port{position:absolute;width:11px;height:11px;background:#f4f6f6;border-radius:50%;box-shadow:0 0 0 1px #c3c9cd4d;pointer-events:none}
 [data-port='input'],[data-port='prompt'],[data-port='color-out']{right:-6px;top:23px}
 [data-port='color-in']{left:-6px;top:24px}
 [data-port='prompt-in']{left:-6px;top:48px}
 [data-port='output']{left:-6px;top:36px}
 .workflow-playground .playground-note{margin:12px 0 0;font-size:10px;line-height:1.8;color:#6e8594}
 .playground-surface:has(.is-dragging){user-select:none}
}
@media(min-width:601px) and (max-width:1000px){
 .playground-surface{height:590px}
 .play-input{width:25%;left:0;top:8%}
 .play-output{width:34%;left:66%;top:0}
 .play-color{width:28%;left:35%;top:32%}
 .play-prompt{width:32%;left:20%;top:69%}
 .play-card{padding:0 9px 9px;border-radius:18px}
 .play-card header{font-size:10px;padding:0 4px}
 .play-card header>span:first-child{font-size:8px;letter-spacing:0}
 .play-card-image{border-radius:14px}
}
@media(min-width:601px){
 .with-playground{padding-top:35px}
 .with-playground>.chapter-heading{height:140px;margin-bottom:5px}
 .with-playground>.chapter-heading>.micro{margin-top:0;margin-bottom:0}
 .with-playground>.chapter-heading svg{height:140px;width:auto;max-width:100%;max-height:none;margin-top:-15px}
 .playground-surface{height:clamp(520px,62vh,700px)}
}
@media(min-width:601px) and (max-width:1000px){
 .playground-surface{height:590px}
}

/* 全画面桌面工作台：标题覆盖在画布内，卡片可拖到视口边缘。 */
@media(min-width:601px){
 .with-playground{padding-top:0;scroll-margin-top:-95px}
 .workflow-playground{
  width:100vw;height:100svh;margin:0 0 90px calc(50% - 50vw);
  overflow:hidden;isolation:isolate;
 }
 .playground-surface{position:absolute;inset:0;height:100%;width:100%;z-index:0}
 .workflow-playground>.chapter-heading{
  position:absolute;left:25%;top:150px;width:50%;height:150px;margin:0;z-index:1;pointer-events:none;
 }
 .workflow-playground>.chapter-heading>.micro{margin:0 0 0 20px}
 .workflow-playground>.chapter-heading svg{height:150px;width:100%;margin-top:-15px;overflow:visible}
 .playground-tools{position:absolute;left:3%;right:3%;bottom:18px;z-index:4;margin:0;pointer-events:none}
 .playground-tools>span{display:none}
 .playground-tools>div{margin-left:auto;display:flex;gap:25px;pointer-events:auto}
 .playground-reset{font-size:11px;padding:10px}
 .workflow-playground .playground-note{position:absolute;left:3%;bottom:22px;max-width:65%;margin:0;z-index:3;pointer-events:none}
 .play-input{left:8%;top:24%;width:min(24vw,370px)}
 .play-output{left:auto;right:7%;top:16%;width:min(31vw,460px,calc((100svh - 180px) * .75))}
 .play-color{left:40%;top:35%;width:clamp(280px,21vw,350px);padding-bottom:25px}
 .play-prompt{left:20%;top:68%;width:clamp(280px,22vw,360px)}
 .play-card{border-radius:28px;padding:0 14px 14px}
 .play-card header{height:52px;padding:0 9px;font-size:14px}
 .play-card header>span:first-child{font-size:10px}
 .play-prompt textarea{font-size:13px;height:135px;line-height:1.9}
 .play-sliders label{font-size:12px;margin-top:15px}
 .play-sliders output{font-size:10px}
 .play-sliders input{height:10px;margin-top:11px}
 .play-sliders input::-webkit-slider-thumb{width:13px;height:13px}
 .play-port{width:12px;height:12px}
}
@media(min-width:601px) and (max-width:1000px){
 .play-input{left:3%;top:25%;width:26%}
 .play-output{right:3%;top:18%;width:34%}
 .play-color{left:35%;top:40%;width:28%;min-width:0}
 .play-prompt{left:25%;top:72%;width:32%;min-width:0}
 .play-card header{font-size:11px;padding:0 4px}
 .play-card header>span:first-child{font-size:8px}
 .play-prompt textarea{font-size:11px;height:120px}
 .workflow-playground .playground-note{max-width:55%;font-size:8px}
}

/* 标题层级、卡片内接口与定向数据流。 */
@media(min-width:601px){
 .workflow-playground>.chapter-heading svg{height:180px}
 .workflow-playground>.chapter-heading text{font-size:110px}
 .workflow-playground>.chapter-heading>.micro{font-size:14px;letter-spacing:3px}
 .play-output{right:6.5%;top:5%;width:min(35vw,800px,calc((100svh - 150px) * .75))}
 .play-card header{padding-right:31px}
 .play-card header>span:first-child{font-size:14px;color:#c3cbd1;letter-spacing:.6px}
 .play-card header>span:last-child{font-size:14px}
 .play-port{width:12px;height:12px;box-shadow:none}
 [data-port='input'],[data-port='prompt'],[data-port='color-out']{right:16px;top:20px}
 [data-port='color-in'],[data-port='output']{left:16px;top:20px}
 [data-port='prompt-in']{left:16px;top:52px}
 .play-color header,.play-output header{padding-left:31px}
 .play-prompt-label{position:absolute;left:45px;top:52px;line-height:12px;color:#b5bfc6;font-size:11px}
 .play-sliders{padding-top:20px}
 .playground-wires path{stroke-width:1.3;stroke:#bfcbd2;opacity:.75}
 .playground-wires .play-wire-stream{stroke:#fff;stroke-width:2.8;opacity:.95;stroke-dasharray:.065 .935;animation:play-wire-flow 3s linear infinite}
 .playground-wires .play-wire-stream:nth-last-child(2){animation-delay:-1s}
 .playground-wires .play-wire-stream:last-child{animation-delay:-2s}
}
@media(min-width:601px) and (max-width:1000px){
 .play-output{right:2%;width:min(37vw,calc((100svh - 150px) * .75))}
 .play-color{left:32%;width:28%}
 .play-card header>span:first-child,.play-card header>span:last-child{font-size:11px}
}
@keyframes play-wire-flow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.playground-wires .play-wire-stream{display:none}}


/* 编号与弧形标题采用同一左基线，间距与平面设计章节一致。 */
@media(min-width:601px){
 .workflow-playground>.chapter-heading{width:clamp(500px,42vw,720px);height:auto}
 .workflow-playground>.chapter-heading>.micro{margin-left:15px;margin-bottom:0}
 .workflow-playground>.chapter-heading svg{display:block;width:100%;height:auto;max-height:none;margin-top:-20px}
}



/* 按参考图固定桌面初始布局；重置画布时回到这里。 */
@media(min-width:1001px){
 .play-input{left:5.1%;top:25.5%}
 .play-prompt{left:max(23.1%,calc(5.1% + min(24vw,370px) + 32px));top:54.5%}
 .play-output{left:auto;right:7.3%;top:max(5.7%,72px)}
 .play-color{
  left:min(41.8%,calc(92.7% - min(35vw,800px,(100svh - 150px) * .75) - clamp(280px,21vw,350px) - 32px));
  top:35%;
 }
}

/* 白色亮端与透明拖尾沿曲线循环移动。 */
@media(min-width:601px){
 .playground-wires [data-link]{stroke:#fff;stroke-width:1.2;opacity:.19}
 .playground-wires .play-wire-stream{
  stroke:var(--wire-gradient);stroke-width:2;opacity:0;
  stroke-dasharray:.28 2;animation:none;
 }
}

/* 桌面自动演示：正常页面滚动，进入视口后播放一次。 */
@media(min-width:601px){
 .desktop-interaction .chapters{overflow:clip}
 .playground-story{height:auto;position:relative;margin-bottom:0}
 .playground-story>.workflow-playground{position:relative;margin-bottom:0}
 .has-auto-story .play-card{opacity:var(--story-opacity,0)}
 .has-auto-story .play-card[inert]{pointer-events:none}
 .play-agent-status{padding:10px 9px 5px;color:#8598a5;font:11px/1.8 var(--mono)}
 .play-agent-status>div:not(.agent-progress){display:flex;justify-content:space-between;gap:18px;margin:6px 0}
 .play-agent-status output{color:#c8d5dd;font-size:11px}
 .play-agent-status .is-done{color:#d9eee5}
 .agent-progress{height:2px;background:#ffffff12;margin-top:15px;overflow:hidden}
 .agent-progress i{display:block;width:0;height:100%;background:#e5f2f8}
 .has-auto-story:not(.story-complete) .play-sliders{display:none}
 .has-auto-story.story-complete .play-agent-status{display:none}
 .has-auto-story .play-color header>span:first-child{font-size:11px;letter-spacing:0}
 .has-auto-story .play-output .play-card-image{will-change:clip-path}
}
@media(prefers-reduced-motion:reduce) and (min-width:601px){
 .playground-story{height:auto}
 .playground-story>.workflow-playground{position:relative}
}