:root{--bg: #0b0e14;--panel: #141926;--panel2: #1b2234;--border: #262f45;--text: #e6ebf5;--muted: #8b96ad;--accent: #4c8dff;--accent2: #7c5cff;--canvas-bg: #11141d;--grid-line: rgba(255, 255, 255, .09);--axis-line: rgba(255, 255, 255, .55);--overlay-scrim: rgba(5, 7, 12, .7);--modal-bg: #0e1219;--pre-bg: #0a0d13;--readout-bg: rgba(10, 13, 20, .82);--code-text: #ffd9a0;--code-text2: #c8e6c9;--pre-text: #cdd6e4;--issue: #ffb4a2;--btn-hover-filter: brightness(1.1);--shadow: rgba(0, 0, 0, .5)}html[data-theme=light]{--bg: #eef1f6;--panel: #ffffff;--panel2: #f4f6fb;--border: #d6dbe6;--text: #1c2333;--muted: #5b667c;--accent: #2f6fe0;--accent2: #7c3aed;--canvas-bg: #eef2f7;--grid-line: rgba(20, 30, 60, .1);--axis-line: rgba(20, 30, 60, .6);--overlay-scrim: rgba(30, 35, 48, .35);--modal-bg: #ffffff;--pre-bg: #f0f2f7;--readout-bg: rgba(255, 255, 255, .9);--code-text: #9a4d00;--code-text2: #1a6b2c;--pre-text: #20293c;--issue: #c62828;--btn-hover-filter: brightness(.97);--shadow: rgba(20, 30, 60, .25)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px}#app{display:grid;grid-template-columns:300px 1fr;height:100vh}.sidebar{background:var(--panel);border-right:1px solid var(--border);overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:14px}.brand{display:flex;align-items:center;gap:10px;padding-bottom:4px}.brand .logo{font-size:30px;width:46px;height:46px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:12px;color:#fff}.brand h1{margin:0;font-size:18px;letter-spacing:.3px}.brand p{margin:0;font-size:12px;color:var(--muted)}.panel{background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:12px}.panel h2{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}.field label{font-size:12px;color:var(--muted)}select,input[type=text]{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:7px 9px;font-size:13px;outline:none}select:focus,input[type=text]:focus{border-color:var(--accent)}.sliderRow{display:flex;align-items:center;gap:10px}.sliderRow input[type=range]{flex:1;accent-color:var(--accent)}.sliderVal{font-size:12px;color:var(--text);min-width:34px;text-align:right;font-variant-numeric:tabular-nums}.btn{border:none;border-radius:9px;padding:8px 12px;font-size:13px;cursor:pointer;margin-bottom:8px;width:100%;transition:filter .15s}.btn:hover{filter:var(--btn-hover-filter)}.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:600}.btn.ghost{background:var(--bg);color:var(--text);border:1px solid var(--border);margin-bottom:0}.hint{font-size:11.5px;color:var(--muted);margin:8px 0 4px;line-height:1.4}.dataTitle{margin-top:6px;font-size:12.5px;color:var(--text);font-weight:600;word-break:break-word}.issues{color:var(--issue);font-size:11.5px;margin-top:6px;min-height:14px}.sourceList{margin:8px 0 4px;display:flex;flex-direction:column;gap:4px}.sourceListHeading{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}.sourceItem{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:6px 8px}.sourceInfo{display:flex;align-items:center;gap:8px;min-width:0}.sourceName{font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sourceCount{font-size:11px;color:var(--muted);white-space:nowrap}.sourceRemove{flex:0 0 auto;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:2px 6px;border-radius:6px;transition:color .15s,background .15s}.sourceRemove:hover{color:var(--issue);background:var(--bg)}.checks{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}.checks label{display:flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer}.checks input{accent-color:var(--accent)}.rowBtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}.themeToggle{display:grid;grid-template-columns:1fr 1fr;gap:6px}.themeBtn{background:var(--bg);color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:6px 8px;font-size:12.5px;cursor:pointer;transition:background .15s,color .15s}.themeBtn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.legend #colorbar{height:14px;border-radius:7px;border:1px solid var(--border);overflow:hidden}#colorbarGradient{height:100%;width:100%;background:linear-gradient(to right,#000,#fff)}.colorbarLabels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:4px}.stage{position:relative;overflow:hidden}#canvasWrap{position:absolute;top:0;right:0;bottom:0;left:0}#canvasWrap.dragover{outline:3px dashed var(--accent);outline-offset:-6px}#colorCanvas,#overlayCanvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;cursor:grab}#overlayCanvas{touch-action:none}#overlayCanvas:active{cursor:grabbing}.readout{position:absolute;left:10px;bottom:10px;background:var(--readout-bg);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:12.5px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;color:var(--text);pointer-events:none;white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@media (max-width: 760px){#app{grid-template-columns:1fr;grid-template-rows:auto 1fr}.sidebar{border-right:none;border-bottom:1px solid var(--border);max-height:45vh}}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--overlay-scrim);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.modal.hidden{display:none}.modalBox{background:var(--modal-bg);border:1px solid var(--border);border-radius:14px;width:min(860px,100%);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 20px 60px var(--shadow)}.modalHead{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}.modalHead h2{margin:0;font-size:15px}.modalTabs{margin-left:auto;display:flex;gap:6px;align-items:center}.tabBtn{background:var(--bg);color:var(--muted);border:1px solid var(--border);border-radius:7px;padding:5px 10px;font-size:12px;cursor:pointer;text-decoration:none;display:inline-block}.tabBtn.active{background:var(--accent);border-color:var(--accent);color:#fff}.tabBtn.rawLink:hover{border-color:var(--accent);color:var(--text)}.btnClose{background:transparent;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:4px 6px;line-height:1}.btnClose:hover{color:var(--text)}.helpContent{overflow:auto;padding:8px 20px 20px}.helpPlain{overflow:auto;margin:0;padding:16px 20px 20px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;white-space:pre;color:var(--pre-text)}.hidden{display:none!important}.markdown-body{color:var(--text);font-size:13.5px;line-height:1.55}.markdown-body h1{font-size:20px;border-bottom:1px solid var(--border);padding-bottom:6px}.markdown-body h2{font-size:16px;margin-top:22px}.markdown-body h3{font-size:14px;margin-top:18px}.markdown-body code{background:var(--panel2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:12px;color:var(--code-text)}.markdown-body pre{background:var(--pre-bg);border:1px solid var(--border);border-radius:8px;padding:12px;overflow:auto}.markdown-body pre code{background:none;border:none;padding:0;color:var(--code-text2)}.markdown-body table{border-collapse:collapse;margin:10px 0}.markdown-body th,.markdown-body td{border:1px solid var(--border);padding:5px 10px;text-align:left}.markdown-body th{background:var(--panel2)}.markdown-body a{color:var(--accent)}.markdown-body blockquote{border-left:3px solid var(--accent);margin:8px 0;padding:2px 12px;color:var(--muted)}.markdown-body ul,.markdown-body ol{padding-left:22px}.markdown-body hr{border:none;border-top:1px solid var(--border)}
