:root{color-scheme:light;font:16px/1.4 system-ui;color:#1f2933;background:transparent}
*{box-sizing:border-box}body{margin:0}
main{padding:12px;border:1px solid #d7d9d7;border-radius:12px;background:#f4ecd9}
h2{font-size:1.1rem;margin:0 0 4px}p{margin:4px 0 8px;font-size:.9rem}
#units{display:block;max-width:340px;margin:10px auto 0;background:#fcfcfb;border:1px solid #d7d9d7;border-radius:9px}
#units svg{display:block;width:100%;height:auto;overflow:visible}
html[data-comparison=inversion] #units{max-width:500px}
.unit{fill:transparent;stroke:transparent;stroke-width:2;cursor:pointer}
.unit[aria-pressed=true]{stroke:#21465d;fill:#21465d;fill-opacity:.05}
.unit:focus{outline:none}
.unit:focus-visible:not([data-pointer-focus]){stroke:#527f94;stroke-dasharray:3 3;stroke-width:1}
.unit-label{font:650 15px system-ui;fill:#1f2933;stroke:none;pointer-events:none}
html[data-comparison=inversion] .unit-label{font-size:14px}
html[data-comparison=compound] .unit-label{font-size:13px}
.compound-surface{display:grid;grid-template-columns:44px minmax(0,340px);gap:8px;max-width:392px;margin:10px auto 0;align-items:center}
.compound-surface #units{width:100%;margin:0}
.compound-controls{display:flex;flex-direction:column;gap:6px}
.compound-controls button{width:44px;min-height:44px;font:24px system-ui;border:1px solid #b7c3c5;border-radius:8px;background:#fcfcfb;color:inherit;padding:0}
.compound-ghost{fill:#52616b;color:#52616b;opacity:.3;pointer-events:none}
.compound-ghost-option{display:flex;align-items:center;gap:7px;min-height:44px;max-width:392px;margin:4px auto 0;font-size:.85rem;cursor:pointer}
.compound-ghost-option input{width:18px;height:18px;accent-color:#2d7375}
.unit-notes{font:14px system-ui;fill:#52616b;stroke:none;pointer-events:none}
.mirror-arrow{stroke-width:1.4;stroke-linecap:round;pointer-events:none;opacity:1}
.mirror-arrow[data-note=anchor]{stroke:#246b85}.mirror-arrow[data-note=partner]{stroke:#b65d24}
.mirror-note-anchor{fill:#246b85}.mirror-note-partner{fill:#b65d24}
.mirror-choice{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.85rem;margin:10px 0}
.mirror-choice select{font:inherit;min-height:44px;max-width:100%;border:1px solid #b7c3c5;border-radius:8px;background:#fcfcfb;color:inherit;padding:7px 10px}
.mirror-choice select:focus-visible{outline:3px solid #7ab2c9;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
button:focus-visible,summary:focus-visible{outline:3px solid #7ab2c9;outline-offset:3px}
.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
#stop{font:inherit;min-height:44px;padding:7px 12px;border:1px solid #b7c3c5;border-radius:8px;background:white;color:inherit}
button:disabled{opacity:.5}details{font-size:.85rem;max-width:100%}
summary{cursor:pointer;min-height:44px;display:flex;align-items:center}details[open]{flex-basis:100%}
#status{font-size:.85rem;min-height:1.4em}#status:empty{display:none}
@media(max-width:600px){main{padding:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}.mirror-arrow{transition:none}}