graph_studio.css

/* Ink & paper: neutral surfaces, deliberate spectral accents, real scanned paper. */
:root{--bg:#10141d;--side:#eee9dd;--panel:#191f2b;--panel2:#222a39;--hover:#2b3649;--border:#354157;--text:#edf1f8;--muted:#a4b2c8;--soft:#7b8da8;--accent:#8fbbff;--accentInk:#10223e;--gold:#edbd7c;--blue:#8fbbff;--purple:#c5a5fa;--red:#ff9b92;--shadow:0 22px 60px #0005;--paper-ink:#25344b;--paper-muted:#50617b}
[data-theme=light]{--bg:#f0f2f7;--panel:#fff;--panel2:#edf1f8;--hover:#e0e7f2;--border:#ccd5e4;--text:#202e44;--muted:#53657d;--soft:#6c7d94;--accent:#3565b1;--accentInk:#fff;--gold:#956526;--blue:#3565b1;--purple:#7954af;--red:#b84137;--shadow:0 18px 50px #243a5418}
body{font-size:14px;background-image:radial-gradient(ellipse at 84% 0,#25487718,transparent 50%)}
.shell{grid-template-columns:230px minmax(0,1fr)}
.sidebar{color:var(--paper-ink);border-right:1px solid #d0cabc;background-color:#eee9dd;background-image:linear-gradient(90deg,#f4f7fc65,#faf7ee95),url('/static/assets/graph-paper.webp');background-size:auto,auto 1250px;background-position:center,center top;box-shadow:8px 0 35px #0002;padding:27px 17px 16px;--text:var(--paper-ink);--muted:var(--paper-muted);--soft:#657994;--accent:#28569a;--accentInk:#fff;--panel2:#ffffffe0;--hover:#ffffffa8;--border:#adbed190;--panel:#fbfaf6;--bg:#faf9f4}
.sidebar .brand{padding-bottom:24px;margin-bottom:12px;border-bottom:2px solid #435d7e38;align-items:flex-start}
.sidebar .brand strong{color:#203550;font-size:21px;letter-spacing:-.055em;font-weight:750}
.sidebar .brand small{color:#465d78;font-size:11px;font-weight:500}
.sidebar .brand img{filter:hue-rotate(145deg) saturate(1.4);border-radius:10px;box-shadow:0 2px 6px #23324820}
.sidebar .new{background:#263e60;color:#fff;border:1px solid #263e60;box-shadow:0 3px 7px #23324815;margin-bottom:26px;min-height:41px;border-radius:9px}
.sidebar .new:hover{background:#355785}.sidebar .caps{color:#3a506c;font-size:10px;letter-spacing:.16em}
.sidebar .project-item{color:#324862;font-size:12px;margin:5px 0;background:#fff7;border-color:#d6dfea66;min-height:52px}
.sidebar .project-item.active{background:#fffef6ee;color:#1c3d69;border:1px solid #738fbc;border-left:4px solid #3566ae;padding-left:6px;box-shadow:0 2px 7px #29466513}
.sidebar .project-name small{color:#5b6c83}.sidebar .nav-link{color:#2c4565;background:transparent;border-radius:8px;margin:2px 0;font-weight:550}
.sidebar .nav-link:hover{background:#ffffffc9;color:#163d70}.sidebar .nav-link.active{background:#e9f0fbdc;color:#204f92;box-shadow:inset 3px 0 #3f73c4}
.sidebar .side-note{color:#4b5d74;background:#fff9;padding:9px;border-radius:7px;border:1px solid #fff9;line-height:1.65}
.sidebar .side-bottom{border-top:1px solid #6f849d45;padding-top:13px}.sidebar .voices-sidebar{padding:10px 0;margin:0;border:0}.sidebar .voices-sidebar .button{background:#fff9;color:#304c73;border-color:#6a7f9b60;width:100%;justify-content:flex-start}
.gs-paper-credit{font-size:9px!important;letter-spacing:.015em;text-decoration:none!important;color:#495e78!important;padding:4px 0;line-height:1.5;margin-top:6px}.gs-paper-credit:hover{text-decoration:underline!important}
.topbar{height:61px;background:#171d2890;backdrop-filter:blur(12px);padding-left:28px;padding-right:28px}.topbar .saved{font-size:11px;color:var(--muted)}.topbar .saved .icon{color:#78b69d}
[data-theme=light] .topbar{background:#ffffff80}.workspace-head{padding:26px 28px 20px}.workspace-head h1{font-size:31px;letter-spacing:-.055em;font-weight:630;line-height:1.25}.workspace-head .caps{font-size:10px;color:var(--gold);margin-bottom:7px}.workspace-head .description{font-size:12px;line-height:1.65;color:var(--muted);margin-top:7px}.workspace-body{padding:0 28px 28px}.steps{padding-left:28px;padding-right:28px}.step.active{color:var(--accent)}.step.active>span{background:var(--accent);color:var(--accentInk)}.step-rule{background:var(--border)}
.button{border-radius:9px;font-size:12px}.button.primary{background:linear-gradient(135deg,var(--accent),#aabaff);color:var(--accentInk);box-shadow:0 3px 13px #647fff14}.button.primary:hover{filter:brightness(1.09)}[data-theme=light] .button.primary{background:#3565b1;color:#fff}.button:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.panel{border-color:var(--border);border-radius:13px}.modal{background:var(--panel);border-color:var(--border);box-shadow:0 30px 100px #0009}.modal-head{background:linear-gradient(100deg,#526b9a14,transparent);border-bottom-color:var(--border)}.modal h2{font-size:23px;font-weight:620}.modal-body label{color:var(--muted)}input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.chip.green{background:#699bda18;border-color:#6793c744;color:var(--accent)}.chip.gold{color:var(--gold);background:#c68b2511}.dropzone{background:#688abc07;border-color:#637fa254}.upload-circle{background:#6596f319;color:var(--accent)}.source-card{background:linear-gradient(135deg,#638de909,transparent 65%),var(--panel);border-color:var(--border)}.source-card .doc-icon{color:var(--accent);background:#69a1ff17}.source-card:nth-child(3n+2) .doc-icon{color:#c5a5fa;background:#ae80e716}.source-card:nth-child(3n) .doc-icon{color:var(--gold);background:#c2964f16}.angle-card{border-top:2px solid #7594bd80}.angle-card:nth-child(3n+2){border-top-color:#ad83d380}.angle-card:nth-child(3n){border-top-color:#d4a45b80}.welcome h1{letter-spacing:-.065em}.welcome-card{background:linear-gradient(140deg,#618ce70e,transparent),var(--panel);transition:transform .15s,border-color .15s}.welcome-card:hover{transform:translateY(-3px);border-color:var(--accent)}.voice-graph{background:#151c28}.voice-graph-node circle{fill:#b7a0ef!important;stroke:#e0d1ff!important}.voice-graph-node.evidence-node circle{fill:#72a7ed!important;stroke:#a5c8fa!important}.voice-graph line{stroke:#919ebc}.voice-graph .overlay-link{stroke:#dfaa70}
.gs-workbench{grid-template-columns:minmax(0,1fr) 292px;gap:18px;align-items:start}.gs-visual{min-width:0}.gs-panel{min-height:0;background:#141b27;border-color:#3a4b65;overflow:hidden;box-shadow:0 15px 45px #0002;background-image:none}.gs-toolbar{display:flex;gap:9px;align-items:center;padding:13px 14px;border-bottom:1px solid #36445b;background:#1b2433}.gs-toolbar .graph-search{max-width:none;flex:1;min-width:80px;background:#101722;border:1px solid #405574;border-radius:8px;padding:0 10px}.gs-toolbar .graph-search input{background:transparent;border:0;font-size:12px;height:35px;min-width:0;width:100%;padding:5px 6px;color:#e4ecfa}.gs-toolbar .graph-search .icon{width:15px;color:#8faed8}.gs-mode{display:flex;background:#111824;border:1px solid #3a4b64;border-radius:8px;padding:3px;flex-shrink:0}.gs-mode button{font-size:11px;font-weight:700;background:none;color:#9dacbf;border-radius:5px;padding:5px 9px;min-height:27px}.gs-mode button[aria-pressed=true]{background:#436797;color:#fff;box-shadow:0 1px 3px #0003}.gs-toolbar>.icon-btn{color:#adbed5;flex-shrink:0}.gs-filterbar{display:flex;align-items:center;gap:9px;padding:9px 14px;background:#172030;border-bottom:1px solid #2d3b52;flex-wrap:wrap}.gs-filter{display:flex;align-items:center;gap:6px;font-size:10px;color:#8fa4c3;margin:0;min-width:0}.gs-filter span{font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.04em}.gs-filter select{max-width:143px;font-size:10px;padding:5px 6px;min-height:29px;border-color:#384961;color:#d2def1;background:#202b3c;border-radius:6px}.gs-limit{margin-left:auto}.gs-limit select{width:54px}.gs-stage{position:relative;background:radial-gradient(ellipse at 35% 30%,#293d5f40,transparent 66%),radial-gradient(ellipse at 80% 75%,#5b316319,transparent 50%),#121a26;background-image:radial-gradient(ellipse at 35% 30%,#293d5f40,transparent 66%),radial-gradient(#647ba02a .75px,transparent .75px);background-size:auto,24px 24px;overflow:hidden;isolation:isolate}.gs-stage .graph-canvas{width:100%;height:610px;display:block;touch-action:none;cursor:grab;user-select:none}.gs-stage .graph-canvas:active{cursor:grabbing}.gs-instructions{position:absolute;pointer-events:none;top:17px;left:18px;padding:9px 12px;background:#101923b0;border:1px solid #4d6a933b;border-radius:8px;box-shadow:0 4px 15px #0001;color:#9aafcd;backdrop-filter:blur(5px);font-size:10px;line-height:1.65}.gs-instructions b{display:block;font-size:9px;letter-spacing:.17em;color:#aec8ec;margin-bottom:2px}.gs-instructions span{opacity:.85}.gs-viewtools{position:absolute;bottom:16px;right:15px;display:flex;flex-direction:column;padding:4px;background:#121c2cef;border:1px solid #4a6080;border-radius:10px;box-shadow:0 5px 20px #0003}.gs-viewtools .icon-btn{color:#bdd3f1;min-width:30px;min-height:32px}.gs-viewtools .icon-btn:hover{background:#384c6a;color:#fff}.gs-axis{position:absolute;bottom:22px;left:19px;pointer-events:none;display:flex;gap:2px;align-items:center}.gs-axis span{font-size:9px;color:#90a5c5;letter-spacing:.15em}.gs-minimap{position:absolute;bottom:17px;right:66px;width:136px;height:89px;background:#131d2beb;border-radius:11px;cursor:crosshair;box-shadow:0 5px 14px #0003}.gs-minimap>rect{fill:transparent;stroke:#476181}.gs-minimap-viewport{fill:#6fa9ff13;stroke:#729ed7;stroke-width:1}.gs-empty{position:absolute;inset:42% 14% auto;text-align:center;color:#d0ddef;pointer-events:none}.gs-empty strong{font-size:20px;font-weight:500}.gs-empty p{font-size:12px;color:#95a8c4;margin-top:7px}.gs-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:#1a2332;color:#9cb0cd;font-size:10px;border-top:1px solid #34435b;line-height:1.6}.gs-summary .text-link{font-size:10px;flex-shrink:0;color:#9dc4ff}.gs-legend{padding:11px 15px 12px;background:#151e2c;border-top:1px solid #303e54;color:#9eafc8}.gs-legend summary{cursor:pointer;font-size:11px;color:#d7e2f3;font-weight:600}.gs-legend summary span{font-size:9px;font-weight:400;color:#859ab8;margin-left:10px}.gs-legend>div{display:flex;gap:9px 17px;flex-wrap:wrap;padding-top:10px}.gs-legend>div>span{display:inline-flex;align-items:center;gap:6px;font-size:10px}.gs-legend p{font-size:9px;color:#8499b7;margin-top:8px}.gs-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:13px}.gs-actions .button{min-height:32px;font-size:10px;padding:6px 9px}.gs-link .graph-edge{stroke:var(--link-color);stroke-width:1.35;stroke-opacity:.56;cursor:pointer;transition:none}.gs-link.active .graph-edge{stroke-width:2.2;stroke-opacity:1}.gs-link.muted-link{opacity:.24}.gs-link:hover .graph-edge,.gs-link:focus-within .graph-edge{stroke-width:3;stroke-opacity:1}.gs-link-hit{cursor:pointer;outline:none}.gs-link:focus-within .graph-edge{filter:drop-shadow(0 0 3px var(--link-color))}.gs-link-label{font:10px var(--font);paint-order:stroke;stroke:#121a26;stroke-width:5px;stroke-linejoin:round;pointer-events:none}.gs-node{cursor:grab;opacity:1;transition:opacity .15s}.gs-node:active{cursor:grabbing}.gs-node.gs-dim{opacity:.34}.gs-node:hover,.gs-node:focus-visible{opacity:1}.gs-node:hover .gs-halo,.gs-node:focus-visible .gs-halo{opacity:.28}.gs-node:focus-visible .gs-halo{stroke:currentColor;stroke-width:2}.gs-node-caption rect{fill:#1c293ded;stroke:#49608088;stroke-width:.7}.gs-node-caption text{font:11.5px var(--font);fill:#e8f0fc;stroke:none;paint-order:normal;font-weight:500}.gs-node.active .gs-node-caption rect{stroke:currentColor;fill:#263950}.gs-node.active .gs-node-caption text{fill:#fff;font-weight:650}.gs-node-caption{pointer-events:none}.gs-selection-ring{filter:drop-shadow(0 0 3px currentColor)}
.gs-inspector{border-top:2px solid #7b9fcf;overflow:hidden;position:sticky;top:16px;background:linear-gradient(150deg,#6c8fb509,transparent 200px),var(--panel);max-height:900px;overflow-y:auto}.gs-inspector .panel-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:15px 16px;border-color:var(--border);flex-wrap:wrap}.gs-inspector .panel-header h2{font-size:14px;font-weight:650;letter-spacing:-.02em}.gs-kicker{font-size:8px;letter-spacing:.14em;color:var(--soft)}.gs-inspector .panel-body{padding:17px 16px}.gs-selection-empty>.icon{width:34px;height:34px;color:var(--accent);margin-bottom:12px;stroke-width:1.1}.gs-selection-empty h3{font-size:18px;color:var(--text);line-height:1.4}.gs-selection-empty p{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.75}.gs-type-legend{display:grid;grid-template-columns:1fr 1fr;gap:11px 10px;margin-top:22px;font-size:10px;color:var(--muted)}.gs-type-legend span{display:flex;align-items:center;gap:8px}.gs-type-legend i,.gs-connections i{display:inline-block;flex-shrink:0;width:8px;height:8px;background:var(--type-color);border-radius:50%;box-shadow:0 0 8px color-mix(in srgb,var(--type-color) 30%,transparent)}.gs-divider{height:1px;background:var(--border);margin:21px 0}.gs-tip{border-left:2px solid #827aaa;color:var(--muted);padding-left:12px;margin-top:24px}.gs-tip strong{font-size:11px;color:var(--text);font-weight:550}.gs-tip p{font-size:11px;line-height:1.8;margin-top:4px}.gs-badge{display:inline-flex;align-items:center;gap:7px;color:var(--type-color);background:color-mix(in srgb,var(--type-color) 12%,transparent);border:1px solid color-mix(in srgb,var(--type-color) 30%,transparent);padding:4px 9px;border-radius:7px;font-size:11px;font-weight:600}.gs-badge:before{content:'';width:7px;height:7px;background:var(--type-color);border-radius:50%}.gs-inspector .gs-selected-title{background:none;border:0;padding:0;margin:0 0 18px}.gs-selected-title h3{font-size:23px;font-weight:600;line-height:1.3;margin-bottom:10px;overflow-wrap:anywhere}.gs-selected-title .chip{font-size:9px;color:var(--muted)}.gs-edit-fields label{font-size:11px;margin-top:13px;color:var(--muted)}.gs-edit-fields input,.gs-edit-fields textarea,.gs-edit-fields select{width:100%;font-size:12px;padding:9px 10px;border-radius:7px;line-height:1.65}.gs-edit-fields textarea{min-height:96px}.gs-edit-fields .button{font-size:11px}.gs-edit-fields #gs-edit-status{margin-top:8px;font-size:10px;line-height:1.6;color:var(--gold)}.gs-inspector .evidence-card{background:#6385b608;border-color:var(--border)}.gs-inspector .evidence-card blockquote{font-size:11px;line-height:1.7}.gs-connections summary{font-size:11px;color:var(--muted);cursor:pointer}.gs-connections summary b{font-size:10px;background:var(--panel2);padding:2px 6px;margin-left:6px;border-radius:4px;font-weight:500}.gs-connections button{display:flex;align-items:center;text-align:left;gap:9px;padding:9px 0;background:none;width:100%;border-bottom:1px solid #58688125;color:var(--muted)}.gs-connections button:hover{color:var(--text);background:var(--hover)}.gs-connections strong{font-size:10px;display:block;color:var(--text);font-weight:500}.gs-connections small{font-size:10px;display:block;line-height:1.7;overflow-wrap:anywhere}.graph-expanded .gs-workbench{position:fixed;inset:10px;z-index:35;padding:15px;background:var(--bg);border:1px solid var(--border);border-radius:16px;overflow:auto;box-shadow:0 0 0 40px #000a}.graph-expanded .gs-stage .graph-canvas{height:calc(100vh - 263px);min-height:300px}.graph-expanded .gs-inspector{max-height:calc(100vh - 55px)}.graph-expanded .gs-actions{padding-top:8px}
[data-theme=light] .gs-inspector .evidence-card{background:#f4f6fb}[data-theme=light] .gs-node-caption text{fill:#e8f0fc}.gs-panel .text-link:hover{color:#fff}
@media(min-width:1700px){.gs-workbench{grid-template-columns:minmax(0,1fr) 320px}.gs-stage .graph-canvas{height:690px}}
@media(max-width:1250px){.shell{grid-template-columns:205px minmax(0,1fr)}.workspace-body{padding:0 20px 24px}.workspace-head{padding:23px 20px 18px}.gs-workbench{grid-template-columns:minmax(0,1fr) 258px;gap:13px}.gs-toolbar{padding:10px}.gs-filterbar{gap:7px;padding:8px 10px}.gs-filter select{max-width:124px}.gs-filter span{display:none}.gs-stage .graph-canvas{height:560px}.gs-inspector .panel-body{padding:14px}.gs-selected-title h3{font-size:21px}.gs-limit{margin-left:0}}
@media(max-width:1040px){.gs-workbench{grid-template-columns:minmax(0,1fr)}.gs-inspector{position:static;max-height:none}.gs-stage .graph-canvas{height:560px}.gs-inspector .gs-edit-fields{max-width:640px}.gs-connections{max-width:640px}.gs-selection-empty{max-width:560px}.gs-type-legend{grid-template-columns:repeat(3,1fr);max-width:570px}.graph-expanded .gs-workbench{grid-template-columns:minmax(0,1fr)}.graph-expanded .gs-inspector{max-height:none}.graph-expanded .gs-stage .graph-canvas{height:60vh}}
@media(max-width:720px){.shell{grid-template-columns:1fr}.sidebar.open{width:230px}.topbar{padding:0 16px}.workspace-head{padding:21px 16px 18px}.workspace-head h1{font-size:25px}.workspace-body{padding:0 12px 20px}.steps{padding-left:16px;padding-right:16px}.gs-stage .graph-canvas{height:490px}.gs-filterbar{gap:7px}.gs-filter select{max-width:123px}.gs-toolbar .graph-search input{font-size:11px}.gs-mode button{padding:4px 7px}.gs-instructions{font-size:9px;top:10px;left:10px;max-width:205px}.gs-summary{font-size:9px;padding:9px 10px;align-items:flex-start}.gs-legend>div{gap:8px 12px}.gs-legend summary span{display:none}.gs-minimap{width:109px;height:72px}.gs-axis{left:12px;bottom:20px}.gs-actions .spacer{display:none}.gs-inspector .panel-header{padding:13px 16px}}
@media(prefers-reduced-motion:reduce){.gs-node,.welcome-card{transition:none}.welcome-card:hover{transform:none}}
@media print{.gs-workbench{display:none}.sidebar{display:none!important}}

.gs-link-label{display:none}.gs-link-label.shown,.gs-link:hover .gs-link-label,.gs-link:focus-within .gs-link-label{display:block}