.framework{margin:0;scroll-margin-top:14px}
.framework-map{display:grid;grid-template-columns:minmax(0,1fr) 52px minmax(0,1.3fr);align-items:stretch;background:#f8f9f5;border:1px solid #dee5dc;border-radius:16px;padding:28px}
.fw-grounder,.fw-reader{min-width:0}
.fw-heading{display:flex;align-items:center;gap:11px;margin-bottom:24px}
.fw-number{display:grid;place-items:center;flex:0 0 28px;height:28px;border:1px solid #c6dacf;border-radius:50%;font:11px var(--font);color:var(--teal)}
.fw-heading h4{margin:0;font:650 18px var(--heading);letter-spacing:-.025em}
.fw-frames{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.fw-frames figure{position:relative}
.fw-frames img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.fw-frames figcaption{position:absolute;bottom:7px;left:8px;color:white;background:#172b35bd;border-radius:4px;padding:1px 6px;font:10px/1.6 var(--font)}
.fw-down{text-align:center;color:#99afa3;font-size:22px;line-height:1;margin:12px 0}
.fw-catalog{background:white;border:1px solid #d9e3dc;border-radius:9px;padding:17px 19px}
.fw-catalog>div{display:flex;justify-content:space-between;align-items:center;gap:12px}
.fw-catalog span{font-size:11px;color:var(--muted)}
.fw-catalog code{font-size:11px;color:var(--teal);white-space:nowrap}
.fw-catalog p{font:500 16px/1.5 var(--heading);color:var(--ink);letter-spacing:-.02em;margin-top:10px}
.fw-catalog:target{border-color:#81ad97;box-shadow:0 0 0 3px #ddeee4}
.fw-bridge{display:flex;align-items:center;justify-content:center;color:#92a89d;font-size:26px}
.fw-reader{background:white;border:1px solid #e1dfeb;border-radius:12px;padding:21px 24px}
.fw-reader .fw-heading{margin-bottom:18px}
.fw-reader .fw-number{color:var(--purple);border-color:#d8d3e7}
.fw-bank{margin-left:auto;font-size:10px;color:var(--purple);text-decoration:none;white-space:nowrap}
.fw-question{display:flex;gap:12px;align-items:center;padding-bottom:19px}
.fw-question>span{font:700 10px var(--font);color:var(--purple);border:1px solid #e0dbea;border-radius:50%;width:21px;height:21px;display:grid;place-items:center;flex:none}
.fw-question p{font-size:14px;color:var(--ink);line-height:1.6}
.fw-skill-path{display:grid;grid-template-columns:1fr 28px 1fr;align-items:center}
.fw-skill-path>div{display:grid;grid-template-columns:22px 1fr;gap:3px 10px;align-items:center;padding:16px;background:#f4f2fa;border:1px solid #e7e2f0;border-radius:8px}
.fw-skill-path svg{width:22px;height:22px;stroke:#7971a5;stroke-width:1.5;fill:none;grid-row:span 2}
.fw-skill-path strong{font-size:12px;color:#595084;white-space:nowrap}
.fw-skill-path code{font:10px/1.5 Consolas,monospace;color:#8a81a5}
.fw-skill-path>span{text-align:center;color:#aca3bf;font-size:19px}
.fw-answer{display:flex;align-items:center;gap:15px;background:#eaf4ee;border:1px solid #d6e6db;border-radius:8px;margin-top:19px;padding:16px 18px}
.fw-answer>span{font-size:9px;letter-spacing:.1em;color:#538674}
.fw-answer strong{font:600 27px var(--heading);letter-spacing:-.04em;color:#245e50}
.fw-answer a{margin-left:auto;font:600 12px var(--font);padding:3px 8px;border:1px solid #bfd8cb;border-radius:5px;color:#245e50;text-decoration:none}
.framework>figcaption{font-size:10px;color:var(--muted);margin-top:13px;line-height:1.8}
.framework>figcaption a{color:var(--teal)}
.framework-details,.framework-original{border-bottom:1px solid var(--line)}
.framework-details{margin-top:20px;border-top:1px solid var(--line)}
.framework-details>summary,.framework-original>summary{display:flex;justify-content:space-between;align-items:center;gap:15px;cursor:pointer;list-style:none;padding:16px 0;font-size:12px;color:var(--teal)}
.framework-details>summary::-webkit-details-marker,.framework-original>summary::-webkit-details-marker{display:none}
.framework-details>summary:after,.framework-original>summary:after{content:'+';font-size:19px;line-height:1}
.framework-details[open]>summary:after,.framework-original[open]>summary:after{content:'−'}
.framework-details .method-grid{margin-top:15px}
.framework-details .training{margin:22px 0 25px}
.fw-detail-note{font-size:12px;line-height:1.9;margin:22px 0;max-width:950px}
.framework-original .paper-figure{margin:0;border:0;padding:10px 0 25px}
.framework-original .paper-figure img{max-width:960px;height:auto}
@media(max-width:1000px){.framework-map{padding:22px;grid-template-columns:minmax(0,1fr) 30px minmax(0,1.3fr)}.fw-reader{padding:18px}.fw-heading h4{font-size:16px}.fw-heading{gap:8px}.fw-bank{font-size:9px}.fw-skill-path{grid-template-columns:1fr 20px 1fr}.fw-skill-path>div{padding:13px 10px;grid-template-columns:1fr}.fw-skill-path svg{display:none}.fw-skill-path strong{font-size:11px}.fw-catalog>div{display:block}.fw-catalog code{display:block;margin-top:3px}}
@media(max-width:740px){.framework-map{grid-template-columns:1fr;padding:19px;gap:17px}.fw-heading{margin-bottom:18px}.fw-heading h4{font-size:18px}.fw-bridge{height:17px;transform:rotate(90deg)}.fw-reader{padding:19px}.fw-bank{font-size:10px}.fw-catalog>div{display:flex}.fw-catalog code{margin:0}.fw-skill-path{grid-template-columns:1fr 25px 1fr}.fw-skill-path>div{padding:15px}.fw-skill-path strong{font-size:12px}.framework>figcaption{font-size:9px}.fw-detail-note{font-size:11px}.fw-answer strong{font-size:26px}}
@media(max-width:440px){.framework-map{padding:14px;gap:14px}.fw-reader{padding:15px}.fw-heading h4{font-size:16px}.fw-heading{gap:8px}.fw-bank{font-size:9px}.fw-question p{font-size:13px}.fw-skill-path{grid-template-columns:1fr 20px 1fr}.fw-skill-path>div{padding:12px 10px}.fw-skill-path strong{font-size:11px}.fw-catalog{padding:15px}.fw-catalog p{font-size:15px}.fw-catalog span,.fw-catalog code{font-size:10px}.fw-answer{padding:13px;gap:10px}.fw-answer strong{font-size:25px}.fw-answer>span{font-size:8px}}
