/* A single sorting field: data and feedback carry the story; the bee is a quiet guide. */
.bee-story{position:relative;height:320vh;min-height:2300px;background:var(--canvas);border-bottom:1px solid var(--line);color:var(--plum);scroll-margin-top:70px}
.bee-stage{position:sticky;top:70px;max-width:1240px;margin:auto;box-sizing:border-box;height:calc(100vh - 70px);min-height:650px;max-height:900px;padding:34px 24px;display:grid;grid-template-columns:280px minmax(0,1fr);gap:52px;align-items:center}
.bee-eyebrow{font:9px/1.8 ui-monospace,SFMono-Regular,monospace;letter-spacing:.09em;color:var(--orchid-deep)}.bee-copy h2{font-family:var(--font-serif)!important;font-size:clamp(29px,2.8vw,39px)!important;line-height:1.5!important;font-weight:500!important;letter-spacing:-.03em;margin:17px 0!important}.bee-copy>p{font-size:13px;line-height:1.9;color:var(--faint);margin:0 0 32px}.bee-steps.story-steps{gap:24px}.bee-scroll-hint{display:block;font-size:9px;color:var(--plum-300);margin-top:30px}
.bee-workspace{position:relative;min-width:0;height:100%;max-height:620px}.bee-field{position:absolute;inset:0 0 40px;isolation:isolate}.bee-field canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bee-source-label,.bee-output-label{position:absolute;top:80px;font-size:10px;color:var(--faint);letter-spacing:.03em}.bee-source-label{left:2%}.bee-output-label{left:58%}.bee-output-label small{font:8px ui-monospace,monospace;color:var(--plum-300);margin-left:10px}
.bee-lane{position:absolute;left:58%;width:42%;box-sizing:border-box;border-top:1px solid var(--line-strong);background:linear-gradient(90deg,color-mix(in srgb, var(--lavender-soft) 30%, transparent),color-mix(in srgb, var(--tint) 13%, transparent));border-radius:0 0 var(--r-md) var(--r-md);will-change:transform,opacity}.bee-lane header{display:flex;align-items:center;gap:7px;padding:12px 11px;font-size:10px}.bee-lane header>b{font-weight:500;color:var(--plum-400)}.bee-lane header>i{width:5px;height:5px;border-radius:50%;background:var(--lavender)}.bee-lane header>small{margin-left:auto;font:9px ui-monospace,monospace;color:var(--faint)}.bee-lane[data-bee-lane="0"]{border-color:var(--peach-line);background:linear-gradient(90deg,color-mix(in srgb, var(--peach) 19%, transparent),transparent)}.bee-lane[data-bee-lane="0"] header>b{color:var(--peach-deep)}.bee-lane[data-bee-lane="0"] header>i{background:var(--peach-line)}.bee-lane[data-bee-lane="2"]{border-color:var(--green-line);background:linear-gradient(90deg,color-mix(in srgb, var(--green-soft) 31%, transparent),transparent)}.bee-lane[data-bee-lane="2"] header>b{color:var(--mint-deep)}.bee-lane[data-bee-lane="2"] header>i{background:var(--mint-line)}
.bee-datum{position:absolute;left:0;top:0;display:flex;align-items:center;gap:5px;height:27px;box-sizing:border-box;border:1px solid var(--line);border-radius:var(--r-xs);background:color-mix(in srgb, var(--paper) 96%, transparent);box-shadow:var(--shadow-md);padding:0 8px;color:var(--faint);font-size:9px;white-space:nowrap;will-change:transform;z-index:2}.bee-datum>span{overflow:hidden;text-overflow:ellipsis}.bee-datum>i{width:3px;height:3px;border-radius:50%;flex:none;background:var(--datum-color,var(--plum-300))}
.bee-guide{position:absolute;left:0;top:0;width:49px;height:49px;z-index:4;filter:drop-shadow(0 6px 8px color-mix(in srgb, var(--peach-line) 17%, transparent));will-change:transform}.bee-guide svg,.bee-guide img{width:100%;height:100%;overflow:visible}.bee-wing{transform-origin:64px 60px;animation:bee-wing-beat .23s ease-in-out infinite alternate}.bee-wing-right{animation-delay:-.11s}@keyframes bee-wing-beat{from{transform:scaleY(.72) rotate(-3deg)}to{transform:scaleY(1.06) rotate(3deg)}}
.bee-feedback{position:absolute;top:0;left:3%;width:49%;box-sizing:border-box;padding:13px 16px;background:var(--canvas);border:1px solid var(--peach-line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);opacity:var(--bee-feedback,0);transform:translateY(calc((1 - var(--bee-feedback,0))*10px));pointer-events:none;z-index:6}.bee-feedback-from{font-size:9px;color:var(--peach-deep)}.bee-feedback p{font-family:var(--font-serif);font-size:15px;line-height:1.6;color:var(--rose-deep);margin:6px 0}.bee-feedback-rule{font-size:9px;color:var(--orchid-deep)}.bee-feedback button{display:block;padding:0;margin-top:9px;border:0;background:transparent;font:10px/1.7 var(--font-sans);color:var(--plum-400);cursor:pointer;opacity:0;pointer-events:none;transition:opacity var(--dur-base)}.bee-story[data-bee-feedback-ready="true"] .bee-feedback button{opacity:1;pointer-events:auto}.bee-feedback button:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.bee-status{position:absolute;bottom:0;left:2%;right:0;display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line-soft);padding-top:14px;font-size:11px;color:var(--faint)}.bee-status small{font-size:8px;color:var(--plum-300);white-space:nowrap}
.bee-story[data-bee-order="merged"] .bee-lane[data-bee-lane="0"]{border-color:var(--line-strong);background:linear-gradient(90deg,color-mix(in srgb, var(--lavender-soft) 30%, transparent),transparent)}.bee-story[data-bee-order="merged"] .bee-lane[data-bee-lane="0"] header>b{color:var(--plum-400)}.bee-story[data-bee-order="merged"] .bee-lane[data-bee-lane="0"] header>i{background:var(--lavender)}
@media(min-width:801px) and (max-width:1100px){.bee-stage{grid-template-columns:240px minmax(0,1fr);gap:28px}.bee-copy h2{font-size:29px!important}.bee-datum{font-size:8px;padding:0 5px}.bee-feedback{width:53%;padding:12px}.bee-feedback p{font-size:13px}.bee-feedback button{font-size:9px}.bee-lane header{font-size:9px;padding:12px 8px}}
@media(max-width:800px){.bee-story{height:330vh;min-height:2200px}.bee-stage{top:65px;height:calc(100vh - 65px);min-height:740px;padding:22px 18px;display:flex;flex-direction:column;align-items:stretch;gap:18px}.bee-copy h2{font-size:25px!important;margin:7px 0!important;line-height:1.4!important}.bee-copy h2 br{display:none}.bee-eyebrow{font-size:8px}.bee-copy>p{font-size:11px;margin:0 0 16px;line-height:1.8}.bee-steps.story-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.bee-steps .story-step-title{font-size:10px}.bee-scroll-hint{display:none}.bee-workspace{flex:1;min-height:470px}.bee-source-label,.bee-output-label{font-size:8px;top:87px}.bee-output-label small{font-size:7px;display:block;margin:4px 0 0}.bee-datum{font-size:7px;padding:0 4px;gap:3px;height:23px}.bee-lane header{font-size:8px;gap:4px;padding:10px 6px}.bee-lane header>small{font-size:7px}.bee-guide{width:35px;height:35px}.bee-feedback{width:54%;left:0;padding:9px 10px}.bee-feedback-from{font-size:8px}.bee-feedback p{font-size:11px;margin:5px 0}.bee-feedback-rule{font-size:7px}.bee-feedback button{font-size:8px;margin-top:5px}.bee-status{font-size:9px;gap:8px;line-height:1.7}.bee-status small{font-size:7px}}
@media(prefers-reduced-motion:reduce){.bee-story{height:auto;min-height:0}.bee-stage{position:relative;top:0}.bee-wing{animation:none}.bee-scroll-hint{font-size:0}.bee-scroll-hint:after{content:'点击步骤，查看整理过程';font-size:9px}.bee-feedback,.bee-feedback button{transition:none}}

.bee-source-label{opacity:calc(1 - var(--bee-feedback,0))}.bee-feedback{width:45%;max-width:370px;font-size:12px;line-height:1.5}.bee-feedback-from,.bee-feedback-rule{display:block;line-height:1.6}.bee-feedback button{display:none}.bee-story[data-bee-feedback-ready="true"] .bee-feedback button{display:block}.bee-datum{font-size:10px}
@media(max-width:1100px) and (min-width:801px){.bee-datum{font-size:8px}}
@media(max-width:800px){.bee-feedback{width:54%}.bee-datum{font-size:7px}}
.bee-story[data-bee-phase="2"] .bee-feedback{pointer-events:auto}
/* A short desktop window (a laptop with its browser chrome, ~700px tall): the stage is the
   window's height, and the copy column (heading, intro, three steps with notes, hint) was taller,
   so it spilled out of the stage and over the next section. Here the copy tightens to fit; nothing
   is hidden. */
@media(min-width:801px) and (max-height:820px){.bee-stage{min-height:540px;padding-top:16px;padding-bottom:16px}.bee-copy h2{font-size:clamp(24px,3.4vh,32px)!important;line-height:1.35!important;margin:10px 0!important}.bee-copy>p{margin-bottom:16px;line-height:1.7}.bee-steps.story-steps{gap:12px}.bee-steps.story-steps .story-step-title{font-size:15px;margin:2px 0}.bee-steps.story-steps .story-step-note{font-size:12px;line-height:1.5}.bee-scroll-hint{margin-top:14px}}
@media(min-width:801px) and (max-height:660px){.bee-copy h2{font-size:22px!important;margin:6px 0!important}.bee-copy>p{margin-bottom:10px}.bee-steps.story-steps{gap:8px}.bee-steps.story-steps .story-step-note{line-height:1.4}.bee-scroll-hint{margin-top:8px}}