:root{--bg: #0e1116;--panel: #161b22;--border: #252b34;--text: #d8dde6;--text-dim: #8a93a3;--accent: #79c0ff;--accent-strong: #58a6ff;--hover: #1f2630;--danger: #b04545}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);color-scheme:dark}#app{display:grid;grid-template-areas:"top top" "side canvas";grid-template-rows:56px 1fr;grid-template-columns:240px 1fr;height:100%}#topbar{grid-area:top;display:flex;gap:16px;align-items:center;padding:8px 16px;background:var(--panel);border-bottom:1px solid var(--border)}#random-container{margin-left:auto}.random-btn{background:#0d1117;color:var(--text);border:1px solid var(--border);border-radius:4px;padding:6px 12px;font:inherit;cursor:pointer}.random-btn:hover{border-color:var(--accent-strong);color:var(--accent)}.info-card{position:absolute;left:16px;bottom:16px;max-width:360px;padding:10px 12px;background:#0e1116c7;border:1px solid var(--border);border-radius:6px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--text);font-size:13px;line-height:1.4;pointer-events:auto}.info-card-title{font-size:15px;font-weight:600;color:var(--text);text-transform:capitalize;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.info-card-meta{margin-top:2px;color:var(--text-dim);font-variant-numeric:tabular-nums}.info-card-inchi{margin-top:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--text-dim);cursor:pointer;-webkit-user-select:all;user-select:all;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.info-card-inchi:hover{color:var(--accent)}.info-card-inchi:empty{display:none}.related-strip{position:absolute;right:16px;bottom:16px;max-width:calc(100% - 420px);padding:8px 10px;background:#0e1116c7;border:1px solid var(--border);border-radius:6px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.related-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin-bottom:6px}.related-row{display:flex;gap:6px;overflow-x:auto}.related-thumb{flex:0 0 auto;width:110px;height:110px;padding:4px;background:#fff;border:1px solid var(--border);border-radius:4px;cursor:pointer;overflow:hidden;transition:transform .1s ease,border-color .1s ease}.related-thumb:hover{transform:translateY(-1px);border-color:var(--accent-strong)}.related-thumb img{width:100%;height:100%;object-fit:contain;display:block;transform:scale(1.5);transform-origin:center}#sidebar{grid-area:side;padding:12px;background:var(--panel);border-right:1px solid var(--border);overflow:auto;color:var(--text)}#canvas-container{grid-area:canvas;position:relative;background:var(--bg)}#canvas-container canvas{display:block;width:100%;height:100%}#status{position:absolute;bottom:12px;right:12px;padding:6px 10px;background:#000000bf;color:#fff;border:1px solid var(--border);border-radius:4px;font-size:13px;display:none}#status.visible{display:block}input,select,button{background:#0d1117;color:var(--text);border:1px solid var(--border);border-radius:4px;padding:6px 8px;font:inherit}input:focus,select:focus{outline:none;border-color:var(--accent-strong);box-shadow:0 0 0 2px #58a6ff40}select{cursor:pointer}.sidebar-heading{margin:12px 0 6px;font-size:13px;font-weight:600;text-transform:uppercase;color:var(--text-dim);letter-spacing:.05em}.sidebar-heading-collapsible{display:flex;align-items:center;gap:6px;width:100%;background:none;border:none;padding:4px 0;cursor:pointer;text-align:left}.sidebar-heading-collapsible:hover{color:var(--text)}.sidebar-caret{display:inline-block;width:10px;font-size:10px;color:var(--text-dim)}.sidebar-list{list-style:none;padding:0;margin:0}.sidebar-item{display:flex;align-items:center;justify-content:space-between;padding:4px 0}.sidebar-item-name{background:none;border:none;cursor:pointer;font:inherit;padding:0;color:var(--accent);text-align:left;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-item-name:hover{color:var(--accent-strong)}.sidebar-item-star{background:none;border:none;cursor:pointer;font-size:14px;padding:0 0 0 6px;color:var(--text-dim)}.sidebar-item-star.is-fav{color:#f1c40f}.groups-panel{margin-bottom:8px}.groups-panel-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.groups-panel-header .sidebar-heading{margin:12px 0 6px}.groups-panel-clear{background:none;border:1px solid var(--border);color:var(--text-dim);font-size:11px;padding:2px 6px;border-radius:3px;cursor:pointer}.groups-panel-clear:hover{color:var(--text);border-color:var(--accent-strong)}.groups-panel-empty{font-size:12px;color:var(--text-dim);padding:4px 0 8px}.groups-list{padding-bottom:8px}.groups-item{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:4px;cursor:pointer}.groups-item:hover{background:var(--hover)}.groups-item.is-focused{background:var(--hover);outline:1px solid var(--accent-strong)}.groups-swatch{width:12px;height:12px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor;color:currentColor}.groups-item-name{background:none;border:none;font:inherit;color:var(--text);cursor:pointer;padding:0;flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.groups-count{font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums;min-width:18px;text-align:right}