.tsml { --tsml-ink: #172537; --tsml-muted:#65778a; --tsml-line:#d9e2ec; --tsml-brand:#0b6581;
  --tsml-bg:#f6f9fc; margin:2rem 0; max-width:100%; border:1px solid var(--tsml-line);
  border-radius:16px; padding:22px; background:#fff; color:var(--tsml-ink);
  box-sizing:border-box; font:inherit; box-shadow:0 10px 30px rgba(20,45,70,.045) }
.tsml * { box-sizing: border-box }
.tsml-heading {display:flex; justify-content:space-between; gap:18px; align-items:center; margin-bottom:18px}
.tsml h2 {color:var(--tsml-ink); font-size:clamp(1.35rem, 2.7vw, 1.9rem); margin:4px 0 6px; padding:0; line-height:1.2}
.tsml p {margin:0; line-height:1.55}
.tsml-heading p,.tsml-panel header span,.tsml-panel-footer {color:var(--tsml-muted); font-size:.87rem}
.tsml-eyebrow {display:inline-block;font-size:.69rem;letter-spacing:.1em;font-weight:750;color:var(--tsml-brand)}
.tsml-panels {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tsml-panel {min-width:0;overflow:hidden;border:1px solid var(--tsml-line);border-radius:12px;background:#fff}
.tsml-panel header {padding:11px 14px;display:flex;gap:12px;align-items:baseline;justify-content:space-between;background:var(--tsml-bg);border-bottom:1px solid var(--tsml-line)}
.tsml-panel header strong {font-size:.94rem; color:var(--tsml-ink)}
.tsml-panel header span {font-size:.72rem; text-align:right}
.tsml-panel-footer {min-height:39px;padding:11px 13px;border-top:1px solid var(--tsml-line)}
.tsml-composer,.tsml-viewer {width:100%;height:480px;min-width:0;min-height:0}
.tsml-viewer {height:420px}
.tsml-viewer-wrap {height:480px;position:relative;display:flex;align-items:center;background:#fff}
.tsml-viewer-wrap .tsml-viewer {width:100%;height:100%;position:relative}
.tsml-empty {position:absolute;left:14%;right:14%;top:43%;pointer-events:none;text-align:center;font-size:.91rem;color:var(--tsml-muted);line-height:1.5}
.tsml-empty[hidden] {display:none}
.tsml-actions {display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding-top:16px}
.tsml-button {cursor:pointer;appearance:none;border-radius:9px;border:1px solid var(--tsml-line);padding:10px 13px;min-height:40px;
 font:inherit;font-size:.85rem;font-weight:650;white-space:normal;background:#fff;color:var(--tsml-ink);line-height:1.25}
.tsml-button-primary {background:var(--tsml-brand);border-color:var(--tsml-brand);color:white}
.tsml-button-secondary {background:#edf6fa;border-color:#c1dbe8;color:#125770}
.tsml-button-quiet {background:var(--tsml-bg)}
.tsml-button:not(:disabled):hover {filter:brightness(.96)}
.tsml-button:disabled {opacity:.43;cursor:default}
.tsml-button:focus-visible,.tsml summary:focus-visible {outline:3px solid #78a8c3;outline-offset:2px}
.tsml-status {margin:15px 0 0!important;padding:11px 13px;border-radius:8px;border:1px solid #cfdee8;
 background:#f3f8fb;color:#19465c;font-size:.88rem}
.tsml-status[data-kind="error"] {background:#fff3f0;border-color:#edbfb3;color:#953e29}
.tsml-status[data-kind="success"] {background:#edf8f4;border-color:#b5e0d1;color:#17694f}
.tsml-note {border-top:1px solid var(--tsml-line);margin-top:19px;padding-top:13px;color:var(--tsml-muted);font-size:.85rem}
.tsml summary {cursor:pointer;font-weight:650;color:var(--tsml-ink)}
.tsml-note p {margin:9px 0}
/* Avoid the WP theme resizing the sketcher internal widgets. */
.tsml .K-Widget,.tsml .K-Chem-Composer,.tsml .K-Chem-Viewer {font-size:13px}
@media(max-width:860px) {.tsml-panels {grid-template-columns:1fr} .tsml-heading {align-items:flex-start;flex-direction:column}.tsml {padding:12px}.tsml-composer {height:460px}.tsml-viewer-wrap {height:420px}}

/* v0.4 live 3D sync controls and stale-preview guard */
.tsml-livebar {display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:10px 13px;background:#eef7fa;border:1px solid #cfe3ea;border-radius:10px}
.tsml-live-toggle {display:inline-flex;align-items:center;gap:9px;font-size:.91rem;font-weight:700;cursor:pointer;color:var(--tsml-ink)}
.tsml-live-toggle input {accent-color:var(--tsml-brand);width:19px;height:19px;margin:0;cursor:pointer}
.tsml-live-toggle input:disabled {opacity:.5;cursor:not-allowed}
.tsml-live-help {color:var(--tsml-muted);font-size:.77rem}
.tsml-preview-state {position:absolute;z-index:3;left:12px;top:12px;background:#edf3f8;border:1px solid #c8d7e2;border-radius:16px;
  padding:5px 10px;font-size:.72rem;line-height:1.35;font-weight:650;pointer-events:none;color:#375368;max-width:calc(100% - 24px)}
.tsml-preview-state[hidden] {display:none}
.tsml-preview-state[data-kind="success"] {background:#eaf8f0;border-color:#a5ddbf;color:#16664a}
.tsml-preview-state[data-kind="working"] {background:#fff8ea;border-color:#eed8a5;color:#875a12}
.tsml-preview-state[data-kind="warning"] {background:#fff1ee;border-color:#efb9ae;color:#873b2a}

/* v0.7 — file interchange tools */
.tsml-import { margin-top:16px; padding:14px; border:1px solid var(--tsml-line); background:var(--tsml-bg); border-radius:12px; }
.tsml-import label { display:block; font-size:.86rem; margin-bottom:9px; }
.tsml-import label span { color:var(--tsml-muted); font-weight:400; }
.tsml-import-row { display:flex; gap:9px; align-items:stretch; }
.tsml-import-row input[type=text] { min-width:0; flex:1 1 200px; width:100%; color:var(--tsml-ink); border:1px solid #b9cbd9; border-radius:9px; padding:10px 12px; font-size:.90rem; background:#fff; }
.tsml-import-row input[type=text]:focus-visible { outline:3px solid #78a8c3; outline-offset:2px; }
.tsml-export-tools { margin-top:14px; padding:13px 14px 15px; border:1px solid var(--tsml-line); border-radius:12px; }
.tsml-export-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.tsml-export-heading strong { font-size:.9rem; }
.tsml-export-heading span { color:var(--tsml-muted); font-size:.75rem; }
.tsml-actions-compact { padding-top:10px; gap:7px; }
.tsml-actions-compact .tsml-button { min-height:36px; padding:8px 11px; font-size:.8rem; }
.tsml-actions-main { padding-top:15px; }
@media (max-width:550px) { .tsml-import-row { flex-wrap:wrap; } .tsml-import-row input[type=text] { flex-basis:100%; } }

/* v0.8 — highlight exports consistently in both the 2D and 3D toolbars.
   A separate class makes downloads recognisable without coloring input/actions. */
.tsml .tsml-button.tsml-button-download {
  background: #deefff;
  border-color: #9ecbf3;
  color: #164d7c;
}
.tsml .tsml-button.tsml-button-download:not(:disabled):hover {
  background: #cce5fc;
  border-color: #7aafe2;
  filter: none;
}
.tsml .tsml-button.tsml-button-download:disabled {
  background: #deefff;
  border-color: #b4d5ed;
  color: #426a8b;
  opacity: .48;
}

/* v0.9 — transparent/high-resolution PNG preferences. */
.tsml-png-options {display:flex; gap:14px; flex-wrap:wrap; align-items:center; padding:11px 13px; margin-top:9px; background:#f5faff; border:1px solid #d9e9f5; border-radius:9px; font-size:.82rem; color:var(--tsml-ink)}
.tsml-png-resolution,.tsml-png-transparent {display:inline-flex; align-items:center; gap:8px; font-weight:600; margin:0}
.tsml-png-resolution select {font:inherit; color:var(--tsml-ink); background:#fff; border:1px solid #b9cbd9; border-radius:6px; padding:6px 7px; width:auto; max-width:100%}
.tsml-png-transparent input {width:16px; height:16px; accent-color:var(--tsml-brand); margin:0}
.tsml-png-hint {color:var(--tsml-muted); font-weight:400; flex-basis:100%; line-height:1.4}
.tsml-png-options select:focus-visible,.tsml-png-options input:focus-visible {outline:3px solid #78a8c3; outline-offset:2px}
/* Detached from layout but still renderable by WebGL and the Kekule renderer. */
.tsml-offscreen-export {position:fixed!important; left:-50000px!important; top:0!important; overflow:hidden; pointer-events:none!important; opacity:0!important; z-index:-1!important; background:transparent!important}