/* Method: one card with an HTML flow diagram; colors follow the teaser (data warm, model blue, actions pink). */
:root{--data-bg:#fdf6ee;--data-line:#efdcc6;--data-ink:#8a5a2e;--world-bg:#eff5fb;--world-line:#cfe0ef;--world-ink:#2f5f86;--joint-bg:#f9f1f6;--joint-line:#ead0df;--joint-ink:#a23d62}
.method-card{margin-top:34px;border:1px solid #e8e8ee;border-radius:26px;background:linear-gradient(160deg,#fcfcfe,#f6f6fa);box-shadow:0 18px 50px -30px #2a2a4033;overflow:hidden}
.method-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:16px 18px 0}
.method-tabs button{background:transparent;color:#6b6b75;font-size:15px;padding:12px 18px;border-radius:14px;transition:background .2s,color .2s}
.method-tabs button span{font-size:12px;color:#a3a3ad;margin-right:8px}
.method-tabs button:hover{color:#26262d}
.method-tabs button.active{background:#fff;color:#1f1f25;box-shadow:0 2px 10px #0000000f}
.method-flow{display:grid;grid-template-columns:1fr 34px 1fr 34px 1.12fr;align-items:stretch;padding:20px 22px 26px}
.flow-col{border:1px solid;border-radius:20px;padding:20px 20px 22px;display:flex;flex-direction:column;align-items:stretch;transition:opacity .3s,filter .3s}
.col-data{background:var(--data-bg);border-color:var(--data-line)}
.col-world{background:var(--world-bg);border-color:var(--world-line)}
.col-joint{background:var(--joint-bg);border-color:var(--joint-line)}
.col-kicker{font-size:13px;letter-spacing:.4px;margin:0 0 4px;color:#8b8b95}
.col-data .col-kicker{color:var(--data-ink)}.col-world .col-kicker{color:var(--world-ink)}.col-joint .col-kicker{color:var(--joint-ink)}
.prose .flow-col h4{font-size:21px;margin:0 0 18px;letter-spacing:-.3px}
.umi-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;border-radius:12px;overflow:hidden}
.umi-grid img{width:100%;aspect-ratio:320/198;object-fit:cover;display:block}
.rgbd{display:grid;grid-template-columns:auto 1fr 1fr;gap:5px 6px;align-items:center;font-size:12px;color:#7d6a58}
.rgbd>span:nth-child(-n+3){text-align:center}
.rgbd img{width:100%;display:block;border-radius:6px}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pill{font-size:13px;padding:6px 11px;border-radius:20px;background:#fff;border:1px solid var(--data-line);color:var(--data-ink)}
.down{display:block;width:1px;height:22px;margin:6px auto;background:#c3c3cc;position:relative}
.down:after{content:'';position:absolute;left:-4px;bottom:-1px;border:4.5px solid transparent;border-top:6px solid #c3c3cc;border-bottom:0}
.node{background:#fffc;border:1px solid #dcdce4;border-radius:13px;padding:12px 14px;text-align:center;font-size:15px;color:#33333b}
.node small{display:block;font-size:12px;color:#8b8b95;margin-top:3px}
.core{background:#fff;border:1px solid var(--world-line);border-radius:16px;padding:18px 14px;text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center}
.col-joint .core{border-color:var(--joint-line)}
.core strong{font-size:17px;color:#1f2a38}
.core small{font-size:13px;color:#7b8794;margin-top:4px}
.tokens{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:14px}
.tk{font-size:12px;padding:4px 9px;border-radius:7px;color:#2d2d35}
.tk.rgb{background:#d4e6f6}.tk.dep{background:#f8e5ad}.tk.txt{background:#e5ddf5}.tk.his{background:#c4e7dc}.tk.sta{background:#d9eecd}.tk.act{background:#f6d3e3}
.col-world .out{border-color:var(--world-line)}
.outs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.act-out{background:#fdeef5;border-color:var(--joint-line);color:var(--joint-ink)}
.state{display:flex;align-items:center;gap:12px;background:#fffc;border:1px solid var(--joint-line);border-radius:13px;padding:6px 12px;margin-bottom:8px;font-size:14px;color:var(--joint-ink)}
.state img{width:42%;max-width:140px;display:block}
.flow-link{display:flex;align-items:center;justify-content:center;position:relative}
.flow-link:before{content:'';position:absolute;left:4px;right:6px;top:50%;height:1px;background:#bdbdc7}
.flow-link:after{content:'';position:absolute;right:2px;top:calc(50% - 4.5px);border:4.5px solid transparent;border-left:6px solid #bdbdc7;border-right:0}
.flow-link span{position:relative;z-index:1;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;letter-spacing:.5px;color:#8b8b95;background:#f9f9fb;padding:6px 0}
.method-card:not([data-step="all"]) .flow-col{opacity:.32;filter:saturate(.4)}
.method-card[data-step="data"] .col-data,.method-card[data-step="world"] .col-world,.method-card[data-step="joint"] .col-joint{opacity:1;filter:none}
.method-foot{display:grid;grid-template-columns:minmax(220px,.42fr) 1fr;gap:40px;border-top:1px solid #e8e8ee;padding:30px 34px 34px;background:#fff9}
.prose .method-foot h4{font-size:24px;line-height:1.3;margin:0;color:#24242b}
.prose .method-foot p{margin:0;font-size:19px;line-height:1.75;color:#55555f}
.paper-figure img{max-width:100%}
@media(prefers-reduced-motion:reduce){.flow-col,.method-tabs button{transition:none}}
@media(max-width:980px){.method-flow{grid-template-columns:1fr;gap:0}.flow-link{height:46px}.flow-link:before{left:50%;right:auto;top:6px;bottom:8px;width:1px;height:auto}.flow-link:after{right:auto;left:calc(50% - 4px);top:auto;bottom:3px;border:4.5px solid transparent;border-top:6px solid #bdbdc7;border-bottom:0}.flow-link span{writing-mode:horizontal-tb;transform:none;padding:0 8px}.method-foot{grid-template-columns:1fr;gap:12px;padding:24px}}
@media(max-width:650px){.method-tabs{padding:12px 12px 0}.method-tabs button{font-size:13px;padding:10px 12px}.method-flow{padding:14px}.prose .method-foot p{font-size:16px}}
.mask{display:grid;grid-template-columns:repeat(4,18px);gap:4px;justify-content:center;margin:16px auto 6px}
.mask i{width:18px;height:18px;border-radius:4px;background:#eef0f4}
.mask i.on{background:#bcd5ea}
.col-joint .mask i.on{background:#e7c3d6}
.core .mask-cap{font-size:12px;color:#8b8b95;margin-top:0}