/* GENERATED by tools/extract_shop_catalog.py: frame-explainer styles copied from the Shop (v21). */
.fx-seg{margin:6px 0 10px}
.fx-fig{margin:0 0 8px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 4px}
.fx-fig figcaption{padding:0 8px 4px}
.fx-svg{display:block;width:100%;height:auto;max-width:560px;margin:0 auto;touch-action:manipulation}
.fx-glass{fill:#bfe0ee;stroke:#5d8fa8;stroke-width:1;opacity:.75}
.fx-m{stroke:rgba(0,0,0,.35);stroke-width:.8}
.fx-dash{stroke-dasharray:4 3;stroke:#3a2a1c;stroke-width:1.2}
.fx-mark{stroke:#fff;stroke-width:2}
.fx-mark.fx-dash{stroke:#fff;stroke-dasharray:3 3}
.fx-glyph{stroke:#fff;stroke-width:2.2;stroke-linecap:round;fill:none;pointer-events:none}
.fx-hit{fill:transparent;stroke:none}
.fx-lead{stroke:var(--muted);stroke-width:1}
.fx-svg,.fx-detail svg{stroke:none;fill:none}
.fx-svg text,.fx-detail text,.fx-svg tspan,.fx-detail tspan{stroke:none}
.fx-l1{font:700 13.5px var(--font-ui);fill:var(--ink)}
.fx-l2{font:500 12px var(--font-ui);fill:var(--muted)}
.fx-p{cursor:pointer;transition:opacity .15s}
.fx-p:focus{outline:none}
.fx-p:focus-visible .fx-hit{stroke:var(--accent);stroke-width:2.5;stroke-dasharray:5 3}
.fx-p.fx-dim .fx-m,.fx-p.fx-dim .fx-mark,.fx-p.fx-dim .fx-glyph{opacity:.32}
.fx-p.fx-dim .fx-lab{opacity:.7}
.fx-p.fx-on .fx-m{stroke:var(--ink);stroke-width:2}
.fx-p.fx-on .fx-l1{text-decoration:underline}
.fx-p.fx-on .fx-lead{stroke:var(--ink);stroke-width:1.5}
.fx-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.fx-chips button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 10px;font-size:14.5px}
.fx-chips button i{width:14px;height:14px;border-radius:3px;display:inline-block;flex:none}
.fx-chips button[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:1px;font-weight:700}
.fx-info h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.fx-info h3 span{font-weight:500;color:var(--muted)}
.fx-info h3 b::after{content:" ·";font-weight:500;color:var(--muted)}
.fx-sw{width:16px;height:16px;border-radius:4px;display:inline-block;flex:none}
.fx-item+.fx-item{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.fx-dl{margin:0;display:block}.fx-dl dt{font:700 13px/1.2 var(--font-ui);text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-top:6px}
.fx-dl dd{margin:2px 0 0;font-size:16px;line-height:1.4}
.fx-note{margin:0 0 10px}
.fx-detail{margin:12px 0 0;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px}
.fx-detail svg{display:block;width:100%;height:auto;max-width:520px;margin:0 auto}
.fx-detail .fx-bg{fill:var(--bg)}
.fx-arrow{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fx-water{stroke:#2f7fb8}
.fx-side{font:600 11.5px var(--font-ui);fill:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.fxa-open{margin:8px 0 12px;min-height:52px;font-size:18px}
.fxa-disc{font-size:15px;color:var(--muted);margin:4px 0 8px}
.fxa-fig{margin:0 0 8px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 4px}
.fxa-svg{display:block;width:100%;height:auto;max-width:560px;margin:0 auto;stroke:none;fill:none;touch-action:manipulation}
.fxa-pane{fill:#bfe0ee;opacity:.28;stroke:#5d8fa8;stroke-width:.8}
.fxa-ghost{fill:none!important;stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3;opacity:.55}
.fxa-dest{fill-opacity:.12;stroke:currentColor;stroke-width:2.4;stroke-dasharray:6 4;color:var(--ink)}
.fxa-arrow{stroke:var(--muted);stroke-width:1.6;stroke-dasharray:4 4;fill:none}
.fxa-cur .fx-m{stroke:var(--ink);stroke-width:2}
.fxa-placed{cursor:default}
.fxa-placed[role=button]{cursor:pointer}
.fxa-placed[role=button]:focus{outline:none}
.fxa-placed[role=button]:focus-visible .fx-hit{stroke:var(--accent);stroke-width:2.5;stroke-dasharray:5 3}
.fxa-sel .fx-m{stroke:var(--ink);stroke-width:2.4}
.fxa-ctl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:6px 0}
.fxa-ctl button{min-height:48px;margin:0;padding:0 2px;font-size:14.5px;white-space:normal;line-height:1.15;overflow-wrap:anywhere}
.fxa-dots{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.fxa-dots button{min-width:44px;min-height:44px;width:auto;margin:0;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.fxa-dots button svg{width:16px;height:16px}
.fxa-dots button[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:1px}
.fxa-still{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600;margin:4px 0}
.fxa-still input{width:24px;height:24px;min-height:24px;margin:0;flex:none}
.fxa-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0}
.fxa-step{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.fxa-card h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 6px;font-size:20px}
.fxa-card h3 span{font-weight:500;color:var(--muted)}
.fxa-sw{width:18px;height:18px;flex:none}
.fxa-sysnote{border-left:4px solid var(--accent);padding:4px 10px;margin:8px 0;font-size:15.5px}
.fxa-boardwrap{margin:8px 0}
.fxa-sys{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0}
.fxa-sys>b{min-width:56px}
.fxa-pf{display:inline-flex;flex-direction:column;gap:2px;font-size:13px;max-width:130px}
.fxa-pf img{width:120px;height:46px;object-fit:contain;background:var(--bg);border:1px solid var(--line);border-radius:6px}
.fxa-sec{margin:10px 0 0;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px}
.fxa-sec svg{display:block;width:100%;height:auto;max-width:460px;margin:6px auto;stroke:none}
.fxa-bg{fill:var(--bg)}
.fxa-legend{list-style:none;margin:4px 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14.5px}
.fxa-legend li{display:flex;align-items:center;gap:6px}
.fxa-legend svg{width:14px;height:14px;flex:none}
@media (prefers-reduced-motion: reduce){.fxa-arrow{display:none}}
.fxa-lbl text{font-family:var(--font-ui,inherit);fill:var(--ink)}
.fxa-lbl .n{font-weight:700;font-size:14px}.fxa-lbl .d{font-size:12px;fill:var(--muted)}
.fxa-lbl line{stroke:var(--muted);stroke-width:1}
.fxa-lbl.late{animation:fxaLblIn .35s 2.6s both}
@keyframes fxaLblIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.fxa-lbl.late{animation:none}}
.fx-ref{margin:12px 0}.fx-ref summary{min-height:44px;display:flex;align-items:center;font-weight:600;cursor:pointer}
.fx-ref img{display:block;width:100%;max-width:420px;height:auto;border-radius:8px;border:1px solid var(--line);margin:6px 0}