.about-system{background:radial-gradient(ellipse at 20% 45%,#34557170,transparent 60%),var(--ink)}
.about-system .section-head{margin-bottom:28px}
.system-workspace{display:grid;grid-template-columns:1.3fr 1fr;border:1px solid #ffffff24;border-radius:28px;overflow:hidden;background:#ffffff04;box-shadow:inset 0 1px 0 #ffffff12}
.system-map{position:relative;min-height:460px;background:radial-gradient(ellipse at center,#8bcaf112,transparent 65%)}
.system-links{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#b8d6ed26;stroke-width:1}
.system-links path{stroke-width:1.5;stroke-dasharray:4 6;transition:stroke .3s}
.system-links path.is-active{stroke:var(--secondary);stroke-dasharray:none;stroke-width:2;filter:drop-shadow(0 0 5px #d4f2a255)}
.system-hub{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:1px solid #ffffff70;border-radius:32px;background:linear-gradient(135deg,#ffffff32,#ffffff06 45%,#ffffff21);box-shadow:inset 0 1px 0 #ffffff99,0 20px 40px #07162433;backdrop-filter:blur(10px)}
.hub-mark{font-size:43px;line-height:1.2;color:var(--secondary);letter-spacing:-.1em;margin-bottom:6px}.system-hub strong{font-size:15px;font-weight:550}.system-hub>span:last-child{font-size:10px;color:#c2d5e5;margin-top:4px}
.system-topic{position:absolute;display:grid;grid-template-columns:24px 1fr;align-items:center;gap:8px;text-align:left;width:164px;min-height:65px;padding:13px 14px;border:1px solid #ffffff30;border-radius:16px;background:#31475b;color:#e0ebf3;box-shadow:inset 0 1px 0 #ffffff16;font:inherit;cursor:pointer;transition:background .2s,border-color .2s;transform:translate(-50%,-50%)}
.system-topic svg{width:24px;height:24px;grid-row:1/3}.system-topic span{font-size:12px;line-height:1.4;font-weight:550}.system-topic small{font-size:9px;color:#b4cbdc;letter-spacing:.08em;line-height:1}
.system-topic.is-active{background:#d4f2a2;color:#253c26;border-color:#e5ffc0;box-shadow:0 0 25px #d4f2a21a}.system-topic.is-active small{color:#536d39}.system-topic:hover:not(.is-active){background:#405b71;border-color:#b6dbef88}.system-topic:focus-visible{outline:2px solid white;outline-offset:4px;box-shadow:none}
.topic-0{left:50%;top:13%}.topic-1{left:79%;top:35%}.topic-2{left:72%;top:79%}.topic-3{left:28%;top:79%}.topic-4{left:21%;top:35%}
.system-map-hint{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.06em;color:#b7cbdc}
.system-detail{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:40px;border-left:1px solid #ffffff20;background:linear-gradient(145deg,#ffffff0a,#ffffff02)}
.system-detail-label{color:var(--secondary);font-size:10px;letter-spacing:.1em;font-weight:600}
.system-detail h3{font-size:30px;line-height:1.2;letter-spacing:-.03em;margin:20px 0}
.system-detail-copy{font-size:15px;line-height:1.8;color:#d9e7ef}
.system-detail-flow{border-top:1px solid #ffffff20;padding-top:20px;margin-top:26px;font-size:12px;line-height:1.7;color:var(--secondary)}
.system-bottom{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;padding-top:24px}.system-bottom p{font-size:13px;line-height:1.8;color:#c9d9e6}.system-bottom strong{display:block;font-weight:550;color:white;margin-bottom:5px}
@media(max-width:1100px){.system-workspace{grid-template-columns:1fr}.system-map{max-width:650px;width:100%;margin:auto;min-height:430px}.system-detail{border-left:0;border-top:1px solid #ffffff20;padding:30px}.system-detail-copy{max-width:none}.system-detail h3{margin:14px 0}.system-bottom{gap:25px}}
@media(max-width:600px){.system-map{min-height:0;padding:24px 18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.system-links{display:none}.system-hub{position:relative;left:auto;top:auto;transform:none;grid-column:1/-1;justify-self:center;width:120px;height:120px;margin-bottom:12px}.system-topic{position:static;transform:none;width:100%;min-height:68px;padding:12px 10px;gap:7px}.topic-4{grid-column:1/-1}.system-map-hint{position:static;grid-column:1/-1;margin-top:6px}.system-detail{padding:24px 20px}.system-detail h3{font-size:26px}.system-detail-copy{font-size:14px}.system-bottom{grid-template-columns:1fr;gap:16px}.system-workspace{border-radius:22px}}
@media(prefers-reduced-motion:reduce){.system-topic,.system-links path{transition:none}}