:root{--ink:#203A43;--mut:#627981;--teal:#176B77;--line:#DFE7EA;--soft:#EDF4F5}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:white;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;color:var(--ink);font-size:12px}button,select,input{font:inherit}button{border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer;border-radius:4px;min-width:28px;height:29px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;touch-action:manipulation}button:hover{background:#E5EEF1}button.active{background:#DCEFF1;border-color:#A8CFD4;color:#115965}button:disabled{opacity:.32;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible,#canvas:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}button[hidden],input[hidden],[hidden]{display:none!important}.editor-shell{height:100%;display:flex;flex-direction:column}.toolbar{display:flex;flex-wrap:wrap;gap:4px 7px;padding:7px 9px;background:#FAFCFC;border-bottom:1px solid var(--line);min-height:44px;align-items:center}.tool-group{display:flex;align-items:center;gap:2px}.tool-group+.tool-group{border-left:1px solid var(--line);padding-left:7px}.toolbar button{font-size:19px;line-height:1}.toolbar .word-tool{font-size:11px;padding:0 7px}.ring-tools select{font-size:11px;max-width:77px;height:28px;border:0;background:none;color:var(--ink);border-radius:4px}.edit-tools{margin-left:auto}.canvas-layout{display:flex;flex:1;min-height:0}.element-rail{width:39px;flex:none;border-right:1px solid var(--line);background:#FAFCFC;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:1px;overflow-y:auto;scrollbar-width:thin}.element-rail #elements{display:flex;flex-direction:column;gap:1px}.element-rail button{height:26px;min-height:26px;min-width:28px;font-size:12px;font-weight:600}.element-rail input{width:29px;height:26px;padding:2px;text-align:center;border:1px solid var(--line);border-radius:3px}.rail-divider{height:1px;width:22px;background:var(--line);margin:5px 0}.drawing-area{position:relative;flex:1;min-width:0;overflow:hidden}#canvas{width:100%;height:100%;display:block;touch-action:none;user-select:none;cursor:crosshair}#canvas[data-tool=select]{cursor:default}#canvas[data-tool=erase]{cursor:not-allowed}.bond-line{stroke:#29434C;stroke-width:1.8;stroke-linecap:round;pointer-events:none}.bond-hit{stroke:transparent;stroke-width:15;fill:none;pointer-events:stroke;cursor:pointer}.atom-hit{fill:transparent;stroke:none;pointer-events:all}.atom-text{font:500 16px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round;pointer-events:none}.atom-charge{font-size:10px;stroke-width:3px}.atom-selected{fill:#E0F0F3;stroke:#79ACB6;stroke-width:1;pointer-events:none}.atom-error{fill:#FCE5E1;stroke:#B8493C;stroke-width:1.5;pointer-events:none}.atom-carbon{fill:#37555F;stroke:white;stroke-width:1.5;pointer-events:none}#empty-hint{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;padding:35px;text-align:center;color:var(--mut)}#empty-hint b{font-size:14px;font-weight:500;color:#43616C}#empty-hint span{font-size:11px;max-width:32em;line-height:1.8}.editor-status{display:flex;gap:9px;align-items:center;padding:3px 10px;min-height:28px;border-top:1px solid var(--line);color:var(--mut);font-size:10px;background:#FCFDFD}.editor-status #editor-hint{margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.editor-status #graph-count{white-space:nowrap}.editor-status button{font-size:15px;width:20px;height:20px;min-width:20px;padding:0}.editor-status #zoom-level{font-variant-numeric:tabular-nums;min-width:34px;text-align:center}#help-panel{position:absolute;top:10px;right:10px;max-width:310px;padding:16px;background:#fff;border:1px solid #C7D9DF;border-radius:7px;box-shadow:0 8px 28px #193C4A14;font-size:11px;color:#49636E;line-height:1.9}#help-panel b{display:block;color:var(--ink);margin-bottom:6px}#help-panel p{margin:4px 0}#selection-box{fill:#2B83991A;stroke:#2B8399;stroke-width:1;stroke-dasharray:4 3}.preview-bond{stroke:#288397;stroke-width:2;stroke-dasharray:5 3;pointer-events:none}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:500px){.toolbar{padding:5px;gap:3px}.toolbar button{min-width:25px;padding:0 4px}.tool-group+.tool-group{padding-left:4px}.edit-tools{margin-left:0}.toolbar .word-tool{font-size:10px}.element-rail{width:34px}.editor-status #editor-hint{max-width:45%}.editor-status{gap:5px}.ring-tools select{max-width:65px}#empty-hint{padding:25px 18px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.atom-text{font-size:var(--atom-font,16px)}.atom-charge{font-size:10px}.atom-index{font:9px ui-monospace,monospace;fill:#687C84;paint-order:stroke;stroke:#fff;stroke-width:3px;pointer-events:none}.hover-atom,.snap-target{fill:#2C829915;stroke:#37889B;stroke-width:1.4;pointer-events:none}.hover-bond{stroke:#37889B;stroke-width:8;opacity:.2;pointer-events:none}.preview-endpoint{fill:#37889B;stroke:#fff;stroke-width:1;pointer-events:none}.ring-preview{stroke:#37889B;stroke-width:1.6;stroke-dasharray:4 3;pointer-events:none}.editor-status select{font-size:10px;color:var(--mut);background:transparent;border:0;max-width:76px;padding:2px 0}.toolbar svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.toolbar{background:#F8FAFA}.toolbar button.active{background:#E5EFF0;border-color:#B8D0D5}.element-rail{background:#FAFBFB}.editor-status{background:#FAFBFB}.editor-status #atom-numbers{font-size:11px}.editor-status #atom-numbers[aria-pressed=true]{background:#E5EFF0;color:#176B77}@media(max-width:500px){.editor-status #graph-count{display:none}.editor-status #editor-hint{max-width:none;min-width:0}}

#help-panel{max-height:calc(100% - 20px);overflow-y:auto}

.view-tools button{min-width:42px;gap:3px;padding:0 5px}
.view-tools .view-label{font-size:9px;line-height:1;font-weight:600;letter-spacing:0}
.view-tools button:disabled{opacity:1;cursor:default}
.view-tools button:disabled:hover{background:#E5EFF0}
/* The toolbar, element rail and status remain in place for every view combination. */
.canvas-layout{display:grid;grid-template-columns:39px minmax(0,1fr)}
body[data-view=split] .canvas-layout{grid-template-columns:39px minmax(0,1fr) minmax(0,1fr)}
body[data-view='3d'] .drawing-area{visibility:hidden;pointer-events:none}
.element-rail{width:100%;height:100%;grid-column:1;grid-row:1 / -1}
.drawing-area{grid-column:2;grid-row:1}
@media(max-width:700px){
 body[data-view=split] .canvas-layout{grid-template-columns:39px minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:500px){
 .canvas-layout,body[data-view=split] .canvas-layout{grid-template-columns:34px minmax(0,1fr)}
}
/* Canvas tracks animate; persistent drawing tools remain outside these tracks. */
.canvas-layout{grid-template-columns:39px minmax(0,1fr) minmax(0,0fr);grid-template-rows:minmax(0,1fr);transition:grid-template-columns 220ms cubic-bezier(.2,.7,.2,1),grid-template-rows 220ms cubic-bezier(.2,.7,.2,1)}
body[data-view=split] .canvas-layout{grid-template-columns:39px minmax(0,1fr) minmax(0,1fr)}
body[data-view='3d'] .canvas-layout{grid-template-columns:39px minmax(0,0fr) minmax(0,1fr)}
.drawing-area{opacity:1;visibility:visible;transition:opacity 180ms ease,visibility 0s}
body[data-view='3d'] .drawing-area{opacity:0;visibility:hidden;transition:opacity 180ms ease,visibility 0s 220ms}
@media(max-width:700px){
 .canvas-layout,body[data-view=split] .canvas-layout,body[data-view='3d'] .canvas-layout{grid-template-columns:39px minmax(0,1fr)}
 .canvas-layout{grid-template-rows:minmax(0,1fr) minmax(0,0fr)}
 body[data-view=split] .canvas-layout{grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
 body[data-view='3d'] .canvas-layout{grid-template-rows:minmax(0,0fr) minmax(0,1fr)}
}
@media(max-width:500px){.canvas-layout,body[data-view=split] .canvas-layout,body[data-view='3d'] .canvas-layout{grid-template-columns:34px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.canvas-layout,.drawing-area,body[data-view='3d'] .drawing-area{transition:none}}

/* Track proportions are user adjustable; view toggles still animate. */
@media(min-width:701px){body[data-view=split] .canvas-layout{grid-template-columns:39px minmax(0,var(--split-horizontal-first,.5fr)) minmax(0,var(--split-horizontal-second,.5fr))}}
@media(max-width:700px){body[data-view=split] .canvas-layout{grid-template-rows:minmax(0,var(--split-vertical-first,.5fr)) minmax(0,var(--split-vertical-second,.5fr))}}
body.canvas-resizing .canvas-layout{transition:none}

.toolbar .tool-group{gap:4px}
.toolbar .tool-group+.tool-group{padding-left:10px}
.toolbar button[hidden]{display:none}

.toolbar .tool-label{font-size:12px;font-family:inherit;white-space:nowrap}.toolbar :is(#tidy,#help){gap:4px;width:auto;padding:0 6px}
.drawing-feedback{position:absolute;z-index:3;left:10px;top:10px;max-width:min(280px,calc(100% - 20px));max-height:calc(100% - 65px);overflow:auto;padding:7px 10px;border:1px solid #D8E2E5;border-radius:5px;background:rgb(255 255 255 / 96%);color:#52676F;font-size:11px;line-height:1.6;pointer-events:none;box-shadow:0 2px 8px #203A4310}
.drawing-feedback.warning{border-color:#DBB3AA;background:#FFF7F4;color:#943B30}
.fragment-tools select{height:28px;max-width:108px;padding:0 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:inherit;font-size:11px;cursor:pointer}
.fragment-tools select:has(option:checked:not([value=""])){border-color:#AFC5DD;background:#EBF1F8;color:#24568A}
.fragment-tools #copy-fragment{gap:3px}
.fragment-tools #replace-fragment{min-width:50px}
.fragment-preview{opacity:.78;pointer-events:none}
.replacement-source{opacity:.22}
.replacement-source .atom-text,.replacement-source .atom-index{visibility:hidden}
.merge-conflict{fill:#FCE5E180;stroke:#B8493C;stroke-width:1.5;pointer-events:none}
.rotation-guide{stroke:#799ABD;stroke-width:1;stroke-dasharray:3 4;pointer-events:none}
.rotation-pivot{fill:#fff;stroke:#24568A;stroke-width:1.5;pointer-events:none}
.rotation-handle{cursor:grab;color:#24568A}
.rotation-handle circle{fill:#F5F9FD;stroke:currentColor;stroke-width:1.4}
.rotation-handle path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.rotation-handle:hover circle{fill:#E4EEF8}