*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}#app{width:100vw;height:100vh;display:flex;overflow:hidden}#jsme-panel{background:#fafafa;border-right:1px solid #ddd;flex-direction:column;flex-shrink:0;width:33.33%;min-width:280px;padding:10px;display:flex;overflow:hidden}#brand-bar{color:#222;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:6px 8px;padding-bottom:12px;font-size:16px;font-weight:700;display:flex}#brand-bar svg:first-child{width:28px;height:28px}.brand-title{font-size:17px}.brand-version{color:#999;margin-right:auto;font-size:11px;font-weight:400}.brand-btn{color:#555;cursor:pointer;background:0 0;border:1px solid #bbb;border-radius:4px;padding:2px 8px;font-size:11px;transition:all .12s}.brand-btn:hover{color:#48f;border-color:#48f}.brand-select{color:#555;cursor:pointer;background:0 0;border:1px solid #bbb;border-radius:4px;max-width:100px;padding:2px 4px;font-family:inherit;font-size:11px}.brand-select:hover{color:#48f;border-color:#48f}.cs-row{flex-wrap:wrap;gap:3px;margin-top:4px;display:flex}.cs-btn{color:#999;cursor:pointer;background:0 0;border:1px solid #ffffff1f;border-radius:3px;flex:none;padding:3px 6px;font-size:10px;transition:all .1s}.cs-btn:hover{color:#ddd;border-color:#ffffff4d}.cs-btn.active{color:#fff;background:#48f;border-color:#48f}.cs-custom{flex-direction:column;gap:4px;margin-top:6px;display:flex}.cs-custom.hidden{display:none}.cs-channel{align-items:center;gap:6px;height:24px;display:flex}.cs-label{color:#aaa;text-align:right;flex-shrink:0;width:14px;font-size:9px;font-weight:600}.cs-channel input[type=color]{cursor:pointer;background:0 0;border:none;border-radius:3px;flex:1;min-width:0;height:22px;padding:0}.cs-channel input[type=color]::-webkit-color-swatch-wrapper{padding:0}.cs-channel input[type=color]::-webkit-color-swatch{border:1px solid #ffffff26;border-radius:3px}.cs-channel input[type=color]::-moz-color-swatch{border:1px solid #ffffff26;border-radius:3px}.brand-link{color:#666;transition:color .12s;display:flex}.brand-link:hover{color:#222}.brand-copyright{color:#aaa;width:100%;font-size:10px;font-weight:400}#jsme_container{background:#fff;border:1px solid #e0e0e0;border-radius:4px;flex:1;overflow:hidden}#render-btn{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:6px;flex-shrink:0;margin-top:10px;padding:10px 16px;font-size:14px;font-weight:600;transition:background .15s}#render-btn:hover{background:#1d4ed8}#render-btn:active{background:#1e40af}#render-btn:disabled{cursor:default;background:#93c5fd}#splitter{cursor:col-resize;z-index:5;background:0 0;flex-shrink:0;width:5px;position:relative}#splitter:hover,#splitter.active{background:#48f}#canvas-container{flex:1;min-width:200px;position:relative;overflow:hidden}#examples-bar{z-index:10;position:absolute;top:12px;left:12px}#examples-bar select{color:#ccc;cursor:pointer;backdrop-filter:blur(6px);appearance:none;background:#1e1e23e0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") right 8px center no-repeat;border:1px solid #ffffff1a;border-radius:6px;min-width:110px;padding:5px 22px 5px 10px;font-family:inherit;font-size:12px}#examples-bar select:hover{border-color:#ffffff40}#examples-bar select option{color:#ccc;background:#222}#controls-panel{color:#ddd;user-select:none;backdrop-filter:blur(6px);z-index:10;background:#1e1e23e0;border-radius:8px;width:180px;padding:12px;font-size:12px;position:absolute;top:12px;right:12px}.ctrl-section{border-bottom:1px solid #ffffff14;margin-bottom:10px;padding-bottom:10px}.ctrl-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.ctrl-label{color:#bbb;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:10px;font-weight:600;display:block}.ctrl-toggle{cursor:pointer;align-items:center;gap:8px;padding:3px 0;display:flex}.ctrl-toggle input[type=checkbox]{accent-color:#48f}.ctrl-slider{flex-direction:column;gap:2px;padding:3px 0;display:flex}.ctrl-slider span{color:#ccc;font-size:11px}.ctrl-slider input[type=range]{accent-color:#48f;width:100%;height:4px}.preset-row{gap:4px;margin-top:4px;display:flex}.preset-btn{color:#bbb;cursor:pointer;background:0 0;border:1px solid #ffffff26;border-radius:4px;flex:1;padding:4px 0;font-size:11px;transition:all .12s}.preset-btn:hover{color:#fff;border-color:#ffffff59}.preset-btn.active{color:#fff;background:#48f;border-color:#48f}.bg-row{align-items:center;gap:4px;margin-top:4px;display:flex}.bg-btn{cursor:pointer;border:2px solid #0000;border-radius:4px;width:24px;height:24px;transition:border-color .12s}.bg-btn:hover{border-color:#fff6}.bg-btn.active{border-color:#48f}#ctrl-bg-custom{cursor:pointer;background:0 0;border:none;border-radius:4px;width:24px;height:24px;padding:0}#ctrl-bg-custom::-webkit-color-swatch-wrapper{padding:0}#ctrl-bg-custom::-webkit-color-swatch{border:2px solid #ffffff26;border-radius:4px}.export-row{align-items:center;gap:8px;margin-top:4px;display:flex}.export-btn{color:#bbb;cursor:pointer;background:0 0;border:1px solid #ffffff26;border-radius:4px;flex:1;padding:6px 0;font-size:11px;font-weight:600;transition:all .12s}.export-btn:hover{color:#fff;background:#48f;border-color:#48f}.export-note{color:#666;font-size:10px}#info-popup{color:#ccc;z-index:10;backdrop-filter:blur(8px);background:#16161cf0;border:1px solid #ffffff14;border-radius:10px;min-width:200px;max-width:280px;padding:14px 18px;font-size:12px;line-height:1.6;transition:opacity .2s,transform .2s;position:absolute;bottom:12px;right:12px}#info-popup.hidden{opacity:0;pointer-events:none;transform:translateY(8px)}#info-close{color:#666;cursor:pointer;background:0 0;border:none;padding:0;font-size:18px;line-height:1;position:absolute;top:6px;right:10px}#info-close:hover{color:#fff}#info-source{text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px;font-size:10px;font-weight:700}#info-source.pubchem{color:#48f}#info-source.fallback{color:#f84}#info-name{color:#eee;margin-bottom:2px;font-size:15px;font-weight:600}#info-formula{color:#ddd;font-size:13px}#info-weight{color:#888;font-size:11px}#info-cid{color:#666;margin-top:1px;font-size:10px}#info-link{color:#48f;margin-top:6px;font-size:11px;text-decoration:none;display:inline-block}#info-link:hover{text-decoration:underline}#cite-dialog{z-index:100;background:#00000073;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:fixed;inset:0}#cite-dialog.hidden{opacity:0;pointer-events:none}#cite-content{background:#fff;border-radius:10px;max-width:420px;padding:24px 28px;position:relative;box-shadow:0 8px 30px #00000040}#cite-content h3{color:#222;margin-bottom:10px;font-size:15px}#cite-content p{color:#555;margin-bottom:10px;font-size:13px;line-height:1.5}#cite-text{color:#333;background:#f5f5f5;border-radius:6px;margin-bottom:12px;padding:12px;font-size:12px;line-height:1.6;display:block}#cite-copy{margin-left:auto;display:block}#cite-close{color:#888;cursor:pointer;background:0 0;border:none;font-size:20px;position:absolute;top:8px;right:12px}#cite-close:hover{color:#333}#tooltip{color:#ddd;white-space:nowrap;pointer-events:none;z-index:50;backdrop-filter:blur(4px);background:#141419e6;border:1px solid #ffffff1a;border-radius:5px;padding:4px 9px;font-size:12px;transition:opacity .1s;position:fixed}#tooltip.hidden{opacity:0}