.mechanism-launch{display:inline-flex;align-items:center;gap:.4rem;border:1px solid #81b9b2;border-radius:9px;padding:10px 14px;background:#173d43;color:#d8fff1;font:inherit;font-weight:700;min-height:44px;cursor:pointer}.mechanism-launch:hover{background:#22565a;border-color:#b2efdc}.mechanism-launch:focus-visible,.mechanism-dialog button:focus-visible,.mechanism-dialog input:focus-visible,.mechanism-dialog select:focus-visible{outline:3px solid #ffd689;outline-offset:4px}.mechanism-card-link{margin:12px 0 18px}.mechanism-library-link{margin-top:16px}.reaction-receipt+.mechanism-card-link{margin-top:-6px}.movie-history-link{display:block;margin:7px 0 12px}
.mechanism-dialog{box-sizing:border-box;width:min(1060px,calc(100vw - 32px));max-width:none;max-height:92dvh;padding:0;border:1px solid #5e817c;border-radius:18px;background:#0e2028;color:#e8f2ed;box-shadow:0 28px 100px #0008;font-family:system-ui,'BIZ UDPGothic',sans-serif;overflow-y:auto}.mechanism-dialog::backdrop{background:#030b12dd;backdrop-filter:blur(4px)}.movie-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:22px 28px;background:linear-gradient(110deg,#183b41,#10242d);border-bottom:1px solid #46615e}.movie-heading p{margin:0 0 7px;letter-spacing:.16em;font-size:11px;color:#9ed5c4}.movie-heading h2{font-size:clamp(19px,3vw,27px);margin:0;line-height:1.5}.movie-close{flex:0 0 44px;width:44px;height:44px;padding:0!important;font-size:28px!important;line-height:1;background:#15343d!important;color:#fff!important;border:1px solid #6b8d8b!important;border-radius:50%!important}.movie-body,.movie-library{padding:22px 28px 28px}.movie-route{display:flex;align-items:center;justify-content:center;gap:24px;font-size:clamp(16px,2.3vw,22px);text-align:center}.movie-route>span{color:#b4e2c9;font-size:29px}.movie-condition{font-size:13px;line-height:1.8;text-align:center;color:#bbccc4;margin:7px 0 20px}.movie-stage{overflow:hidden;border:1px solid #456763;border-radius:12px;background:radial-gradient(ellipse at 46% 46%,#1b3540,#10232d 76%);margin:14px 0 0}.movie-stage svg{display:block;width:100%;height:auto;min-height:200px;max-height:54vh}.movie-bond{stroke:#e2eee6;stroke-width:2.4;stroke-linecap:round}.movie-atom{fill:#e5eee9;font-family:Arial,sans-serif;font-size:23px}.movie-atom text{paint-order:stroke;stroke:#142a34;stroke-width:5px;stroke-linejoin:round}.movie-group{font-size:22px}.movie-charge{font-size:18px;font-weight:800}.movie-tag{font-size:12px;opacity:.9}.oxygen-1{fill:#ffc396}.oxygen-2{fill:#b6b8ff}.oxygen-3{fill:#8ce6d5}.oxygen-4{fill:#e8d99c}.movie-spectator{fill:#a6b6ba}.movie-electron-arrows{color:#ffcf78}.movie-electron{stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.movie-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;padding:10px;font-size:12px;color:#b7ccc4}.movie-legend>span:first-child{color:#ffcf78}.movie-curve{font-style:normal;font-size:24px;vertical-align:middle}.movie-caption{padding:16px 20px;border-left:3px solid #8bdbc1;background:#17323b;border-radius:0 8px 8px 0;min-height:127px;box-sizing:border-box}.movie-caption>p:first-child{margin:0 0 4px;letter-spacing:.12em;font-size:11px;color:#a9d6c5}.movie-caption h3{margin:0 0 6px;font-size:19px;line-height:1.5;color:#eef7ed}.movie-caption>p:last-child{margin:0;line-height:1.85;font-size:14px;color:#d3e1d9}.movie-controls{margin:18px 0}.movie-controls>div:first-child{display:flex;justify-content:center;gap:12px}.mechanism-dialog button,.mechanism-dialog select{font-family:inherit;font-size:14px;cursor:pointer}.movie-controls button,.movie-back,.movie-settings select{border:1px solid #6a8b86;border-radius:8px;padding:10px 16px;color:#ecf7ed;background:#1b3c43;min-height:44px}.movie-controls button:disabled{opacity:.35;cursor:default}.movie-controls .movie-play{background:#b0ebd2;color:#14362f;min-width:150px;border-color:#b0ebd2;font-weight:800}.movie-position-label{display:flex;align-items:center;gap:14px;margin:18px 0;color:#b6cfc3;font-size:12px}.movie-position-label input{accent-color:#b5e9d0;width:100%;min-width:0;min-height:30px}.movie-settings{display:flex;justify-content:space-between;align-items:center;gap:12px}.movie-settings button{font-size:12px;padding:5px 10px}.movie-settings label{font-size:12px;color:#b4ccc1;display:flex;align-items:center;gap:10px}.movie-settings select{padding:6px 10px}.movie-notes{border-top:1px solid #45615d;padding-top:16px;margin:22px 0;font-size:13px;line-height:1.9}.movie-notes summary,.movie-whole summary{cursor:pointer;color:#b9e2d0}.movie-notes li{margin:8px 0}.movie-notes a{color:#b9e4d7;text-underline-offset:3px}.movie-notes p{color:#c1d4ca}.movie-back{font-size:12px!important}.movie-whole{margin:12px 0 16px;font-size:13px}.movie-whole>div{display:flex;justify-content:center;align-items:center;gap:20px}.movie-whole figure{margin:10px 0;width:40%;text-align:center}.movie-whole svg{max-height:180px}.movie-whole figcaption{font-size:12px;margin-top:5px;color:#b9cfc3}.movie-lead{font-size:18px;color:#e2f3e8}.movie-library p{font-size:14px;line-height:1.9}.movie-library h3{font-size:16px;color:#b7e7d2;border-bottom:1px solid #48655f;padding-bottom:9px;margin-top:28px}.movie-library-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.movie-library-grid button{display:grid;grid-template-columns:1fr 20px 1fr;gap:8px;text-align:left;align-items:center;padding:14px;border-radius:10px;border:1px solid #557c73;background:#17343c;color:#ecf7ec;line-height:1.6;min-width:0}.movie-library-grid button:hover{background:#214850;border-color:#b2dfc9}.movie-library-grid small{grid-column:1/-1;text-align:right;color:#a4d7c2;font-size:11px}.movie-scope{margin-top:24px;color:#a9c3b6}
@media(max-width:600px){.mechanism-dialog{width:calc(100vw - 12px);max-height:96dvh;border-radius:12px}.movie-heading{padding:16px}.movie-body,.movie-library{padding:16px 12px 22px}.movie-route{gap:10px;font-size:15px}.movie-stage{overflow-x:auto}.movie-stage svg{min-width:650px;min-height:350px;max-height:none}.movie-stage::after{content:'図は横にスクロールできます';display:block;position:sticky;left:0;text-align:center;font-size:11px;color:#abcabd;padding:2px 0 10px}.movie-caption{padding:13px;min-height:160px}.movie-caption h3{font-size:17px}.movie-controls>div:first-child{gap:6px}.movie-controls button{padding:10px 12px}.movie-controls .movie-play{min-width:115px}.movie-library-grid{grid-template-columns:1fr}.movie-legend{justify-content:flex-start;font-size:11px;gap:6px 13px}.movie-position-label{gap:8px}}
@media(prefers-reduced-motion:reduce){.mechanism-dialog *{scroll-behavior:auto!important;animation:none!important;transition:none!important}.mechanism-dialog::backdrop{backdrop-filter:none}}
.movie-heading{position:relative}.movie-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;color:#a9c7b9;font-size:12px}.movie-tools button{border:1px solid #6a8b86;border-radius:7px;color:#d8f2e3;background:#1b3c43;padding:7px 13px;min-height:36px}.movie-stage.is-zoomed{overflow-x:auto}.movie-stage.is-zoomed svg{min-width:1000px;max-height:none}.movie-substituents{display:none}.movie-position-label{white-space:nowrap}.movie-position-label input{flex:1}
@media(max-width:600px){.movie-stage{overflow-x:hidden}.movie-stage svg{min-width:0;min-height:280px;max-height:none}.movie-stage::after{content:none}.movie-stage.is-zoomed svg{min-width:650px}.movie-stage.is-zoomed::after{content:'拡大した図は横にスクロールできます'}.movie-substituents{display:block;color:#c2dacd;font-size:12px;line-height:1.8;margin:7px 0 12px}.movie-position-label{font-size:11px}.movie-caption{min-height:145px}}

/* Optional teaching layer. All additions are scoped to the switch or enabled panel. */
.mechanism-dialog{--e-rich:#20dbff;--e-poor:#ff963b;--e-orbital:#e2c5ff;--e-phase-a:#d7ff3d;--e-phase-b:#6624d9;--e-panel:#152d38;--e-ink:#e4f1ed}
.movie-tool-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.movie-tools .movie-e-switch{display:inline-flex;align-items:center;gap:12px;min-height:44px;border-color:#7ea8a2;padding:7px 11px;color:#d1e4dd;background:#17313b}
.movie-e-switch b{display:inline-flex;align-items:center;justify-content:center;min-width:43px;padding:3px 7px;border-radius:20px;background:#354b52;font-size:12px;font-weight:600}
.movie-e-switch[aria-checked=true]{color:#e7fff7;border-color:#9ae7d4;background:#214a4d}
.movie-e-switch[aria-checked=true] b{background:#a7ead4;color:#173930}
.movie-e-polar-bond{stroke:#cfcedb;stroke-width:20;stroke-linecap:round;opacity:.14}
.movie-e-site{stroke-width:3.2;fill-opacity:.18}
.movie-e-donor{stroke:var(--e-rich);fill:var(--e-rich);stroke-dasharray:none}
.movie-e-acceptor{stroke:var(--e-poor);fill:var(--e-poor);stroke-dasharray:7 4}
.movie-e-reform{stroke:var(--e-orbital);fill:var(--e-orbital)}
.movie-e-resonance{stroke:var(--e-rich);fill:var(--e-rich);stroke-dasharray:2 5;stroke-width:1.5}
.movie-e-delta{font-family:Arial,sans-serif;font-size:24px;font-weight:700}
.movie-e-delta line{stroke:currentColor;stroke-width:1.7;opacity:.9}
.movie-e-delta rect{fill:#10232d;stroke:currentColor;stroke-width:2.6}.movie-e-delta.movie-e-poor rect{fill:#7a2b00}.movie-e-delta.movie-e-rich rect{fill:#004674}
.movie-e-delta text{fill:#fff}
.movie-e-poor{color:var(--e-poor)}.movie-e-rich{color:var(--e-rich)}

.movie-electronics[hidden]{display:none!important}
.movie-electronics{margin:6px 0 18px;padding:17px 18px 14px;background:var(--e-panel);border:1px solid #5d8585;border-radius:12px;color:var(--e-ink);font-size:13px;line-height:1.8}
.movie-e-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}
.movie-e-heading h3{font-size:16px;margin:0;font-weight:700}
.movie-e-heading>span{color:#a9c5bd;font-size:11px;white-space:nowrap}
.movie-e-en{display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;margin:10px 0 12px;color:#d8e8e2;font-variant-numeric:tabular-nums}
.movie-e-en>span{font-size:15px;white-space:nowrap}
.movie-e-en i{font-size:12px;font-style:normal;color:#99b6af}
.movie-e-en small{font-size:11px;color:#a7c3b9;margin-left:3px}
.movie-e-phases{display:flex;gap:5px;padding:0;margin:8px 0 15px;list-style:none}
.movie-e-phases li{flex:1;text-align:center;border:1px solid #526c72;border-radius:6px;padding:4px 3px;color:#a7c1ba;font-size:12px;white-space:nowrap}
.movie-e-phases li[aria-current=step]{background:#c1e8d8;border-color:#c1e8d8;color:#17352e;font-weight:700}
.movie-electronics[data-phase=static] .movie-e-phases li{border-color:#85b3a6;color:#d8eee4}
#mechanism-electronics-content{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;align-items:start}
.movie-e-reading h4{font-size:15px;line-height:1.7;margin:10px 0 6px;color:#edf8ee}
.movie-e-reading p{margin:6px 0;color:#c8ddd3;font-size:13px;line-height:1.9}
.movie-e-reading .movie-e-flow-note{color:#ffe0a0}
.movie-e-route{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12px}
.movie-e-route b{font-weight:400;color:#bfd6cb}
.movie-e-route strong{font-size:12px;color:var(--e-orbital);border-left:1px solid #64757d;padding-left:12px;white-space:nowrap}
.movie-e-orbital-wrap{min-width:0;border:1px solid #5e687d;background:#172a38;border-radius:8px;padding:7px 10px 10px}
.movie-e-orbital{display:block;width:100%;height:auto;color:var(--e-orbital);font-family:Arial,'BIZ UDPGothic',sans-serif}
.movie-e-orbital text{fill:#dce7ef;font-size:16px;paint-order:stroke;stroke:#172a38;stroke-width:3px;stroke-linejoin:round}
.movie-e-lobe{fill:var(--e-phase-a);stroke:#f3ffad;stroke-width:2.2}
.movie-e-lobe.movie-e-opposite-phase{fill:url(#movie-orbital-phase);stroke:#e1baff;stroke-width:2.6}



.movie-e-heading>div{display:flex;align-items:center;gap:12px;color:#a9c5bd;font-size:11px}
.movie-e-guide-play{border:1px solid #83b7a6!important;border-radius:7px;padding:6px 12px;background:#264f4e;color:#d9fff0;font-size:12px!important;min-height:38px;white-space:nowrap}
.movie-e-orbital text{font-size:20px}
.movie-e-orbital circle{fill:#061c2b;stroke:#fff;stroke-width:1.2}
.movie-e-orbital-axis{stroke:#9aa5b7;stroke-width:1.2;stroke-dasharray:3 4}
.movie-e-orbital-link{stroke:#ffdc93;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.movie-e-orbital-wrap>p{font-size:12px;line-height:1.85;color:#c5d3e0;margin:3px 2px 0}
.movie-electronics[data-phase=polarity] .movie-e-orbital-wrap{opacity:1}
.movie-electronics[data-phase=orbitals] .movie-e-orbital-wrap{border-color:#c5b4ed}
.movie-electronics[data-phase=flow] .movie-e-flow-note{background:#5042264d;border-radius:4px}
.movie-e-key{display:flex;flex-wrap:wrap;gap:8px 12px;margin:13px 0 8px;font-size:13px;font-weight:700}.movie-e-key>span{padding:3px 9px;border:1.5px solid currentColor;border-radius:6px;background:#0d2430}.movie-e-key>.movie-e-poor{border-style:dashed}
.movie-e-limit{font-size:11px;color:#b2c9c0;line-height:1.85;margin:4px 0 8px}
.movie-e-more{border-top:1px solid #465f68;padding-top:9px;font-size:12px;line-height:1.9}
.movie-e-more summary{cursor:pointer;color:#b9dbce}
.movie-e-more p{margin:9px 0}
.movie-e-more ul{padding-left:20px;margin-bottom:0}
.movie-e-more a{color:#bde0dd;text-underline-offset:3px;overflow-wrap:anywhere}
.movie-e-complete{display:flex;align-items:center;justify-content:center;min-height:95px;gap:12px;color:#b6ead5;font-size:18px}
.movie-e-complete span{font-size:13px}
@media(max-width:760px){#mechanism-electronics-content{grid-template-columns:1fr;gap:12px}.movie-e-orbital-wrap{max-width:520px;width:100%;box-sizing:border-box;margin:auto}}
@media(max-width:600px){.movie-tools{flex-wrap:wrap;gap:7px}.movie-tool-actions{width:100%;justify-content:space-between}.movie-tools .movie-e-switch{font-size:13px;gap:10px}.movie-electronics{padding:13px 12px 11px}.movie-e-heading h3{font-size:14px}.movie-e-en{gap:4px 9px}.movie-e-en small{flex-basis:100%;margin:0}.movie-e-phases{gap:4px}.movie-e-phases li{font-size:11px}.movie-e-reading h4{font-size:14px}.movie-e-reading p{font-size:12px}}


/* Orbital phase swatches use a different palette from charge polarization. */
.movie-e-phase-key{display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;margin:5px 1px 9px;color:#e3ecee;font-size:11px;line-height:1.7}.movie-e-phase-key>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.movie-e-phase-key i{display:inline-block;width:20px;height:14px;border:1px solid #efffac;border-radius:3px;background:var(--e-phase-a)}.movie-e-phase-key .movie-e-phase-b{border-color:#e1baff;background:repeating-linear-gradient(135deg,#fff 0 2px,var(--e-phase-b) 2px 7px)}.movie-e-phase-key small{color:#c4d6df;font-size:11px}

/* Orbital occupancy is explained outside the main reaction diagram. */
.movie-e-orbital-heading{font-size:14px;line-height:1.7;margin:0 1px 9px;color:#eaf6ee}
.movie-e-occupancy{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 8px}
.movie-e-occupancy>div{min-width:0;padding:8px 9px;border-radius:7px;border:1.5px solid #718791;display:flex;flex-direction:column;gap:3px;line-height:1.6}
.movie-e-occupancy strong{font-size:14px;color:#fff}
.movie-e-occupancy span{font-size:11px;color:#d0e1e8}
.movie-e-occupied{background:#123f4b;border-color:var(--e-rich)!important}
.movie-e-vacant{background:#312c2b;border-color:var(--e-poor)!important;border-style:dashed!important}
.movie-e-reorganized{background:#2b3046;border-color:#b4b9fa!important}
.movie-e-occupancy .movie-e-occupied strong>span{color:#c5faff;letter-spacing:2px;font-size:12px}
.movie-e-orbital-wrap>.movie-e-occupancy-note{color:#f3e3ba;font-size:11px;margin:3px 1px 8px}
.movie-e-phase-details{border-top:1px solid #51616f;margin-top:11px;padding-top:8px;font-size:11px;line-height:1.85}
.movie-e-phase-details summary{cursor:pointer;color:#c5dce5}
.movie-e-phase-details p{margin:6px 0 0;color:#c3d5df}
@media(max-width:600px){.movie-e-occupancy{gap:8px}.movie-e-occupancy>div{padding:7px}.movie-e-occupancy strong{font-size:13px}}

/* The visible curve itself grows; its full arrowhead stays at the actual leading endpoint. */
.movie-active-pair{fill:none;stroke:#b5fff0;stroke-width:1.7;filter:drop-shadow(0 0 2px #52e3d8);pointer-events:none}
.is-electronics .movie-electron[data-drawing=true]{filter:drop-shadow(0 0 3px #ffcd7e)}
.movie-arrow-guide{display:flex;flex-wrap:wrap;gap:9px 18px;margin:3px 0 16px;padding:10px 12px;border:1px solid #49636a;border-radius:9px;background:#102630;color:#d8e9df;font-size:12px}
.movie-arrow-guide>span{display:grid;grid-template-columns:54px 1fr;gap:0 8px;align-items:center;flex:1;min-width:220px}
.movie-arrow-guide svg{grid-row:1/3;width:54px;height:28px;overflow:visible}
.movie-arrow-guide svg>path{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round}
.movie-arrow-guide [data-arrow-example=pair]{color:#ffcf78}
.movie-arrow-guide [data-arrow-example=single]{color:#b5c9d0}
.movie-arrow-guide b{font-size:12px;font-weight:600}.movie-arrow-guide small{font-size:11px;color:#b6ccc4}.movie-arrow-guide>p{flex-basis:100%;margin:2px 0 0;font-size:11px;line-height:1.8;color:#c5d8cd}
.movie-e-orbital-interaction text{font-size:15px;fill:#b8cdd8}.movie-e-orbital-interaction .movie-e-orbital-link{stroke:#a9bdc9;stroke-width:1.6;stroke-dasharray:4 5}
@media(max-width:600px){.movie-arrow-guide{gap:8px;margin-bottom:13px;padding:8px 10px}.movie-arrow-guide>span{min-width:210px}.movie-arrow-guide svg{width:50px}}

/* Sequential reading within one elementary step; structures change only after the joint cue. */
.movie-reading-note[hidden]{display:none!important}
.movie-reading-note{display:flex;flex-direction:column;gap:3px;margin:8px 0 11px;padding:9px 12px;border-left:3px solid #ffcf78;border-radius:0 7px 7px 0;background:#263530;color:#d1ded5;font-size:12px;line-height:1.75}
.movie-reading-note strong{color:#ffe1aa;font-size:13px;font-weight:650}
.movie-reading-note>span{font-size:11px}
.movie-reading-note[data-reading-phase=together]{border-color:#fff1b7;background:#3b3d2c}
.is-electronics .movie-electron[data-reading-active=true]{filter:drop-shadow(0 0 3px #ffcd7e)}
.is-electronics .movie-electron-arrows[data-joint-highlight=true] .movie-electron{filter:drop-shadow(0 0 var(--movie-arrow-glow) #ffcf78);stroke-width:3.6}
.movie-active-bond{stroke:#9cf7ff;stroke-width:6;stroke-linecap:round;opacity:.52;filter:drop-shadow(0 0 3px #20dbff);pointer-events:none}
.movie-electronics[data-phase=together] .movie-e-flow-note{background:#5042264d;border-radius:4px}
@media(max-width:600px){.movie-reading-note{padding:8px 9px;font-size:11px}.movie-reading-note strong{font-size:12px}}