:root{color-scheme:light;--bg:#f3f5f7;--surface:#fff;--soft:#f8fafb;--line:#dce3e8;--ink:#172026;--muted:#66727c;--accent:#245d4a;--accent-soft:#e3f1eb;--target:#7655a7;--target-soft:#eee7f8;--arrow:#172026;--warning:#9a5a16;--danger:#a23a3a;--shadow:0 18px 60px rgba(31,46,55,.08)}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0d1114;--surface:#151b20;--soft:#10161a;--line:#2d3941;--ink:#edf3f5;--muted:#a3b0b8;--accent:#75c6a6;--accent-soft:#17362c;--target:#c5a9ef;--target-soft:#30233f;--arrow:#edf3f5;--warning:#ffc27b;--danger:#ff8f8f;--shadow:0 22px 70px rgba(0,0,0,.28)}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif}button,a{font:inherit}button{color:inherit}.mech-sitebar{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px)}.mech-sitebar__inner{width:min(1440px,calc(100% - 32px));height:64px;margin:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}.mech-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800}.mech-brand img{width:28px;height:28px}.mech-title{font-weight:800;text-align:center}.mech-sitebar__actions{display:flex;justify-content:flex-end;gap:8px}.mech-button{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:9px 13px;cursor:pointer;text-decoration:none;color:var(--ink)}.mech-button:hover:not(:disabled){border-color:var(--accent)}.mech-button:disabled{opacity:.45;cursor:not-allowed}.mech-shell{width:min(1440px,calc(100% - 32px));margin:auto;padding:28px 0 80px}.mech-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:18px}.mech-eyebrow{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:5px 9px;color:var(--muted);font-size:.78rem;font-weight:800;letter-spacing:.08em}.mech-intro h1{margin:10px 0 4px;font-size:clamp(1.75rem,4vw,3.1rem);line-height:1.08}.mech-intro p{margin:0;color:var(--muted);max-width:780px}.mech-status{min-width:310px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:12px 14px;color:var(--muted);font-size:.9rem}[data-state="ready"] .mech-status{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 34%,var(--line))}.mech-error{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0;padding:14px 16px;border:1px solid color-mix(in srgb,var(--danger) 45%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--danger) 8%,var(--surface))}.mech-error[hidden]{display:none}.mech-card{border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}.mech-card__header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid var(--line)}.mech-card__header h2{margin:0;font-size:1rem}.mech-card__header p{margin:4px 0 0;color:var(--muted);font-size:.88rem}.mech-scheme{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.55fr) minmax(0,1fr);align-items:center;min-height:300px;padding:22px 30px 28px}.mech-scheme-label{display:block;margin-bottom:8px;color:var(--muted);font-size:.78rem;font-weight:800;letter-spacing:.05em}.mech-scheme-molecules{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}.mech-scheme-arrow{display:grid;grid-template-rows:minmax(34px,auto) 28px minmax(34px,auto);align-items:center;padding:0 14px;text-align:center}.mech-condition{color:var(--muted);font-size:.88rem;line-height:1.35}.mech-arrow-line{position:relative;width:100%;height:2px;background:var(--ink)}.mech-arrow-line:after{content:"";position:absolute;right:-1px;top:50%;width:11px;height:11px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:translateY(-50%) rotate(45deg)}.mech-scheme-molecule{min-width:0;display:grid;justify-items:center}.mech-plus{font-size:1.25rem;color:var(--muted)}.mech-molecule-stage{position:relative;isolation:isolate;width:min(100%,420px);aspect-ratio:420/260}.mech-svg-host{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none}.mech-rdkit-svg{width:100%;height:100%;overflow:visible}.mech-molecule-label{display:block;margin-top:-8px;color:var(--muted);font-size:.82rem;text-align:center}.mech-atom-map-overlay{position:absolute;inset:0;z-index:7;pointer-events:none}.mech-atom-map-marker{position:absolute;display:grid;place-items:center;min-width:25px;height:25px;padding:0 5px;border:1px solid color-mix(in srgb,var(--accent) 68%,white);border-radius:999px;background:color-mix(in srgb,var(--accent) 86%,black);color:#fff;font-size:.66rem;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.18);transform:translate(-50%,-50%)}
.mech-selection-panel{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;margin:18px 0;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}.mech-selection-slot{min-width:0;display:grid;gap:4px}.mech-selection-slot>span{color:var(--muted);font-size:.75rem;font-weight:800;letter-spacing:.04em}.mech-selection-slot>strong{min-height:25px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}.mech-selection-flow{font-size:1.35rem;color:var(--muted)}.mech-interaction-status{grid-column:1/-1;margin:0;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font-size:.86rem}.mech-interaction-status[data-phase="sourceSelected"]{color:var(--accent)}.mech-interaction-status[data-phase="targetSelected"]{color:var(--target)}
.mech-main-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(340px,.55fr);gap:18px}.mech-toolbar{display:flex;flex-wrap:wrap;gap:8px}.mech-workspace{min-height:480px;display:flex;align-items:center;justify-content:center;gap:12px;padding:26px;background-image:radial-gradient(color-mix(in srgb,var(--line) 75%,transparent) 1px,transparent 1px);background-size:22px 22px}.mech-workspace-molecule{min-width:280px;max-width:440px;border:1px solid transparent;border-radius:16px;background:transparent;padding:8px}.mech-workspace-molecule.is-active-molecule{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent-soft) 50%,transparent)}.mech-workspace-note{margin:0;padding:12px 18px;border-top:1px solid var(--line);color:var(--muted);font-size:.86rem}
.mech-interaction-overlay{position:absolute;inset:0;z-index:4;width:100%;height:100%;overflow:visible}.mech-hit-target{cursor:pointer;outline:none}.mech-hit-atom__tap{fill:transparent;stroke:transparent;stroke-width:20;vector-effect:non-scaling-stroke}.mech-hit-atom__visual{fill:color-mix(in srgb,var(--accent) 13%,transparent);stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .12s ease,fill .12s ease,stroke .12s ease}.mech-hit-atom:hover .mech-hit-atom__visual,.mech-hit-atom:focus-visible .mech-hit-atom__visual{opacity:.7}.mech-hit-bond__tap{stroke:transparent;stroke-linecap:round;vector-effect:non-scaling-stroke}.mech-hit-bond__visual{stroke:var(--accent);stroke-width:7;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .12s ease,stroke .12s ease}.mech-hit-bond:hover .mech-hit-bond__visual,.mech-hit-bond:focus-visible .mech-hit-bond__visual{opacity:.5}.mech-hit-target.is-source .mech-hit-atom__visual{opacity:1;fill:var(--accent-soft);stroke:var(--accent);stroke-width:3}.mech-hit-target.is-source .mech-hit-bond__visual{opacity:1;stroke:var(--accent);stroke-width:8}.mech-hit-target.is-target .mech-hit-atom__visual{opacity:1;fill:var(--target-soft);stroke:var(--target);stroke-width:3}.mech-hit-target.is-target .mech-hit-bond__visual{opacity:1;stroke:var(--target);stroke-width:8}.mech-lone-pair{cursor:pointer;outline:none}.mech-lone-pair__tap{fill:transparent;stroke:transparent;stroke-width:12;vector-effect:non-scaling-stroke}.mech-lone-pair__ring{fill:color-mix(in srgb,var(--surface) 85%,transparent);stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.7}.mech-lone-pair__dot{fill:var(--ink);stroke:var(--surface);stroke-width:.8;vector-effect:non-scaling-stroke}.mech-lone-pair:hover .mech-lone-pair__ring,.mech-lone-pair:focus-visible .mech-lone-pair__ring{stroke-width:3;opacity:1}.mech-lone-pair.is-selected .mech-lone-pair__ring{fill:var(--accent-soft);stroke-width:3;opacity:1}.mech-lone-pair.is-selected .mech-lone-pair__dot{fill:var(--accent)}
.mech-inspector-body{padding:18px}.mech-inspector-body h3{margin:0 0 12px;font-size:1rem}.mech-inspector-body h4{margin:16px 0 7px;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}.mech-badges{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}.mech-badge{display:inline-flex;align-items:center;min-height:28px;border-radius:999px;background:var(--accent-soft);color:var(--accent);padding:4px 9px;font-size:.78rem;font-weight:800}.mech-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}.mech-table{width:100%;border-collapse:collapse;font-size:.78rem}.mech-table th,.mech-table td{padding:8px 9px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}.mech-table th:first-child,.mech-table td:first-child{text-align:left}.mech-table tr:last-child td{border-bottom:0}.mech-table thead{background:var(--soft);color:var(--muted)}.mech-table tbody tr.is-source{background:var(--accent-soft);color:var(--accent);font-weight:800}.mech-table tbody tr.is-target{background:var(--target-soft);color:var(--target);font-weight:800}.mech-runtime{display:grid;gap:8px;margin-top:16px}.mech-runtime-row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:8px;font-size:.82rem}.mech-runtime-row span:first-child{color:var(--muted)}.mech-foundation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.mech-foundation-item{padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.mech-foundation-item strong{display:block;margin-bottom:6px}.mech-foundation-item p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.55}.mech-phase-limit{margin-top:18px;padding:14px 16px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-size:.85rem;background:var(--soft)}
@media(max-width:980px){.mech-intro{align-items:stretch;flex-direction:column}.mech-status{min-width:0}.mech-scheme{grid-template-columns:1fr;gap:14px}.mech-scheme-arrow{width:min(460px,90%);margin:auto}.mech-main-grid{grid-template-columns:1fr}.mech-foundation-grid{grid-template-columns:1fr}.mech-workspace{min-height:430px}}
@media(max-width:680px){.mech-sitebar__inner,.mech-shell{width:min(100% - 20px,1440px)}.mech-sitebar__inner{grid-template-columns:auto 1fr auto}.mech-brand span{display:none}.mech-title{text-align:left;font-size:.86rem}.mech-shell{padding-top:18px}.mech-card{border-radius:16px}.mech-card__header{align-items:flex-start;flex-direction:column;padding:15px}.mech-scheme{padding:12px 10px 20px}.mech-scheme-molecules{flex-wrap:wrap}.mech-selection-panel{grid-template-columns:1fr;gap:9px}.mech-selection-flow{display:none}.mech-selection-slot>strong{white-space:normal}.mech-workspace{min-height:420px;flex-direction:column;padding:14px 8px}.mech-workspace-molecule{min-width:0;width:100%}.mech-molecule-stage{width:min(100%,350px);margin:auto}.mech-button{padding:8px 10px;font-size:.8rem}.mech-hit-atom__tap{stroke-width:28}.mech-hit-bond__tap{}.mech-lone-pair__tap{stroke-width:18}}

/* Phase R2 compact single-line reaction scheme */
.mech-scheme-scroll{overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-gutter:stable both-edges}
.mech-scheme{display:flex;grid-template-columns:none;align-items:center;justify-content:center;gap:16px;min-width:max-content;min-height:0;padding:16px 22px 18px}
.mech-scheme-molecules{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;flex-wrap:nowrap}
.mech-scheme-molecule{width:150px;flex:0 0 150px}
.mech-scheme-molecule .mech-molecule-stage{width:150px;aspect-ratio:420/260}
.mech-scheme-molecule .mech-molecule-label{margin-top:-3px;font-size:.74rem}
.mech-scheme-arrow{flex:0 0 clamp(190px,22vw,285px);width:clamp(190px,22vw,285px);display:grid;grid-template-rows:minmax(26px,auto) 22px minmax(26px,auto);align-items:center;padding:0 8px;text-align:center}
.mech-condition{font-size:.8rem}
.mech-arrow-count{align-self:stretch;display:grid;place-items:center;min-width:118px;border-left:1px solid var(--line);padding-left:12px;color:var(--muted);font-size:.8rem;font-weight:800}
.mech-selection-panel{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto}
.mech-interaction-status{grid-column:1/-1}
.mech-workspace{position:relative;isolation:isolate}
.mech-workspace-molecule{position:relative;z-index:2}
.mech-workspace>.mech-plus{position:relative;z-index:2}
.mech-workspace-arrow-layer{position:absolute;inset:0;z-index:6;overflow:visible;pointer-events:none}
.mech-electron-arrow{pointer-events:none}
.mech-electron-arrow__path{fill:none;stroke:var(--arrow);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 1px color-mix(in srgb,var(--surface) 80%,transparent));transition:stroke-width .12s ease,stroke .12s ease}
.mech-electron-arrow__hit{fill:none;stroke:transparent;stroke-width:24;stroke-linecap:round;vector-effect:non-scaling-stroke;pointer-events:stroke;cursor:pointer;outline:none}
.mech-electron-arrow.is-selected .mech-electron-arrow__path{stroke:var(--target);stroke-width:4.5}
.mech-arrowhead-shape{fill:var(--arrow);stroke:var(--surface);stroke-width:.65;vector-effect:non-scaling-stroke}
.mech-electron-arrow.is-selected .mech-arrowhead-shape{fill:var(--target)}
.mech-toolbar .mech-button:disabled{opacity:.42;cursor:not-allowed}

@media(max-width:980px){
  .mech-scheme{grid-template-columns:none;gap:12px;justify-content:flex-start;min-width:max-content;padding-inline:16px}
  .mech-scheme-arrow{width:210px;flex-basis:210px;margin:0}
}
@media(max-width:680px){
  .mech-scheme{padding:10px 12px 14px;gap:8px}
  .mech-scheme-molecule{width:125px;flex-basis:125px}
  .mech-scheme-molecule .mech-molecule-stage{width:125px}
  .mech-scheme-arrow{width:170px;flex-basis:170px}
  .mech-selection-panel{grid-template-columns:1fr}
  .mech-arrow-count{border-left:0;border-top:1px solid var(--line);padding:9px 0 0;min-width:0}
  .mech-electron-arrow__hit{stroke-width:32}
}
.mech-electron-arrow__source-dot{fill:var(--arrow);stroke:var(--surface);stroke-width:.8;vector-effect:non-scaling-stroke;pointer-events:none}
.mech-electron-arrow.is-selected .mech-electron-arrow__source-dot{fill:var(--target)}
.mech-arrowhead-shape--selected{fill:var(--target)}
.mech-electron-arrow:has(.mech-electron-arrow__hit:focus-visible) .mech-electron-arrow__path{stroke:var(--target);stroke-width:4.5}


/* Phase R3: enlarged paper-style reaction scheme and transformation controls */
.mech-scheme{gap:22px;padding:22px 30px 26px}
.mech-scheme-molecule{width:230px;flex:0 0 230px}
.mech-scheme-molecule .mech-molecule-stage{width:230px}
.mech-scheme-molecule .mech-molecule-label{display:none}
.mech-workspace-molecule .mech-molecule-label{display:none}
.mech-scheme-arrow{flex:0 0 clamp(270px,25vw,360px);width:clamp(270px,25vw,360px);grid-template-rows:minmax(38px,auto) 30px minmax(38px,auto);padding:0 12px}
.mech-condition{font-size:1.02rem;line-height:1.45;font-weight:650;color:var(--ink)}
.mech-arrow-line{height:2.5px}.mech-arrow-line:after{width:13px;height:13px;border-width:2.5px}
.mech-button--primary{border-color:var(--accent);background:var(--accent);color:#fff;font-weight:800}.mech-button--primary:hover:not(:disabled){filter:brightness(1.06)}
.mech-step-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;border-top:1px solid var(--line);background:var(--soft);font-size:.84rem}.mech-step-strip strong{color:var(--accent)}.mech-step-strip span{color:var(--muted);text-align:right}
.mech-workspace-molecule[data-provisional="true"]{border-style:dashed}
.mech-fallback-svg{color:var(--ink)}
@media(max-width:980px){.mech-scheme-molecule{width:205px;flex-basis:205px}.mech-scheme-molecule .mech-molecule-stage{width:205px}.mech-scheme-arrow{width:270px;flex-basis:270px}}
@media(max-width:680px){.mech-scheme{gap:12px;padding:16px 14px 18px}.mech-scheme-molecule{width:180px;flex-basis:180px}.mech-scheme-molecule .mech-molecule-stage{width:180px}.mech-scheme-arrow{width:230px;flex-basis:230px}.mech-condition{font-size:.94rem}.mech-step-strip{align-items:flex-start;flex-direction:column}.mech-step-strip span{text-align:left}}

.mech-scheme-molecule .mech-rdkit-svg{transform:scale(1.65);transform-origin:center;overflow:visible}
.mech-condition{font-size:1.08rem}
@media(max-width:680px){.mech-scheme-molecule .mech-rdkit-svg{transform:scale(1.55)}.mech-condition{font-size:1rem}}


/* Phase R3: enlarged paper-style reaction scheme and transformation controls */
.mech-scheme{gap:22px;padding:22px 30px 26px}
.mech-scheme-molecule{width:230px;flex:0 0 230px}
.mech-scheme-molecule .mech-molecule-stage{width:230px}
.mech-scheme-molecule .mech-molecule-label{display:none}
.mech-workspace-molecule .mech-molecule-label{display:none}
.mech-scheme-arrow{flex:0 0 clamp(270px,25vw,360px);width:clamp(270px,25vw,360px);grid-template-rows:minmax(38px,auto) 30px minmax(38px,auto);padding:0 12px}
.mech-condition{font-size:1.02rem;line-height:1.45;font-weight:650;color:var(--ink)}
.mech-arrow-line{height:2.5px}.mech-arrow-line:after{width:13px;height:13px;border-width:2.5px}
.mech-button--primary{border-color:var(--accent);background:var(--accent);color:#fff;font-weight:800}.mech-button--primary:hover:not(:disabled){filter:brightness(1.06)}
.mech-step-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;border-top:1px solid var(--line);background:var(--soft);font-size:.84rem}.mech-step-strip strong{color:var(--accent)}.mech-step-strip span{color:var(--muted);text-align:right}
.mech-workspace-molecule[data-provisional="true"]{border-style:dashed}
.mech-fallback-svg{color:var(--ink)}
@media(max-width:980px){.mech-scheme-molecule{width:205px;flex-basis:205px}.mech-scheme-molecule .mech-molecule-stage{width:205px}.mech-scheme-arrow{width:270px;flex-basis:270px}}
@media(max-width:680px){.mech-scheme{gap:12px;padding:16px 14px 18px}.mech-scheme-molecule{width:180px;flex-basis:180px}.mech-scheme-molecule .mech-molecule-stage{width:180px}.mech-scheme-arrow{width:230px;flex-basis:230px}.mech-condition{font-size:.94rem}.mech-step-strip{align-items:flex-start;flex-direction:column}.mech-step-strip span{text-align:left}}

/* Phase R4: minimal drawing surface, larger structures, single visible lone pair */
.mech-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.mech-shell--minimal{width:min(1680px,calc(100% - 32px));padding:22px 0 56px}
.mech-card--scheme{margin-bottom:18px}
.mech-card--workspace{overflow:hidden}
.mech-toolbar--minimal{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface)}
.mech-toolbar--minimal .mech-button{min-height:43px;padding:10px 16px}
.mech-workspace--large{min-height:650px;justify-content:center;gap:20px;padding:34px 28px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-gutter:stable both-edges}
.mech-workspace--large .mech-workspace-molecule{min-width:500px;width:500px;max-width:none;padding:0;border:0;background:transparent}
.mech-workspace--large .mech-workspace-molecule.is-active-molecule{border:0;background:transparent}
.mech-workspace--large .mech-molecule-stage{width:500px;max-width:none}
.mech-workspace--large .mech-rdkit-svg{transform:scale(1.38);transform-origin:center;overflow:visible}
.mech-workspace--large>.mech-plus{font-size:1.6rem;padding:0 3px}
.mech-compact-status{margin:0;padding:9px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem;text-align:center;background:var(--soft)}
.mech-compact-status[hidden]{display:none}
.mech-lone-pair{cursor:default;pointer-events:none}
.mech-lone-pair__ring{display:none}
.mech-lone-pair__dot{fill:var(--accent);stroke:var(--surface);stroke-width:.9}
.mech-electron-arrow__source-pair-halo{display:none}
.mech-electron-arrow__source-dot{fill:var(--arrow);stroke:var(--surface);stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
.mech-electron-arrow.is-selected .mech-electron-arrow__source-pair-halo{stroke:var(--target)}
.mech-electron-arrow.is-selected .mech-electron-arrow__source-dot{fill:var(--target)}
@media(max-width:1180px){
  .mech-workspace--large{justify-content:flex-start}
  .mech-workspace--large .mech-workspace-molecule{min-width:450px;width:450px}
  .mech-workspace--large .mech-molecule-stage{width:450px}
}
@media(max-width:680px){
  .mech-shell--minimal{width:min(100% - 20px,1680px);padding-top:14px}
  .mech-toolbar--minimal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:10px;gap:8px}
  .mech-toolbar--minimal .mech-button{width:100%;min-height:44px;padding:8px 7px;font-size:.78rem}
  .mech-workspace--large{min-height:520px;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;padding:18px 10px}
  .mech-workspace--large .mech-workspace-molecule{min-width:370px;width:370px}
  .mech-workspace--large .mech-molecule-stage{width:370px}
  .mech-workspace--large .mech-rdkit-svg{transform:scale(1.34)}
  .mech-compact-status{font-size:.76rem;padding:8px 10px}
}

/* Phase R5: exact SVG/interaction viewport alignment and explicit answer check */
.mech-scheme-molecule .mech-rdkit-svg,
.mech-workspace--large .mech-rdkit-svg{transform:none!important;transform-origin:center;overflow:visible}
.mech-answer-panel{display:grid;justify-items:center;gap:10px;margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}
.mech-button--answer{min-width:min(320px,100%);min-height:50px;border-color:var(--accent);background:var(--accent);color:#fff;font-weight:850;font-size:1rem}
.mech-button--answer:hover:not(:disabled){filter:brightness(1.06)}
.mech-answer-feedback{width:min(720px,100%);margin:0;padding:12px 16px;border:1px solid var(--line);border-radius:14px;text-align:center;font-weight:750}
.mech-answer-feedback[hidden]{display:none}
.mech-answer-feedback[data-result="correct"]{border-color:color-mix(in srgb,var(--accent) 62%,var(--line));background:var(--accent-soft);color:var(--accent)}
.mech-answer-feedback[data-result="incorrect"]{border-color:color-mix(in srgb,var(--warning) 55%,var(--line));background:color-mix(in srgb,var(--warning) 9%,var(--surface));color:var(--warning)}
.mech-molecule-stage[data-viewport]{contain:layout paint}
@media(max-width:680px){.mech-answer-panel{padding:14px}.mech-button--answer{width:100%}}
.mech-hit-atom__tap{pointer-events:all;fill:rgba(0,0,0,.001);stroke:rgba(0,0,0,.001)}
.mech-hit-bond__tap{pointer-events:stroke;stroke:rgba(0,0,0,.001)}
.mech-svg-host{display:block}
.mech-svg-host>.mech-rdkit-svg{position:absolute;inset:0;width:100%;height:100%}

/* Phase R6: Warren-style practice selector */
.mech-card--selector{padding:0;overflow:hidden}
.mech-filter-line{display:flex;align-items:flex-start;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line)}
.mech-filter-line[hidden],.mech-filter-line--secondary[hidden]{display:none!important}
.mech-filter-label{flex:0 0 76px;padding-top:7px;color:var(--muted);font-size:.78rem;font-weight:750;letter-spacing:.04em}
.mech-filter-options{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.mech-filter-chip{min-height:34px;padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:.84rem;font-weight:700;cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease}
.mech-filter-chip:hover{border-color:var(--accent);transform:translateY(-1px)}
.mech-filter-chip.is-active,.mech-filter-chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:#fff}
.mech-filter-line--secondary{padding-left:110px;background:var(--soft)}
.mech-selector-note{margin:0;padding:10px 18px;border-bottom:1px solid var(--line);color:var(--muted);font-size:.8rem}
.mech-problem-nav{display:grid;grid-template-columns:42px minmax(0,1fr) auto 42px;align-items:center;gap:12px;padding:14px 18px;background:color-mix(in srgb,var(--surface) 82%,var(--soft))}
.mech-nav-button{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);font-size:1.1rem;cursor:pointer}
.mech-nav-button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.mech-nav-button:disabled{opacity:.35;cursor:default}
.mech-problem-heading{display:flex;flex-direction:column;min-width:0;gap:3px}
.mech-problem-heading strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem}
.mech-problem-heading span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.76rem}
.mech-problem-position{white-space:nowrap;color:var(--muted);font-size:.78rem;font-weight:700}
@media(max-width:680px){
 .mech-filter-line{display:block;padding:12px 14px}.mech-filter-label{display:block;padding:0 0 8px;flex:none}.mech-filter-line--secondary{padding-left:14px}
 .mech-filter-options{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}.mech-filter-chip{flex:0 0 auto}
 .mech-selector-note{padding:9px 14px}.mech-problem-nav{grid-template-columns:38px minmax(0,1fr) 38px;padding:12px 10px;gap:8px}
 .mech-problem-position{display:none}.mech-problem-heading strong{font-size:.92rem}.mech-problem-heading span{font-size:.7rem}
}

/* Phase R6.2: native desktop scrolling, label-safe lone pairs, selective functional colours, review flow, and pinch zoom */
.mech-workspace--large{
  position:relative;
  display:block;
  min-height:720px;
  padding:0;
  overflow:hidden;
  touch-action:pan-y;
  overscroll-behavior:auto;
  user-select:none;
}
.mech-workspace-canvas{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  width:max-content;
  min-width:0;
  box-sizing:border-box;
  min-height:720px;
  padding:42px 34px;
  transform-origin:0 0;
  will-change:transform;
}
.mech-workspace-canvas.is-viewport-animating{transition:transform .2s ease}
.mech-workspace--large.is-pinching{cursor:grabbing}
.mech-workspace--large[data-viewport-locked="true"]{touch-action:auto}
.mech-workspace--large .mech-workspace-molecule{
  flex:0 0 540px;
  min-width:540px;
  width:540px;
  max-width:none;
}
.mech-workspace--large .mech-molecule-stage{width:540px;max-width:none}
.mech-workspace-canvas>.mech-plus{flex:0 0 auto;font-size:1.7rem;padding:0 3px}
.mech-workspace-arrow-layer{width:100%;height:100%}
.mech-zoom-hint{margin:0;padding:8px 14px;border-top:1px solid var(--line);background:var(--soft);color:var(--muted);font-size:.76rem;text-align:center}
@media(min-width:681px){.mech-zoom-hint{display:none}}
[data-review="true"] .mech-interaction-overlay,[data-review="true"] .mech-electron-arrow__hit{pointer-events:none!important}
@media(min-width:681px){
  .mech-workspace--large{touch-action:auto;overscroll-behavior:auto}
}


.mech-review-panel{
  display:grid;
  gap:16px;
  margin-top:18px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
  box-shadow:var(--shadow);
  scroll-margin-top:78px;
}
.mech-review-panel[hidden]{display:none}
.mech-review-header{display:flex;align-items:flex-start;gap:14px}
.mech-review-header h2{margin:0;font-size:1.18rem;line-height:1.35}
.mech-review-header p{margin:5px 0 0;color:var(--muted);font-size:.82rem}
.mech-review-result{display:inline-grid;place-items:center;flex:0 0 auto;min-width:74px;min-height:34px;padding:5px 12px;border-radius:999px;font-weight:850}
.mech-review-panel[data-result="correct"] .mech-review-result{background:var(--accent-soft);color:var(--accent)}
.mech-review-panel[data-result="incorrect"] .mech-review-result{background:color-mix(in srgb,var(--warning) 12%,var(--surface));color:var(--warning)}
.mech-review-summary{margin:0;font-size:.96rem;line-height:1.75}
.mech-review-attempt{margin:0;padding:10px 13px;border-left:3px solid var(--line);background:var(--soft);color:var(--muted);font-size:.82rem}
.mech-solution-card{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--soft)}
.mech-solution-nav{display:grid;grid-template-columns:42px minmax(0,1fr) auto 42px;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.mech-solution-nav strong{font-size:.95rem}.mech-solution-nav span{color:var(--muted);font-size:.78rem;font-weight:750}
.mech-solution-workspace{position:relative;display:block;min-height:470px;overflow:auto;background-image:radial-gradient(color-mix(in srgb,var(--line) 75%,transparent) 1px,transparent 1px);background-size:22px 22px}
.mech-solution-workspace .mech-workspace-canvas{min-height:470px;padding:28px 22px;gap:18px}
.mech-solution-workspace .mech-workspace-molecule{flex:0 0 390px;min-width:390px;width:390px;padding:0;border:0;background:transparent}
.mech-solution-workspace .mech-molecule-stage{width:390px}
.mech-solution-copy{padding:16px 18px;border-top:1px solid var(--line);background:var(--surface)}
.mech-solution-copy h3{margin:0 0 6px;font-size:1rem}.mech-solution-copy p{margin:0;color:var(--muted);line-height:1.65}
.mech-review-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.mech-review-actions .mech-button{min-width:160px;min-height:46px}

/* Keep functional-group colours crisp without recolouring the carbon skeleton. */
.mech-rdkit-svg[data-stable-color="functional-only"] path{transition:stroke .12s ease,fill .12s ease}
.mech-fallback-svg{color:var(--ink)}

@media(max-width:1180px){
  .mech-workspace--large .mech-workspace-molecule{flex-basis:500px;min-width:500px;width:500px}
  .mech-workspace--large .mech-molecule-stage{width:500px}
}
@media(max-width:680px){
  .mech-workspace--large{min-height:570px}
  .mech-workspace-canvas{justify-content:flex-start;min-height:570px;gap:10px;padding:24px 14px}
  .mech-workspace--large .mech-workspace-molecule{flex-basis:410px;min-width:410px;width:410px}
  .mech-workspace--large .mech-molecule-stage{width:410px}
  .mech-review-panel{padding:15px;gap:13px}.mech-review-header{align-items:flex-start}.mech-review-header h2{font-size:1.02rem}
  .mech-review-result{min-width:62px;min-height:30px;font-size:.78rem}
  .mech-solution-nav{grid-template-columns:38px minmax(0,1fr) 38px;padding:9px 10px}.mech-solution-nav span{display:none}
  .mech-solution-workspace{min-height:390px}.mech-solution-workspace .mech-workspace-canvas{min-height:390px;justify-content:flex-start;padding:18px 10px}
  .mech-solution-workspace .mech-workspace-molecule{flex-basis:330px;min-width:330px;width:330px}.mech-solution-workspace .mech-molecule-stage{width:330px}
  .mech-review-actions{display:grid;grid-template-columns:1fr 1fr}.mech-review-actions .mech-button{min-width:0;width:100%}
}
[data-review="true"] .mech-answer-panel{display:none}


/* Phase R6.3: compact lone-pair placement without opaque atom overlays */
.mech-hit-atom__visual{
  fill:none!important;
  background:none!important;
}
.mech-hit-target.is-source .mech-hit-atom__visual,
.mech-hit-target.is-target .mech-hit-atom__visual,
.mech-hit-atom:hover .mech-hit-atom__visual,
.mech-hit-atom:focus-visible .mech-hit-atom__visual{
  fill:none!important;
  opacity:.92;
  stroke-width:2.2;
}
.mech-lone-pair__ring,
.mech-electron-arrow__source-pair-halo{display:none!important}
.mech-lone-pair__dot,
.mech-electron-arrow__source-dot{
  fill:var(--arrow)!important;
  stroke:none!important;
}

/* Shared HOME / IUPAC navigation and sound controls */
.skip{position:fixed;left:12px;top:8px;z-index:1000;transform:translateY(-160%);padding:8px 12px;border-radius:10px;background:var(--surface);color:var(--ink);border:1px solid var(--line)}.skip:focus{transform:none}
.sitebar{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(16px)}
.sitebar__inner{width:min(1440px,calc(100% - 28px));min-height:64px;margin:auto;display:flex;align-items:center;gap:12px}.back{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);text-decoration:none;font-size:1.65rem;line-height:1}.brand{display:flex;align-items:center;gap:9px;min-width:0;color:var(--ink);text-decoration:none;font-weight:800}.brand img{width:34px;height:34px;max-width:34px;max-height:34px;object-fit:contain}.brand__name{letter-spacing:.02em}.brand__sep{color:var(--muted)}.brand__page{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sitebar__spacer{flex:1}.header-actions{display:flex;align-items:center;gap:8px}.header-link{padding:8px 9px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:700;font-size:.88rem}.header-link:hover{background:var(--soft)}.icon-button{min-width:40px;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer;font-weight:750}.icon-button:hover{border-color:var(--accent)}.audio-settings{position:relative}.audio-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:min(390px,calc(100vw - 24px));padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 24px 70px rgba(0,0,0,.24)}.audio-panel[hidden]{display:none}.audio-panel h2{margin:0 0 14px;font-size:1.05rem}.audio-group{padding:13px 0;border-top:1px solid var(--line)}.audio-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;font-weight:800}.audio-row{display:flex;align-items:center;gap:8px;font-size:.9rem}.volume-row{display:grid;grid-template-columns:auto minmax(120px,1fr) 48px;align-items:center;gap:10px;margin-top:10px;font-size:.82rem}.volume-row input{width:100%}.volume-value{text-align:right;color:var(--muted)}.audio-status{margin:8px 0 0;color:var(--muted);font-size:.76rem;line-height:1.45}.preview-button{border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:4px 10px;color:var(--ink);cursor:pointer;font-size:.75rem}.music-credit,.page-credit{color:var(--muted);font-size:.74rem}.music-credit a,.page-credit a{color:inherit}.page-credit{padding:12px 20px 28px;text-align:center}.mech-electron-mode{display:flex;gap:7px;padding-right:3px}.mech-electron-mode[hidden]{display:none}.mech-electron-mode .mech-button.is-active,.mech-electron-mode .mech-button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:800}.mech-arrowhead-shape--half{stroke:var(--arrow);stroke-width:.45}.mech-electron-arrow.is-one-electron .mech-electron-arrow__path{stroke-dasharray:none}
@media(max-width:720px){.sitebar__inner{width:calc(100% - 16px);gap:7px}.back{width:36px;height:36px}.brand{gap:6px}.brand img{width:30px;height:30px;max-width:30px;max-height:30px}.brand__sep,.brand__page{display:none}.header-link{padding:7px 6px;font-size:.79rem}.icon-button{min-width:37px;height:37px;padding:0 8px}.icon-button__label{display:none}.audio-panel{position:fixed;right:10px;top:66px}.mech-electron-mode{grid-column:1/-1;justify-content:center;width:100%;padding:0}.mech-toolbar--minimal{grid-template-columns:repeat(2,minmax(0,1fr))}.page-credit{padding-bottom:88px}}

/* Warren mechanism trainer UX revision: whole-canvas pan, auto-fit centering, unified multiple-bond hit targets. */
.mech-workspace--large{
  cursor:grab;
  touch-action:none;
  overscroll-behavior:contain;
}
.mech-workspace--large.is-panning,
.mech-workspace--large.is-pinching{cursor:grabbing}
.mech-workspace--large[data-viewport-locked="true"]{cursor:default;touch-action:auto}
.mech-workspace-canvas{justify-content:center}
.mech-hit-target{cursor:pointer}
.mech-hit-bond__tap{
  stroke-linecap:round;
  pointer-events:stroke;
}
.mech-hit-bond__visual{
  stroke-width:4.2;
  stroke-linecap:round;
}
.mech-hit-bond:hover .mech-hit-bond__visual,
.mech-hit-bond:focus-visible .mech-hit-bond__visual{opacity:.42}
.mech-hit-target.is-source .mech-hit-bond__visual{opacity:1;stroke-width:5.4}
.mech-hit-target.is-target .mech-hit-bond__visual{opacity:1;stroke-width:5.4}
@media(max-width:680px){
  .mech-workspace-canvas{justify-content:center}
  .mech-workspace--large{touch-action:none}
}


/* UX3: whole-surface pan, native page wheel scroll, and hard-electronic interaction audio. */
.mech-workspace-canvas{width:max-content;min-width:0;box-sizing:border-box}
.mech-workspace--large{cursor:grab;touch-action:none;overflow:hidden;overscroll-behavior:auto}
.mech-workspace--large .mech-hit-target,
.mech-workspace--large .mech-electron-arrow{cursor:pointer}
.mech-workspace--large.is-panning .mech-hit-target,
.mech-workspace--large.is-panning .mech-electron-arrow{cursor:grabbing}
.mech-hit-bond__tap{fill:none;stroke:rgba(0,0,0,.001);stroke-linecap:round;pointer-events:stroke}

/* UX3 desktop wheel policy: normal wheel chains to the page; Ctrl/Cmd+wheel is handled in JS for zoom. */
@media (hover:hover) and (pointer:fine){.mech-workspace--large{overscroll-behavior-y:auto;overscroll-behavior-x:auto}}

/* UX4 multiple-bond hit geometry: stroke widths come from each visible SVG hit line. */