/* FTLC Stroke Connections: navigation + special-stroke clues only.
   The existing Stroke Families and Core Wheel stylesheets are NOT copied here. */
.ftlc-connections {
  --ink:#1e2a53; --muted:#8d9ac3; --purple:#6557ed;
  --edge:#dfe5fb; --canvas:#f5f7ff;
  color:var(--ink);
  font-family:Inter,"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  max-width:1330px; margin:20px auto 36px; padding:0 12px;
}
.ftlc-connections [hidden] { display:none !important; }
.ftlc-connections .content { width:100%; }
.ftlc-connections .unit { overflow:visible; }
.ftlc-connections .family-slot { padding:0; }
.ftlc-connections .family-slot > [data-ftlc-stroke-family] { min-width:0; }
.ftlc-connections, .ftlc-connections * { box-sizing:border-box }
.ftlc-connections .nav-wrap { background:#fff;border:1px solid var(--edge);border-radius:24px;padding:24px;box-shadow:0 10px 32px rgba(48,64,130,.055) }
.ftlc-connections .intro { display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px }
.ftlc-connections .intro strong { font-size:19px;font-weight:840 }
.ftlc-connections .intro span { font-size:13px;font-weight:550;color:var(--muted) }
.ftlc-connections .nav { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px }
.ftlc-connections .tab { appearance:none;background:#fff;color:var(--ink);cursor:pointer;font:inherit;text-align:left;border:1.5px solid var(--edge);border-radius:20px;padding:15px 16px 15px;min-height:153px;display:flex;flex-direction:column;justify-content:space-between;gap:5px;transition:border-color .18s,box-shadow .18s,background .18s }
.ftlc-connections .tab:hover { border-color:#9e97fc;box-shadow:0 6px 20px #625de614 }
.ftlc-connections .tab[aria-pressed="true"] { border:2px solid var(--purple);padding:14.5px 15.5px 14.5px;background:#f4f2ff;box-shadow:0 0 0 4px rgba(101,87,237,.08) }
.ftlc-connections .tab:focus-visible { outline:3px solid #988afa;outline-offset:3px }
.ftlc-connections .tab-top { display:flex;align-items:flex-start;justify-content:space-between;gap:10px }
.ftlc-connections .num { font-size:31px;line-height:1;font-weight:900;letter-spacing:.02em;color:var(--purple) }
.ftlc-connections .image-box { width:75px;height:69px;display:grid;place-items:center;border-radius:17px;background:#f1efff;flex:0 0 auto }
.ftlc-connections .image-box img { width:65px;height:65px;object-fit:contain;display:block }
.ftlc-connections .tab-name { text-align:center;font-size:20px;font-weight:850;line-height:1.25 }
.ftlc-connections .tab-en { text-align:center;margin-top:5px;font-size:13px;color:var(--muted);font-weight:650 }
.ftlc-connections .tab[data-select="all"] .image-box { background:#f7f7ff;border:1px dashed #d8d7fa }
.ftlc-connections .tab[data-select="all"] .tiles { display:grid;grid-template-columns:repeat(2,13px);grid-template-rows:repeat(2,13px);gap:7px }
.ftlc-connections .tiles i { background:var(--purple);border-radius:4px }
.ftlc-connections .content { margin-top:18px;display:grid;gap:20px }
.ftlc-connections .unit { border:1px solid var(--edge);border-radius:24px;background:#fff;padding:12px;overflow:hidden }
.ftlc-connections .unit[hidden] { display:none }
.ftlc-connections .special { padding:25px 30px 32px;min-height:230px }
.ftlc-connections .special-title { display:flex;gap:12px;align-items:baseline;flex-wrap:wrap }
.ftlc-connections .special-title strong { font-size:25px }
.ftlc-connections .special-title span { font-size:14px;color:var(--muted) }
@media (max-width:850px) {
.ftlc-connections .nav { grid-template-columns:repeat(2,minmax(0,1fr)) }
.ftlc-connections .nav-wrap { padding:17px }
.ftlc-connections .tab { min-height:140px }
.ftlc-connections .unit { padding:7px }
}
@media (max-width:460px) {
.ftlc-connections .nav { gap:9px }
.ftlc-connections .tab { min-height:128px;border-radius:16px;padding:12px }
.ftlc-connections .tab[aria-pressed="true"] { padding:11.5px }
.ftlc-connections .image-box { width:54px;height:55px;border-radius:12px }
.ftlc-connections .image-box img { width:48px;height:48px }
.ftlc-connections .num { font-size:26px }
.ftlc-connections .tab-name { font-size:17px }
.ftlc-connections .tab-en { font-size:11px }
.ftlc-connections .intro strong { font-size:17px }
.ftlc-connections .nav-wrap { padding:12px }
.ftlc-connections .unit { padding:4px;border-radius:18px }
.ftlc-connections .special { padding:19px 16px }
.ftlc-connections .special-title strong { font-size:21px }
.ftlc-connections .content { gap:11px;margin-top:12px }
}
.ftlc-connections .special { padding:25px 27px 30px;min-height:0 }
.ftlc-connections .special-header { margin-bottom:18px }
.ftlc-connections .special-sub { margin-top:7px;font-size:13px;color:#8a94b9 }
.ftlc-connections .sp-grid { display:grid;grid-template-columns:minmax(0,0.83fr) minmax(0,1.17fr);gap:14px }
.ftlc-connections .sp-lesson { min-width:0;border:1px solid #dfe4f8;background:linear-gradient(150deg,#ffffff,#fbfbff);border-radius:20px;padding:17px 18px;overflow:hidden }
.ftlc-connections .sp-lesson-top { display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:15px }
.ftlc-connections .sp-lesson-top h3 { font-size:21px;line-height:1.3;color:#26345b;margin:0;font-weight:800 }
.ftlc-connections .sp-lesson-top h3 span { font-size:13px;color:#8795bc;font-weight:600 }
.ftlc-connections .sp-lesson-top small { font-size:12px;color:#98a0c0;white-space:nowrap }
.ftlc-connections .sp-pair, .ftlc-connections .sp-steps { display:flex;align-items:stretch;justify-content:center;gap:11px }
.ftlc-connections .sp-stage { appearance:none;border:1.5px solid #e1e5f9;border-radius:17px;background:#fff;padding:8px 9px 11px;display:flex;align-items:center;flex-direction:column;min-width:0;min-height:180px;position:relative;cursor:pointer;flex:1 1 0;max-width:174px;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s }
.ftlc-connections .sp-stage:hover, .ftlc-connections .sp-stage:focus-visible { border-color:#9a92fa;box-shadow:0 8px 24px #625de315 }
.ftlc-connections .sp-stage:focus-visible { outline:3px solid #a9a2ff;outline-offset:1px }
.ftlc-connections .sp-stage-active { border:2px solid #695bed;background:#f6f4ff;box-shadow:0 7px 23px #6456e314 }
.ftlc-connections .sp-stroke-frame { height:109px;width:100%;display:grid;place-items:center;background:#fff;border-radius:12px;overflow:hidden }
.ftlc-connections .sp-stroke-frame img { height:103px;width:103px;object-fit:contain;display:block }
.ftlc-connections .sp-stage-zh { margin-top:5px;font-size:17px;line-height:1.2;color:#354066;font-weight:800 }
.ftlc-connections .sp-stage-py { font-size:12px;color:#8895b8;margin-top:5px }
.ftlc-connections .sp-stage-sound { position:absolute;top:10px;right:11px;opacity:0;color:#675be4;font-size:17px }
.ftlc-connections .sp-stage:hover .sp-stage-sound, .ftlc-connections .sp-stage:focus-visible .sp-stage-sound { opacity:1 }
.ftlc-connections .sp-link, .ftlc-connections .sp-arrow { display:grid;place-items:center;align-self:center;color:#6d60e8;font-size:23px;font-weight:700;flex:0 0 auto }
.ftlc-connections .sp-object { display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;max-width:175px;border-radius:17px;border:1px solid #e1e5f9;background:#f8f9ff;padding:8px;min-height:180px;gap:2px }
.ftlc-connections .sp-object-svg { height:102px;width:102px;display:grid;place-items:center }
.ftlc-connections .sp-object-svg svg { height:100%;width:100%;filter:drop-shadow(0 7px 8px #4c6aaa18) }
.ftlc-connections .sp-object strong { font-size:17px }
.ftlc-connections .sp-minor { font-size:11px;color:#8b98bf;margin-top:4px }
.ftlc-connections .sp-pie .sp-stage { min-height:167px }
.ftlc-connections .sp-pie .sp-stroke-frame { height:99px }
.ftlc-connections .sp-pie .sp-stroke-frame img { height:95px;width:95px }
.ftlc-connections .sp-explain { margin-top:12px;border:1px solid #e3e7f8;background:#f9f9ff;border-radius:15px;padding:9px 14px;display:flex;align-items:center;gap:14px;min-height:104px }
.ftlc-connections .sp-explain-art { width:88px;height:88px;flex:0 0 auto;border:1px solid #e6e9f6;background:#fff;border-radius:12px;display:grid;place-items:center;overflow:hidden }
.ftlc-connections .sp-explain-art svg { height:100%;width:100%;filter:drop-shadow(0 2px 4px #69719814) }
.ftlc-connections .sp-explain-copy { min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px }
.ftlc-connections .sp-explain-copy strong { font-size:17px;font-weight:850;color:#27365e }
.ftlc-connections .sp-explain-copy span { font-size:13px;color:#606f9b;line-height:1.35 }
.ftlc-connections .sp-explain-copy small { font-size:11px;color:#93a0c1 }
.ftlc-connections .sp-na { grid-column:1/-1 }
.ftlc-connections .sp-na-layout { display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:18px;align-items:stretch }
.ftlc-connections .sp-na-flow { display:flex;gap:10px;align-items:center;justify-content:center;min-width:0 }
.ftlc-connections .sp-na .sp-stage { min-height:189px;max-width:180px }
.ftlc-connections .sp-na .sp-stroke-frame { height:116px }
.ftlc-connections .sp-na .sp-stroke-frame img { width:115px;height:115px }
.ftlc-connections .sp-na-meaning { border:1px solid #e3e7f8;background:#f8f9ff;border-radius:17px;padding:13px;min-height:189px;display:flex;align-items:center;justify-content:center }
.ftlc-connections .sp-meaning-panel { width:100%;display:flex;align-items:center;gap:15px }
.ftlc-connections .sp-meaning-panel[hidden] { display:none }
.ftlc-connections .sp-meaning-panel .sp-explain-art { width:100px;height:100px }
.ftlc-connections .sp-explain-two-arts { display:flex;flex-direction:row;gap:5px;align-items:center;flex:0 1 auto;min-width:0 }
.ftlc-connections .sp-explain-two-arts .sp-explain-art { width:82px;height:86px }
.ftlc-connections .sp-explain-two-arts .sp-recline { width:107px }
.ftlc-connections .sp-helper { margin:10px 0 0;color:#8995b7;font-size:12px;text-align:right }
@media (max-width:980px) {
.ftlc-connections .sp-grid { grid-template-columns:1fr }
.ftlc-connections .sp-na-layout { grid-template-columns:1fr }
.ftlc-connections .sp-na-meaning { min-height:130px }
}
@media (max-width:600px) {
.ftlc-connections .special { padding:16px 10px 20px }
.ftlc-connections .sp-lesson { padding:13px 11px }
.ftlc-connections .sp-lesson-top h3 { font-size:18px }
.ftlc-connections .sp-lesson-top small { font-size:10px }
.ftlc-connections .sp-stage { min-height:150px;padding:5px 3px 9px;border-radius:13px }
.ftlc-connections .sp-stage-zh { font-size:15px }
.ftlc-connections .sp-stage-py { font-size:11px }
.ftlc-connections .sp-stroke-frame { height:88px }
.ftlc-connections .sp-stroke-frame img { height:85px;width:85px }
.ftlc-connections .sp-pair, .ftlc-connections .sp-steps, .ftlc-connections .sp-na-flow { gap:6px }
.ftlc-connections .sp-object { min-height:152px;padding:4px }
.ftlc-connections .sp-object-svg { height:82px;width:82px }
.ftlc-connections .sp-link, .ftlc-connections .sp-arrow { font-size:17px }
.ftlc-connections .sp-na .sp-stage { min-height:147px }
.ftlc-connections .sp-na .sp-stroke-frame { height:90px }
.ftlc-connections .sp-na .sp-stroke-frame img { height:88px;width:88px }
.ftlc-connections .sp-na-flow { gap:3px }
.ftlc-connections .sp-na-flow .sp-arrow { font-size:15px }
.ftlc-connections .sp-na .sp-stage-zh { font-size:14px }
.ftlc-connections .sp-na-meaning { padding:9px }
.ftlc-connections .sp-explain { padding:8px }
.ftlc-connections .sp-explain-art { width:70px;height:75px }
.ftlc-connections .sp-meaning-panel .sp-explain-art { width:79px;height:85px }
.ftlc-connections .sp-explain-two-arts .sp-recline { width:80px }
.ftlc-connections .sp-explain-two-arts .sp-explain-art { width:55px;height:70px }
.ftlc-connections .sp-explain-copy strong { font-size:14px }
.ftlc-connections .sp-explain-copy span { font-size:12px }
.ftlc-connections .sp-explain-copy small { font-size:10px }
.ftlc-connections .sp-na-meaning { min-height:106px }
.ftlc-connections .sp-helper { font-size:11px;text-align:left }
}
@media (prefers-reduced-motion:no-preference) {
.ftlc-connections .sp-dot:hover .sp-object-svg { animation:ftlcConnDropFloat 1.3s ease-in-out infinite alternate }
.ftlc-connections .sp-stage-active .sp-stroke-frame img { animation:ftlcConnGlow .65s ease-out }
}
@keyframes ftlcConnDropFloat {from{transform:translateY(-5px)}to{transform:translateY(2px)}}
@keyframes ftlcConnGlow {from{transform:scale(.92);opacity:.7}to{transform:scale(1);opacity:1}}
.ftlc-connections .sp-dot-pair { align-items:flex-start }
.ftlc-connections .sp-note-column { display:flex;flex-direction:column;flex:1 1 0;min-width:0;align-items:stretch;gap:10px }
.ftlc-connections .sp-note-column > .sp-stage { flex:0 0 auto;max-width:none;width:100% }
.ftlc-connections .sp-dot .sp-note-column { flex:0 1 210px }
.ftlc-connections .sp-dot .sp-object { flex:0 1 210px;max-width:none }
.ftlc-connections .sp-under-note { background:#f7f8ff;border:1px solid #e4e8fa;border-radius:14px;padding:11px 12px;color:#58658e;line-height:1.45;min-height:73px }
.ftlc-connections .sp-under-note p, .ftlc-connections .sp-object-note p { margin:0 0 4px;font-size:13px;color:#3e4d7c }
.ftlc-connections .sp-under-note small, .ftlc-connections .sp-object-note small { display:block;font-size:11.5px;color:#8e9cbd;line-height:1.3 }
.ftlc-connections .sp-na-layout-refined { grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:16px;align-items:stretch }
.ftlc-connections .sp-na-flow-refined { align-items:stretch;gap:8px;justify-content:stretch }
.ftlc-connections .sp-na-flow-refined .sp-arrow { align-self:flex-start;min-height:190px;flex:0 0 auto }
.ftlc-connections .sp-na .sp-stage { width:100%;max-width:none }
.ftlc-connections .sp-na .sp-under-note { min-height:143px;padding:10px }
.ftlc-connections .sp-xie-note { display:flex;flex-direction:column;gap:8px }
.ftlc-connections .sp-term-note b, .ftlc-connections .sp-object-note b { font-size:13px;color:#394875 }
.ftlc-connections .sp-term-note { display:flex;flex-direction:column;gap:2px }
.ftlc-connections .sp-object-note { border-top:1px solid #e4e8f6;padding-top:7px;display:flex;align-items:center;gap:9px }
.ftlc-connections .sp-small-art { display:grid;place-items:center;flex:0 0 48px;width:48px;height:55px;border-radius:10px;background:white;border:1px solid #e6e9f7;overflow:hidden }
.ftlc-connections .sp-small-art svg { width:100%;height:100% }
.ftlc-connections .sp-small-person { flex-basis:65px;width:65px;height:60px }
.ftlc-connections .sp-object-note > div:last-child { min-width:0 }
.ftlc-connections .sp-wo-note .sp-object-note { border-top:0;padding-top:0;min-height:111px;align-items:center }
.ftlc-connections .sp-angle-panel { min-width:0;display:flex;flex-direction:column;justify-content:center;background:#f8f9ff;border:1px solid #e0e5fa;border-radius:17px;padding:15px 16px;gap:12px }
.ftlc-connections .sp-angle-header { display:flex;flex-direction:column;gap:3px }
.ftlc-connections .sp-angle-header strong { font-size:18px;color:#26345b }
.ftlc-connections .sp-angle-header span { font-size:12px;color:#929dc4 }
.ftlc-connections .sp-angle-image { min-width:0 }
.ftlc-connections .sp-angle-image svg { width:100%;height:auto;max-height:225px;display:block }
.ftlc-connections .sp-angle-slider { width:100%;accent-color:#6d60e9;cursor:pointer }
.ftlc-connections .sp-angle-ends { display:flex;justify-content:space-between;gap:10px;color:#7884ac;font-size:12px }
.ftlc-connections .sp-angle-hint { margin:0;color:#95a0c0;font-size:11px;line-height:1.4 }
@media (max-width:1100px) {
.ftlc-connections .sp-na-layout-refined { grid-template-columns:1fr }
.ftlc-connections .sp-na .sp-under-note { min-height:105px }
.ftlc-connections .sp-angle-panel { max-width:none }
.ftlc-connections .sp-angle-image svg { max-height:220px }
}
@media (max-width:600px) {
.ftlc-connections .sp-dot .sp-note-column { flex:1 1 0 }
.ftlc-connections .sp-dot .sp-object { flex:1 1 0 }
.ftlc-connections .sp-dot-note { padding:9px }
.ftlc-connections .sp-na-flow-refined { gap:4px }
.ftlc-connections .sp-na-flow-refined .sp-arrow { min-height:149px }
.ftlc-connections .sp-na .sp-under-note { padding:8px 6px;min-height:150px }
.ftlc-connections .sp-under-note p, .ftlc-connections .sp-object-note p { font-size:11px }
.ftlc-connections .sp-under-note small, .ftlc-connections .sp-object-note small { font-size:10px }
.ftlc-connections .sp-object-note { flex-direction:column;align-items:flex-start;gap:4px }
.ftlc-connections .sp-small-art, .ftlc-connections .sp-small-person { width:52px;height:42px;flex-basis:auto }
.ftlc-connections .sp-wo-note .sp-object-note { min-height:130px;align-items:flex-start }
.ftlc-connections .sp-term-note b, .ftlc-connections .sp-object-note b { font-size:12px }
.ftlc-connections .sp-angle-panel { padding:12px }
.ftlc-connections .sp-angle-header strong { font-size:16px }
.ftlc-connections .sp-angle-ends { font-size:10px }
}
@media (prefers-reduced-motion: reduce) {
.ftlc-connections .sp-angle-image svg { transition:none }
}
.ftlc-connections .sp-crooked-note { display:flex;flex-direction:column;gap:6px;align-items:flex-start }
.ftlc-connections .sp-crooked-note .sp-crooked-art { width:100%;height:76px;flex:none;max-width:132px;align-self:center }
.ftlc-connections .sp-crooked-note > div:last-child { min-width:0 }
.ftlc-connections .sp-crooked-note b { display:block;margin:2px 0 3px }
.ftlc-connections .sp-crooked-note p { margin:0 0 4px }
.ftlc-connections .sp-wan { grid-column:1 / -1 }
.ftlc-connections .sp-wan-layout { display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px;align-items:stretch }
.ftlc-connections .sp-wan-left { display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);align-items:start;gap:10px }
.ftlc-connections .sp-wan-column { min-width:0;display:flex;flex-direction:column;gap:9px }
.ftlc-connections .sp-wan-column > .sp-stage { width:100%;max-width:none;flex:none;min-height:185px }
.ftlc-connections .sp-wan-column .sp-stroke-frame { height:110px }
.ftlc-connections .sp-wan-column .sp-stroke-frame img { height:108px;width:108px }
.ftlc-connections .sp-wan-arrow { margin-top:87px;align-self:start }
.ftlc-connections .sp-wan-explains { min-height:158px;display:flex;flex-direction:column;gap:7px;background:#f7f8ff;border:1px solid #e4e8fa;border-radius:14px;padding:9px }
.ftlc-connections .sp-wan-cue { display:flex;align-items:center;gap:9px;min-width:0;flex:1 }
.ftlc-connections .sp-cue-image { flex:0 0 60px;width:60px;height:64px;background:#fff;border:1px solid #e6e9f7;border-radius:11px;overflow:hidden;display:grid;place-items:center }
.ftlc-connections .sp-cue-image svg { width:100%;height:100% }
.ftlc-connections .sp-cue-copy { min-width:0;display:flex;flex-direction:column;gap:2px }
.ftlc-connections .sp-cue-copy b { font-size:13px;color:#394875 }
.ftlc-connections .sp-cue-copy span { font-size:12px;color:#53628c;line-height:1.35 }
.ftlc-connections .sp-cue-copy small { font-size:10.5px;color:#8e9cbd;line-height:1.4 }
.ftlc-connections .sp-wan-two-cues .sp-wan-cue+.sp-wan-cue { border-top:1px solid #e5e8f5;padding-top:5px }
.ftlc-connections .sp-wan-angle { min-height:347px }
.ftlc-connections .sp-wan-angle .sp-angle-hint span { display:block;margin-top:2px }
@media (max-width:1000px) {
.ftlc-connections .sp-wan-layout { grid-template-columns:1fr }
.ftlc-connections .sp-wan-angle { min-height:270px }
}
@media (max-width:600px) {
.ftlc-connections .sp-crooked-note .sp-crooked-art { width:100%;max-width:none;height:70px }
.ftlc-connections .sp-wan-left { gap:5px;grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr) }
.ftlc-connections .sp-wan-column > .sp-stage { min-height:151px }
.ftlc-connections .sp-wan-column .sp-stroke-frame { height:90px }
.ftlc-connections .sp-wan-column .sp-stroke-frame img { height:86px;width:86px }
.ftlc-connections .sp-wan-arrow { margin-top:70px }
.ftlc-connections .sp-wan-explains { padding:7px;min-height:160px }
.ftlc-connections .sp-wan-cue { gap:5px;flex-direction:column;align-items:flex-start }
.ftlc-connections .sp-cue-image { width:51px;height:48px;flex-basis:auto }
.ftlc-connections .sp-cue-copy b { font-size:12px }
.ftlc-connections .sp-cue-copy span { font-size:10.5px }
.ftlc-connections .sp-cue-copy small { font-size:10px }
.ftlc-connections .sp-wan-two-cues .sp-wan-cue { flex-direction:row;gap:5px }
.ftlc-connections .sp-wan-two-cues .sp-cue-image { flex:0 0 44px;width:44px;height:51px }
.ftlc-connections .sp-wan-angle { min-height:240px }
}
/* No global theme selectors: all rules scoped under .ftlc-connections. */

.ftlc-connections .unit { overflow:visible; }
.ftlc-connections .family-slot { padding:0; }
.ftlc-connections .tab,.ftlc-connections .sp-stage { font-family:inherit; }