:root{font-family:"Microsoft YaHei UI","PingFang SC",sans-serif;color:#574b70;background:#edf0f7;font-synthesis:none;--purple:#8555e8;--line:#d8dce9;--blue:#4d97ff;--orange:#ffab19;--green:#59bc70}
*{box-sizing:border-box}body{margin:0}button{font:inherit;font-weight:700;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s}button:disabled{cursor:default}button:focus-visible{outline:3px solid #ffbf45;outline-offset:4px}button:not(:disabled):active{transform:translateY(2px)}button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-library{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}
.topbar{height:66px;background:var(--purple);display:flex;align-items:center;justify-content:space-between;padding:0 25px;border-bottom:1px solid #7546d3}.brand{display:flex;align-items:center;gap:11px;color:white;border:0;background:none;font-size:21px;letter-spacing:1px;padding:0}.brand>svg{width:47px;height:44px;stroke:none}.top-actions{display:flex;gap:9px;align-items:center}.header-button{display:flex;align-items:center;justify-content:center;gap:9px;background:#ffffff18;border:1px solid #ffffff28;color:white;border-radius:9px;padding:10px 15px;font-size:13px}.header-button:hover{background:#ffffff2b}.icon-only{width:39px;padding:8px!important}
.workbench{display:grid;grid-template-columns:224px minmax(380px,1fr) 332px;gap:14px;padding:16px;height:calc(100dvh - 66px);min-height:620px;max-width:1900px;margin:auto}.panel{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.palette{display:flex;flex-direction:column}.palette-toolbar,.workspace-toolbar,.bank-toolbar{display:flex;align-items:center;justify-content:space-between;min-height:53px;padding:9px 12px;border-bottom:1px solid #e7e9f1;background:#fbfcff}.small-button{border:1px solid #dedbea;background:white;color:#827398;border-radius:7px;padding:7px 9px;display:flex;align-items:center;gap:6px;font-size:12px}.small-button svg{width:16px;height:16px}.small-button:hover:not(:disabled){background:#f1eaff;color:var(--purple)}.small-button:disabled{opacity:.35}.sample-dots{display:grid;grid-template-columns:repeat(3,5px);gap:3px}.sample-dots i{height:5px;width:5px;background:#e3dbf3;border-radius:50%}.sample-dots i.done{background:#8555e8}.palette-body{display:flex;flex:1}.sample-grid{padding:18px 14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 9px;align-content:start;width:100%}.shape-card{position:relative;aspect-ratio:1.15;background:#fff;border:2px solid #e3dfed;border-radius:11px;box-shadow:0 3px 0 #ece9f3;padding:8px;display:grid;place-items:center;touch-action:manipulation}.shape-card:hover{border-color:#baa0ec;transform:translateY(-2px)}.shape-card.selected{border-color:#8555e8;background:#f2ecff;box-shadow:0 0 0 3px #8555e820}.shape-card.assigned{opacity:.25;box-shadow:none;border-style:dashed}.shape-card.assigned:after{content:"";width:8px;height:14px;border-right:3px solid #59bc70;border-bottom:3px solid #59bc70;transform:rotate(45deg);position:absolute;right:5px;bottom:6px}.shape-card svg{width:100%;height:100%;stroke:none}.pixel-shape{stroke:none;shape-rendering:crispEdges}
.workspace{display:flex;flex-direction:column;position:relative}.workspace-toolbar{background:#fff;height:53px}.traffic-dots{display:flex;gap:6px}.traffic-dots i{width:8px;height:8px;background:#e0e3ec;border-radius:50%}.traffic-dots i:first-child{background:#ffca74}.traffic-dots i:nth-child(2){background:#a9dfbf}.traffic-dots i:nth-child(3){background:#c6b3eb}.sorting-area,.training-area,.comparison-area,.test-area{background-image:radial-gradient(#dfe1ec 1.1px,transparent 1.1px);background-size:18px 18px;background-color:#fcfcff;flex:1;padding:36px 22px;position:relative;display:flex;align-items:center;justify-content:center;min-height:340px}.bins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;width:100%;max-width:780px;align-self:stretch;padding-top:17px;padding-bottom:37px}.bin.circle{--bin-color:#a16bdf;--bin-tint:#f7f0ff}.bin.square{--bin-color:#efa62a;--bin-tint:#fff8e9}.mini-shape{width:43px;height:43px;display:inline-flex;align-items:center;justify-content:center}.mini-shape svg{width:100%;height:100%}.workspace-stamp{position:absolute;right:16px;bottom:16px;color:#d9d9e7}.workspace-stamp svg{height:24px;width:24px;fill:none;stroke:currentColor;stroke-width:1.5}
.stage-column{display:flex;flex-direction:column;gap:14px;min-width:0}.stage{flex-shrink:0}.robot-stage{position:relative;height:278px;display:flex;align-items:center;justify-content:center;background:#fffeff}.stage-scenery{position:absolute;inset:0;height:100%;width:100%}.robot{position:relative;width:201px;height:221px;top:3px;transition:transform .3s}.robot.happy{transform:rotate(-5deg) translateY(-6px)}.robot.thinking .robot-eyes{opacity:.6}.result-tokens{display:flex;gap:7px;padding:0 15px 16px;min-height:51px;justify-content:center}.result-token{width:39px;height:39px;border:2px solid #e6dfef;border-radius:8px;position:relative;background:#faf9ff;padding:3px}.result-token svg{height:100%;width:100%}.result-token.correct{border-color:#87d49b;background:#f0faf2}.result-token.incorrect{border-color:#f2a49d;background:#fff4f3}.result-token:after{position:absolute;right:-4px;bottom:-5px;background:#66bf7d;border-radius:50%;height:13px;width:13px;border:2px solid white;content:""}.result-token.incorrect:after{background:#ec8c82}.sample-bank{display:flex;flex-direction:column;flex:1;min-height:164px}.bank-toolbar{flex-shrink:0;min-height:49px;padding:7px 11px}.bank-toolbar .small-button{border:none;background:transparent;padding-left:0}.count-button{border:0;background:#eee5fc;color:#9672cf;border-radius:6px;padding:4px 9px;font-size:12px;min-width:30px}.bank-preview{flex:1;min-height:0;padding:14px;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-content:start;overflow:auto;background-image:radial-gradient(#ebe6f2 1px,transparent 1px);background-size:14px 14px}.bank-preview .mini-shape{width:100%;height:auto;aspect-ratio:1;background:#f6f3fb;border:1px solid #eee9f6;border-radius:5px;padding:4px}.bank-preview .empty-slot{aspect-ratio:1;border:1px dashed #e1d9ef;border-radius:5px;background:#fcfbff}.next-button{--hat-fill:#8555e8;--hat-edge:#7446d0;--hat-shadow:#693bc4;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:0;padding:27px 16px 17px;background:transparent;color:white;font-size:14px;min-height:86px}.next-button .next-hat-outline{position:absolute;inset:0;z-index:-1;width:100%;height:100%;fill:none;stroke:none;pointer-events:none}.next-hat-body{fill:var(--hat-fill);stroke:var(--hat-edge);stroke-width:1;stroke-linejoin:round}.next-hat-shadow{fill:var(--hat-shadow)}.next-hat-body,.next-hat-shadow{transition:fill 150ms ease,stroke 150ms ease}.next-button .next-icon{flex-shrink:0;width:19px;height:19px}.next-button #next-label{flex:1;text-align:center}.next-button:disabled{--hat-fill:#e1d9ef;--hat-edge:#d4c9e5;--hat-shadow:#d4c9e5;color:#a393b8}.next-button:focus-visible{outline:3px solid #bba0eb;outline-offset:4px}.training-area{flex-direction:column;gap:20px}.network{width:min(100%,420px)}.network>svg{width:100%;height:auto}.network-lines path{fill:none;stroke:#d5c4f3;stroke-width:3}.network-nodes circle{fill:#aa86e7;stroke:#8c65cc;stroke-width:3}.training-progress{height:12px;border-radius:6px;background:#e8ddf9;width:65%;overflow:hidden}.training-progress div{width:0;height:100%;background:#a16bdf;transition:none;border-radius:6px}@keyframes shake{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
@media(min-width:1500px){.workbench{grid-template-columns:250px minmax(480px,1fr) 370px;gap:18px;padding:20px}.robot-stage{height:320px}.robot{width:230px;height:250px}.sample-grid{gap:17px 12px;padding:24px 14px}.bins{gap:24px}}
@media(max-width:1150px){.workbench{grid-template-columns:185px minmax(320px,1fr) 270px;gap:10px;padding:10px}.sample-grid{padding:16px 7px;gap:12px 6px}.sorting-area{padding:25px 13px}.bins{gap:9px}.robot-stage{height:235px}.robot{width:175px;height:195px}.bank-preview{grid-template-columns:repeat(5,1fr);gap:6px}.sample-dots{display:none}.result-tokens{gap:5px;padding-inline:8px}.result-token{width:34px;height:34px}}
@media(max-width:900px){.workbench{grid-template-columns:165px minmax(330px,1fr);height:auto;min-height:calc(100dvh - 66px)}.workspace{min-height:570px}.stage-column{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:stretch}.stage{grid-row:span 2}.sample-bank{min-height:170px}.next-button{align-self:end}.robot-stage{height:200px}.robot{height:180px}.sorting-area{min-height:330px}.bins{padding-bottom:12px}}
@media(max-width:560px){.topbar{height:58px;padding:0 13px}.brand{font-size:17px;gap:6px}.brand>svg{height:35px;width:37px}.header-button{font-size:11px;padding:8px}.top-actions{gap:5px}.workbench{display:flex;flex-direction:column;padding:10px;gap:10px}.palette{min-height:139px}.palette-toolbar{min-height:39px;padding:5px 10px}.palette-body{min-height:96px}.sample-grid{grid-template-columns:repeat(9,minmax(42px,1fr));overflow-x:auto;gap:8px;padding:13px 10px}.shape-card{min-width:42px;padding:5px}.workspace{min-height:460px}.workspace-toolbar{height:42px;min-height:42px}.sorting-area{min-height:270px;padding:12px 10px}.bins{padding:12px 0 14px;gap:10px}.mini-shape{width:36px;height:36px}.stage-column{display:grid;grid-template-columns:1fr 1fr;gap:10px}.robot-stage{height:170px}.robot{height:157px;width:150px}.result-tokens{flex-wrap:wrap;min-height:47px}.result-token{width:26px;height:26px}.bank-preview{grid-template-columns:repeat(3,1fr);padding:9px;gap:6px}.bank-toolbar{padding:5px 8px}.bank-toolbar .small-button{font-size:11px;gap:4px}.count-button{font-size:11px;padding:4px 6px;min-width:24px}.next-button{padding:23px 8px 14px;font-size:11px;gap:3px;min-height:72px}.next-button .next-icon{width:15px;height:15px}.sample-bank{min-height:170px}.training-area,.comparison-area,.test-area{min-height:280px;padding:18px}.sample-dots{display:grid}}
.workbench{min-height:540px}.robot-stage{height:clamp(170px,28vh,278px)}.robot{height:80%;max-height:221px}.sample-bank{min-height:120px}.result-token:not(.correct):not(.incorrect):after{display:none}
@media(min-width:901px){.workbench{height:calc(100dvh - 86px)}}
@media(min-width:901px) and (max-height:800px){.sorting-area{padding-top:20px;padding-bottom:20px}.bins{padding-top:10px;padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.round-score{display:flex;justify-content:center;gap:14px;margin-top:9px;font-size:14px;font-weight:400;white-space:nowrap}.round-score strong{font-weight:700}.correct-count{color:#59bc70}.incorrect-count{color:#ed756c}
.round-accuracy{margin-top:9px;font-size:14px;font-weight:400}.round-accuracy strong{font-weight:700}
.palette-body{min-height:0;overflow-y:auto}.palette-actions{padding:12px 14px;border-top:1px solid #e7e9f1;flex-shrink:0}.palette-actions .small-button{width:100%;justify-content:center;padding:10px;background:#f3edff;color:#8555e8;border-color:#dcd0f3}.palette-actions .small-button:disabled{opacity:.4}

.explanation-space{min-height:120px;flex-shrink:0;background:#fff;border-top:1px solid #e8e9f0}.comparison-chart{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;justify-items:center;gap:32px;width:100%;max-width:480px}.round-chart{margin:0;width:100%;max-width:190px;text-align:center}.round-chart>svg{display:block;width:100%;height:auto}.round-chart figcaption{margin-top:18px;font-size:16px;font-weight:700;color:#716183}@media(max-width:560px){.explanation-space{min-height:90px}.comparison-chart{gap:18px}.round-chart figcaption{font-size:14px;margin-top:14px}}




.test-area .result-tokens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;width:100%;max-width:420px;padding:0;min-height:0}.test-area .result-token{width:100%;height:auto;aspect-ratio:1;border-radius:14px;padding:14px;border-width:2px}.test-area .result-token:after{width:18px;height:18px;right:-6px;bottom:-6px;border-width:3px}@media(max-width:560px){.test-area .result-tokens{gap:14px}.test-area .result-token{padding:10px;border-radius:11px}}
.shape-card{transition:transform 120ms ease,border-color 120ms ease,background 120ms ease,opacity 200ms ease}.shape-card.selected{transform:scale(1.045)}.flying-shape{position:fixed;z-index:1000;pointer-events:none;transform-origin:top left;display:grid;place-items:center;background:#fff;border:2px solid #bba0eb;border-radius:11px;padding:8px;box-shadow:0 5px 14px #6240b71a}.flying-shape svg{width:100%;height:100%;stroke:none}.test-area .result-token{transition:background-color 180ms ease,border-color 180ms ease}.test-area .result-token:after{display:none}.result-token.pending{opacity:0}.result-marker{position:absolute;right:-6px;bottom:-6px;width:18px;height:18px;border:3px solid white;border-radius:50%;opacity:0;transform:scale(0)}.result-token.correct .result-marker{background:#66bf7d;opacity:1;transform:scale(1)}.result-token.incorrect .result-marker{background:#ec8c82;opacity:1;transform:scale(1)}.round-accuracy strong{display:inline-block;min-width:3.5ch;font-variant-numeric:tabular-nums}.bin-content .mini-shape{transform-origin:center}.next-button{transition:background-color 150ms ease,border-color 150ms ease,color 150ms ease,transform 100ms ease}
@media(prefers-reduced-motion:reduce){.shape-card.selected{transform:none}.flying-shape{display:none}}

@media(max-width:900px){.sample-bank{height:220px;min-height:0}}

.network-check{opacity:0}.network-green .network-lines path{stroke:#59bc70}.network-green .network-nodes circle{fill:#59bc70;stroke:#369750}.network.complete .network-check{opacity:1}
.robot-expression,.robot-status{transition:opacity 120ms ease}.robot-status{font:700 24px "Microsoft YaHei UI","PingFang SC",sans-serif;fill:#a4f7e0;opacity:0}.robot.has-status .robot-expression{opacity:0}.robot.has-status .robot-status{opacity:1}

.robot{overflow:visible}.robot-light-effects{opacity:0;pointer-events:none;transition:opacity 180ms ease}.robot.thinking .robot-light-effects{opacity:1;animation:antenna-breathe 1.3s ease-in-out infinite}.robot.thinking .robot-antenna>circle{fill:#fff5b5;stroke:#f4b52c;filter:drop-shadow(0 0 5px #ffc43d)}@keyframes antenna-breathe{0%,100%{opacity:.65}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.robot.thinking .robot-light-effects{animation:none;opacity:.85}}
.bank-new{opacity:0}.test-area .result-token{display:flex;flex-direction:column;align-items:center;gap:6px;aspect-ratio:auto;padding:12px}.question-graphic{display:grid;place-items:center;width:100%;aspect-ratio:1;max-height:88px;min-height:0}.prediction-label{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:0 3px;min-height:36px;font-size:12px;line-height:18px;color:#716183;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity 180ms ease,transform 180ms ease}.prediction-label span,.prediction-label strong{white-space:nowrap}.prediction-label strong{font-weight:700}.result-token.correct .prediction-label,.result-token.incorrect .prediction-label{opacity:1;visibility:visible;transform:none}@media(max-width:560px){.test-area .result-token{padding:10px}.prediction-label{font-size:11px;line-height:16px;min-height:32px}}
.explanation-space{display:flex;align-items:center;min-height:144px;padding:18px 24px;text-align:left}.guide-copy{width:100%;max-width:72ch}.guide-copy h2{margin:0 0 8px;color:#70509d;font-size:20px;line-height:1.4;font-weight:700}.guide-copy p{margin:0;color:#675f78;font-size:16px;line-height:1.75;overflow-wrap:anywhere}@media(min-width:901px){.workbench{min-height:600px}}@media(max-width:560px){.explanation-space{padding:16px;min-height:140px}.guide-copy h2{font-size:18px}.guide-copy p{font-size:15px;line-height:1.8}}

.bin{--bin-color:#4d97ff;--bin-tint:#eef5ff;position:relative;min-width:0;min-height:250px}.bin-outline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.bin-outline path{fill:var(--bin-color);stroke:color-mix(in srgb,var(--bin-color) 80%,#4b3866);stroke-width:2;stroke-linejoin:round;transition:fill 150ms ease,stroke 150ms ease}.bin-header{position:absolute;top:8%;height:15%;left:16%;right:4%;display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:5px;background:transparent;color:white;font-size:14px;padding:0;white-space:nowrap}.bin-header svg{width:20px;height:20px;stroke:none}.bin-content{position:absolute;left:20%;right:4%;top:29%;bottom:23%;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:6px;padding:8px;overflow:auto;min-height:0;border:2px dashed color-mix(in srgb,var(--bin-color) 30%,white);border-radius:9px;background:var(--bin-tint);transition:background 150ms ease,border-color 150ms ease}.bin-content:empty:after{content:"+";position:absolute;inset:0;display:grid;place-items:center;color:color-mix(in srgb,var(--bin-color) 40%,white);font-size:32px;font-weight:400}.bin.dragover .bin-content,.bin.available:hover .bin-content{background:color-mix(in srgb,var(--bin-color) 18%,white);border-color:var(--bin-color)}.bin.wrong{animation:shake 250ms}.bin.wrong .bin-outline path{stroke:#ef746d}.bin-content .mini-shape{flex-shrink:0}@media(min-width:1500px){.bin-header{font-size:16px}}@media(max-width:1150px){.bin-header{font-size:12px;gap:4px}.bin-header svg{width:17px;height:17px}}@media(max-width:560px){.bin{min-height:270px}.bin-content{padding:6px;gap:4px;border-radius:6px}.bin-content .mini-shape{width:30px;height:30px}.bin-header{font-size:11px;gap:3px}.bin-header svg{width:14px;height:14px}.bin-content:empty:after{font-size:26px}}