.architecture-hint { margin:-10px 0 18px; color:#777; font-size:13px; }
.architecture-map { display:grid; gap:12px; }
.arch-top-grid { display:grid; grid-template-columns:1.8fr 1fr; gap:12px; }
.arch-box { padding:16px; border:1px dashed #999; border-radius:16px; background:#fff; }
.arch-title { display:block; margin-bottom:15px; text-align:center; font:600 14px Manrope; }
.arch-row,.overall-flow,.condition-lane,.cln-flow { display:flex; align-items:center; gap:7px; }
.arch-row>i,.overall-flow>i,.condition-lane>i { position:relative; flex:1; min-width:12px; height:2px; overflow:hidden; background:#c9c9c9; }
.arch-row>i::after,.overall-flow>i::after,.condition-lane>i::after { content:""; position:absolute; width:45%; height:100%; background:#555; animation:path-flow 1.7s linear infinite; }
@keyframes path-flow { from{transform:translateX(-110%)} to{transform:translateX(240%)} }
.arch-node { position:relative; flex:0 1 auto; min-width:74px; padding:12px 10px; border:1px solid #aaa; border-radius:10px; background:#fafafa; text-align:center; font:600 12px/1.3 Manrope; box-shadow:0 3px 8px rgba(0,0,0,.04); cursor:default; transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.arch-node span { font-weight:500; color:#777; }
.arch-node:hover { z-index:10; transform:translateY(-8px) scale(1.04); border-color:#363636; box-shadow:0 15px 28px rgba(0,0,0,.15); }
.arch-node::after { content:attr(data-tip); position:absolute; z-index:20; left:50%; bottom:calc(100% + 11px); width:210px; padding:9px 11px; border-radius:9px; background:#363636; color:#fff; font:400 11px/1.4 Manrope; text-align:left; opacity:0; pointer-events:none; transform:translate(-50%,7px); transition:.2s; }
.arch-node:hover::after { opacity:1; transform:translate(-50%,0); }
.prompt-node { background:#f3f3f3; }
.accent-node { background:#f0f0f0; border-color:#777; }
.speaker-node { background:#e8e8e8; border-color:#888; }
.diffusion-node { border-style:dashed; }
.output-node { border-radius:999px; }
.cln-flow { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cln-flow .arch-node:last-child { grid-column:1/-1; margin:auto; min-width:120px; }
.overall-box { padding-top:13px; }
.conditioning-lanes { display:flex; justify-content:center; gap:45px; margin-bottom:15px; }
.condition-lane { width:min(360px,44%); }
.condition-lane b { font:600 11px Manrope; white-space:nowrap; }
.condition-lane em { font:500 13px serif; }
.overall-flow .arch-node { min-width:70px; padding:14px 8px; }
.overall-flow .arch-node::after { width:190px; }
.viz-panel[data-panel="objective"],.viz-panel[data-panel="subjective"] { min-height:430px; }
@media(max-width:1000px){.arch-top-grid{grid-template-columns:1fr}.arch-row,.overall-flow{overflow-x:auto;padding:25px 5px 18px}.arch-row>i,.overall-flow>i{min-width:24px}.overall-flow .arch-node,.arch-row .arch-node{flex:0 0 92px}.conditioning-lanes{justify-content:flex-start;overflow-x:auto}.condition-lane{flex:0 0 340px}}
@media(max-width:560px){.arch-box{padding:12px}.arch-node::after{display:none}.conditioning-lanes{display:grid;gap:8px}.condition-lane{width:auto;min-width:300px}.architecture-hint{margin-top:-8px}}

.figure-pieces { display:grid; grid-template-columns:1.92fr 1fr; gap:12px; align-items:stretch; }
.figure-piece { position:relative; min-width:0; margin:0; border-radius:14px; background:#fff; transition:transform .25s ease,box-shadow .25s ease; }
.figure-piece:hover { z-index:4; transform:translateY(-8px) scale(1.012); box-shadow:0 18px 36px rgba(0,0,0,.16); }
.figure-piece img { display:block; width:100%; height:100%; object-fit:fill; border-radius:14px; }
.figure-piece figcaption { position:absolute; left:12px; bottom:10px; padding:5px 8px; border-radius:6px; background:rgba(54,54,54,.88); color:#fff; font:600 10px Manrope; letter-spacing:.04em; opacity:0; transform:translateY(4px); transition:.2s; }
.figure-piece:hover figcaption { opacity:1; transform:none; }
.overall-piece { grid-column:1/-1; }
@media(max-width:760px){.figure-pieces{grid-template-columns:1fr}.overall-piece{grid-column:auto}.figure-piece img{height:auto;object-fit:contain}}
.module-hotspot{position:absolute;z-index:3;left:var(--x);top:var(--y);width:var(--w);height:var(--h);outline:0;transition:transform .22s ease,filter .22s ease}.module-hotspot img{display:block;width:100%;height:100%;object-fit:fill;border-radius:2px}.module-hotspot b{position:absolute;left:50%;bottom:calc(100% + 7px);padding:5px 8px;border-radius:6px;background:#363636;color:#fff;font:600 10px Manrope;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,5px);transition:.18s}.module-hotspot:hover,.module-hotspot:focus{z-index:8;transform:translateY(-8px) scale(1.09);filter:drop-shadow(0 10px 8px rgba(0,0,0,.28))}.module-hotspot:hover b,.module-hotspot:focus b{opacity:1;transform:translate(-50%,0)}
.objective-visual-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.parallel-card{min-width:0;padding:14px;border:1px solid var(--line);border-radius:15px;background:#fff}.parallel-card h4{margin:0 0 4px;font:600 14px Manrope}.parallel-chart{display:block;width:100%;height:auto;overflow:visible}.parallel-axis{stroke:#c8c8c8;stroke-width:1;stroke-dasharray:3 5}.parallel-guide{stroke:#ededed;stroke-width:1}.parallel-axis-label{fill:#666;font:600 11px Manrope}.parallel-series polyline{fill:none;stroke:#9b9b9b;stroke-width:2.2;opacity:.72;transition:stroke-width .18s,opacity .18s}.parallel-series circle{fill:#fff;stroke:#888;stroke-width:2}.parallel-series text{fill:#777;font:500 9px Manrope;opacity:0;transition:opacity .18s}.parallel-series.dash-a polyline{stroke-dasharray:7 4}.parallel-series.dash-b polyline{stroke-dasharray:2 4}.parallel-series.joycent polyline{stroke:#363636;stroke-width:4;opacity:1}.parallel-series.joycent circle{fill:#363636;stroke:#363636}.parallel-series:hover polyline{stroke:#111;stroke-width:5;opacity:1}.parallel-series:hover circle{fill:#111;stroke:#111}.parallel-series:hover text{opacity:1}.parallel-key{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:12px;color:#777;font:500 11px Manrope}.parallel-key span::before{content:"";display:inline-block;width:20px;height:2px;margin:0 6px 3px 0;background:#999}.parallel-key .joycent{color:#222;font-weight:700}.parallel-key .joycent::before{height:4px;background:#363636}
.parallel-series .parallel-value{fill:#666;font:500 8px Manrope;opacity:.82}.parallel-series.joycent .parallel-value{fill:#222;font-weight:700;opacity:1}.parallel-series:hover .parallel-value{fill:#111;opacity:1}
@media(max-width:1000px){.objective-visual-grid{grid-template-columns:1fr}.parallel-card{max-width:650px;width:100%;margin:auto}}@media(max-width:700px){.module-hotspot b{display:none}}
.radar-card{min-width:0;padding:14px;border:1px solid var(--line);border-radius:15px;background:#fff}.radar-card h4{margin:0 0 2px;font:600 14px Manrope}.radar-chart{display:block;width:100%;height:auto;overflow:visible}.radar-grid{fill:none;stroke:#dedede;stroke-width:1}.radar-axis{stroke:#c3c3c3;stroke-width:1;stroke-dasharray:3 4}.radar-axis-label{fill:#555;font:600 11px Manrope}.radar-series polygon{fill:rgba(130,130,130,.025);stroke:#999;stroke-width:2.2;transition:fill .18s,stroke-width .18s,opacity .18s}.radar-series circle{fill:#fff;stroke:#888;stroke-width:2;transition:r .18s}.radar-series.dart polygon{stroke-dasharray:8 5}.radar-series.accentbox polygon{stroke-dasharray:2 4}.radar-series.ddgm polygon{stroke:#777}.radar-series.joycent polygon{fill:rgba(54,54,54,.10);stroke:#363636;stroke-width:4}.radar-series.joycent circle{fill:#363636;stroke:#363636}.radar-series:hover{position:relative}.radar-series:hover polygon{fill:rgba(54,54,54,.13);stroke:#111;stroke-width:5}.radar-series:hover circle{fill:#111;stroke:#111;r:7}.radar-value{fill:#666;font:500 8px Manrope;opacity:0;transition:opacity .18s}.radar-series.joycent .radar-value{fill:#222;font-weight:700;opacity:1}.radar-series:hover .radar-value{fill:#111;opacity:1}.radar-key{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:10px;color:#666;font:500 11px Manrope}.radar-key span{display:flex;align-items:center;gap:6px}.radar-key i{display:block;width:24px;height:0;border-top:2px solid #888}.radar-key .joycent{color:#222;font-weight:700}.radar-key .joycent i{border-top:4px solid #363636}.radar-key .dart i{border-top-style:dashed}.radar-key .accentbox i{border-top-style:dotted}.radar-key .ddgm i{border-color:#777}
.radar-series.joycent .radar-value{opacity:0}.radar-series:hover .radar-value{opacity:1}.objective-visual-grid{grid-template-columns:1fr;gap:16px}.radar-card{display:grid;grid-template-columns:150px minmax(0,720px);justify-content:center;align-items:center;padding:18px 24px}.radar-card h4{font-size:17px}.radar-chart{width:min(100%,720px)}@media(max-width:700px){.radar-card{display:block;padding:14px}.radar-card h4{font-size:14px}}
.viz-panel[data-panel="objective"]{width:min(1500px,calc(100vw - 48px));margin-left:50%;transform:translateX(-50%)}.objective-visual-grid{grid-template-columns:repeat(3,minmax(390px,1fr));gap:14px;overflow-x:auto;padding:2px}.radar-card{display:block;padding:16px}.radar-card h4{font-size:16px}.radar-chart{width:100%;max-width:none}@media(max-width:700px){.viz-panel[data-panel="objective"]{width:calc(100vw - 24px)}.objective-visual-grid{grid-template-columns:repeat(3,minmax(330px,1fr))}}
.viz-panel[data-panel="objective"]{width:auto;margin-left:0;transform:none}.objective-visual-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;overflow:visible;padding:0}.radar-card{padding:10px 8px 6px}.radar-card h4{margin-left:8px}.radar-chart{width:100%}@media(max-width:900px){.objective-visual-grid{grid-template-columns:1fr}.radar-card{max-width:620px;width:100%;margin:auto}}
.radar-series.joycent polygon{stroke:#d62728;fill:rgba(214,39,40,.10)}.radar-series.joycent circle{fill:#d62728;stroke:#d62728}.radar-series.joycent .radar-value{fill:#b51f20}.radar-series.ddgm polygon{stroke:#355c9a;fill:rgba(53,92,154,.055)}.radar-series.ddgm circle{stroke:#355c9a}.radar-series.ddgm .radar-value{fill:#294c82}.radar-series.dart polygon{stroke:#159b90;fill:rgba(21,155,144,.055)}.radar-series.dart circle{stroke:#159b90}.radar-series.dart .radar-value{fill:#117d74}.radar-series.accentbox polygon{stroke:#4b0055;fill:rgba(75,0,85,.055)}.radar-series.accentbox circle{stroke:#4b0055}.radar-series.accentbox .radar-value{fill:#4b0055}.radar-key .joycent i{border-color:#d62728}.radar-key .ddgm i{border-color:#355c9a}.radar-key .dart i{border-color:#159b90}.radar-key .accentbox i{border-color:#4b0055}
.subjective-visual-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.subjective-radar{width:100%}@media(max-width:900px){.subjective-visual-grid{grid-template-columns:1fr}}
.combined-radar .radar-axis-label{font-size:10px}.combined-radar .radar-value{font-size:7px}
.metric-guide{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 18px}.metric-guide>div{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}.metric-guide strong,.metric-guide span{display:block}.metric-guide strong{margin-bottom:3px;font:700 11px Manrope}.metric-guide span{color:#666;font:400 10px/1.4 Manrope}.metric-guide sub{font-size:.72em}@media(max-width:900px){.metric-guide{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.metric-guide{grid-template-columns:1fr}}