.sketch [data-element=O],.dots-menu [data-element=O]{--element:#c0261b}.sketch [data-element=N],.dots-menu [data-element=N]{--element:#1f4fbf}.sketch [data-element=S],.dots-menu [data-element=S]{--element:#7d6608}.sketch [data-element=Cl],.dots-menu [data-element=Cl],.sketch [data-element=F],.dots-menu [data-element=F]{--element:#157a15}.sketch [data-element=Br],.dots-menu [data-element=Br]{--element:#8b2c1c}.sketch [data-element=I],.dots-menu [data-element=I]{--element:#6a1b9a}.sketch [data-element=P],.dots-menu [data-element=P]{--element:#a14c00}.sketch .lattice circle{fill:#bdb5a6}.sketch .bonds line{stroke:var(--ink);stroke-width:.075px;stroke-linecap:round}.sketch .bonds .hash line{stroke-width:.05px}.sketch .bonds .wedge{fill:var(--ink)}.sketch .bonds .selected line{stroke:var(--accent)}.sketch .bonds .selected .wedge{fill:var(--accent)}.sketch .bond-selection,.sketch .bond-hover{stroke-width:.38px;stroke-linecap:round}.sketch .bond-selection{stroke:#b9dcd7}.sketch .bond-hover{stroke:var(--accent-soft)}.sketch .atom-dot{fill:var(--ink)}.sketch .atom-label text{font-family:var(--font-sans);dominant-baseline:central;paint-order:stroke;stroke:var(--surface);stroke-width:.14px;stroke-linejoin:round;fill:var(--element,var(--ink));font-size:.5px;font-weight:600}.sketch .atom-label .sub{font-size:.36px}.sketch .atom-label .charge{font-size:.38px}.sketch .reachable circle{fill:none;stroke:var(--accent);stroke-width:.05px}.sketch .hover-dot{fill:var(--accent-soft);stroke:var(--accent);stroke-width:.04px}.sketch .rubber-band{stroke:var(--accent);stroke-width:.06px;stroke-dasharray:.12 .1;stroke-linecap:round}.sketch .ring-preview{fill:#0b6e6914;stroke:var(--accent);stroke-width:.06px;stroke-dasharray:.15 .1}.sketch .ring-preview.invalid{fill:#a12a1f0f;stroke:var(--bad)}.sketch .highlights circle{fill:var(--bad-soft);stroke:var(--bad);stroke-width:.05px}.sketch .too-many{fill:none;stroke:var(--bad);stroke-width:.06px;stroke-dasharray:.1 .07}.sketch .selection{fill:var(--accent-soft);stroke:var(--accent);stroke-width:.05px}.drawing-guide{border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:var(--radius);background:var(--surface);padding:.6rem 1.1rem 1.1rem;scroll-margin-top:1rem;container-type:inline-size}.drawing-guide summary{cursor:pointer;align-items:center;gap:.5rem;min-height:44px;display:flex}.drawing-guide summary h2{margin:0;font-size:1.35rem;display:inline}.drawing-guide summary:focus{outline:none}.drawing-guide summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}.guide-intro{color:var(--ink-2);margin:.2rem 0 1rem}.guide-steps{counter-reset:guide-step;margin:0;padding:0;list-style:none}.guide-step{border-top:1px solid var(--line);counter-increment:guide-step;gap:.6rem 1.25rem;padding:1rem 0;display:grid}.guide-text h3{font-family:var(--font-sans);align-items:center;gap:.5rem;margin:0 0 .3rem;font-size:1.05rem;display:flex}.guide-text h3:before,.guide-fold h3:before{content:counter(guide-step);background:var(--accent);color:#fff;border-radius:50%;flex:none;place-items:center;width:1.6rem;height:1.6rem;font-size:.9rem;display:inline-grid}.guide-text p{color:var(--ink-2);margin:0;font-size:.95rem;line-height:1.5}.guide-frames{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:1.1rem;display:grid}.guide-frames figure{margin:0}.guide-pic{position:relative}.guide-frames:not(.is-alternatives) figure+figure .guide-pic:before{content:"";border-top:2px solid var(--ink-2);border-right:2px solid var(--ink-2);width:.5rem;height:.5rem;position:absolute;top:50%;left:-.85rem;transform:translate(-25%,-50%)rotate(45deg)}.guide-picture{aspect-ratio:46/30;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);width:100%;height:auto;display:block}.guide-closeup{background:var(--paper)}.guide-frames figcaption{color:var(--ink-2);text-align:center;margin-top:.3rem;font-size:.85rem;line-height:1.35}.guide-name{color:var(--ink);white-space:nowrap;font-weight:700}.guide-picture .finger .tip{fill:#0b6e694d;stroke:var(--accent);stroke-width:.04px}.guide-picture .finger-tap .tip{fill:#0b6e6961}.guide-picture .finger.is-open .tip{fill:#0b6e691a;stroke-width:.05px}.guide-picture .finger .ripple{fill:none;stroke:var(--accent);stroke-width:.035px;opacity:.55}@media (prefers-reduced-motion:no-preference){.guide-picture .finger .ripple{transform-box:fill-box;transform-origin:50%;animation:1.8s ease-out infinite guide-ripple}}@keyframes guide-ripple{0%{opacity:.8;transform:scale(.6)}70%,to{opacity:0;transform:scale(1.15)}}.guide-closeup .menu-panel,.guide-closeup .menu-button rect{fill:var(--surface);stroke:var(--line-strong);stroke-width:.025px}.guide-closeup .menu-button.is-chosen rect{fill:var(--accent-soft);stroke:var(--accent);stroke-width:.045px}.guide-closeup .menu-button text{font-family:var(--font-sans);dominant-baseline:central;text-anchor:middle;fill:var(--ink);font-size:.27px;font-weight:600}.guide-closeup .menu-button text.element{fill:var(--element,var(--ink));font-size:.4px;font-weight:700}.guide-closeup .menu-button.is-danger text{fill:var(--bad);font-size:.32px}.guide-closeup .icon{stroke:var(--ink);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;overflow:visible}.guide-closeup .icon .fill,.guide-closeup .icon polygon.fill{fill:var(--ink);stroke:none}.guide-closeup .menu-button.is-chosen .icon{stroke:var(--accent-strong)}.guide-closeup .menu-button.is-chosen .icon .fill{fill:var(--accent-strong)}.guide-list{margin:.4rem 0 0;padding-left:1.3rem}.guide-list li{margin-bottom:.4rem}.guide-footer{border-top:1px solid var(--line);margin:.4rem 0 0;padding-top:.9rem;font-size:.95rem}.drawing-guide.is-folded{padding:.8rem 1rem .9rem}.drawing-guide.is-folded>h2{margin:0 0 .3rem;font-size:1.25rem}.is-folded .guide-step{padding:0;display:block}.guide-fold summary{cursor:pointer;align-items:center;gap:.5rem;min-height:44px;padding:.3rem 0;scroll-margin-top:3.5rem;list-style:none;display:flex}.guide-fold summary::-webkit-details-marker{display:none}.guide-fold summary:after{content:"";border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);flex:none;width:.45rem;height:.45rem;margin:0 .35rem .15rem auto;transform:rotate(-45deg)}.guide-fold[open] summary:after{margin-bottom:.3rem;transform:rotate(45deg)}@media (hover:hover){.guide-fold summary:hover h3{color:var(--accent-strong)}}.guide-fold summary:focus{outline:none}.guide-fold summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}.guide-fold h3{font-family:var(--font-sans);align-items:center;gap:.5rem;margin:0;font-size:1rem;line-height:1.3;display:flex}.guide-fold-body{padding:.1rem 0 1rem}.guide-fold-text{color:var(--ink-2);margin:0 0 .8rem;font-size:.95rem;line-height:1.5}.is-folded .guide-footer{color:var(--ink-2);font-size:.9rem}@container (width>=40rem){.guide-step{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:center}.guide-fold-body{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:center;gap:.6rem 1.25rem;display:grid}.guide-fold-text{margin:0}}@container (width<=39.99rem){.is-folded .guide-frames{grid-template-columns:minmax(0,1fr);gap:.9rem}.is-folded .guide-frames figure{grid-template-columns:minmax(0,11fr) minmax(0,9fr);align-items:center;gap:.75rem;display:grid}.is-folded .guide-frames figcaption{text-align:left;margin:0;font-size:.85rem}.is-folded .guide-frames:not(.is-alternatives) figure+figure .guide-pic:before{top:-.45rem;left:50%;transform:translate(-50%,-50%)rotate(135deg)}}@media (width<=600px){.drawing-guide{padding:.5rem .8rem .9rem}.guide-frames{gap:.8rem}.guide-frames figure+figure .guide-pic:before{left:-.65rem}.guide-frames figcaption{font-size:.78rem}}.dot-editor{flex-direction:column;height:100%;display:flex;container:dot-editor/inline-size}.dots-toolbar{border-bottom:1px solid var(--line);align-items:center;gap:.4rem;padding:.45rem .55rem;display:flex}.dots-toolbar .tool{border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);min-height:40px;color:var(--ink);font:inherit;cursor:pointer;align-items:center;gap:.35rem;padding:.3rem .75rem;font-size:.95rem;display:inline-flex}.dots-toolbar .tool:hover:not(:disabled){border-color:var(--accent)}.dots-toolbar .tool[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong);font-weight:700}.dots-toolbar .tool:disabled{opacity:.45;cursor:default}.tool-gap{flex:1}.dot-editor .icon{stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:20px;height:20px}.dot-editor .icon .fill{fill:currentColor;stroke:none}.dots-status{border-bottom:1px solid var(--line);min-height:calc(2.8em + .7rem);color:var(--ink-2);margin:0;padding:.35rem .8rem;font-size:.92rem;line-height:1.4}.dots-status.is-notice{background:var(--warn-soft);color:var(--warn)}.dots-stage{flex:1;min-height:0;position:relative}.dots-canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:crosshair;width:100%;height:100%;display:block;position:absolute;inset:0}.dots-canvas:focus{outline:none}.dots-canvas:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}.dots-canvas.over-bond{cursor:pointer}.dots-empty{border-radius:var(--radius-sm);color:var(--ink-2);text-align:center;pointer-events:none;background:#ffffffe0;margin:0;padding:.4rem .9rem;font-size:.95rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.dots-empty span{margin-top:.2rem;font-size:.85rem;display:block}.dots-menu{z-index:10;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);width:min(16.5rem,100% - 12px);box-shadow:var(--shadow);flex-direction:column;gap:.35rem;padding:.5rem;display:flex;position:absolute}.dots-menu button{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);min-height:40px;color:var(--element,var(--ink));font:inherit;cursor:pointer;justify-content:center;align-items:center;gap:.25rem;padding:.2rem .3rem;font-weight:700;display:inline-flex}.dots-menu button:hover{border-color:var(--accent)}.dots-menu button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent)}.menu-grid{grid-template-columns:repeat(5,1fr);gap:.3rem;display:grid}.menu-grid.bonds3{grid-template-columns:repeat(3,1fr)}.menu-grid.bonds3 button{flex-direction:column;gap:0;font-size:.8rem;font-weight:600}.menu-row{align-items:center;gap:.3rem;display:flex}.menu-row button{flex:1}.menu-label{color:var(--ink-2);margin-right:.15rem;font-size:.85rem}.dots-menu .menu-delete{color:var(--bad);font-weight:600}@container dot-editor (width<=689px){.dots-toolbar{gap:.25rem;padding:.35rem}.dots-toolbar .tool{flex-direction:column;flex:1 1 0;gap:.05rem;min-width:0;padding:.25rem .2rem;font-size:.75rem}.tool-gap{display:none}}@media (width<=560px){.dots-toolbar{gap:.25rem;padding:.35rem}.dots-toolbar .tool{flex-direction:column;flex:1 1 0;gap:.05rem;min-width:0;padding:.25rem .2rem;font-size:.75rem}.tool-gap{display:none}.dots-status{font-size:.85rem}}