:root { color-scheme:dark; --title:#181818; --sidebar:#252526; --sidebar-deep:#1f1f1f; --editor:#1e1e1e; --tab:#1f1f1f; --input:#313131; --hover:#2a2d2e; --selection-strong:#094771; --border:#3b3b3b; --border-soft:#2b2b2b; --text:#cccccc; --text-bright:#f0f0f0; --muted:#9d9d9d; --faint:#777777; --blue:#007acc; --blue-bright:#4daafc; --green:#4ec9b0; --orange:#ce9178; --yellow:#dcdcaa; --purple:#c586c0; --sans:-apple-system,BlinkMacSystemFont,"Segoe WPC","Segoe UI",sans-serif; --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
body { min-width:320px; color:var(--text); background:var(--editor); font-family:var(--sans); font-size:13px; line-height:1.35; -webkit-font-smoothing:antialiased; }
button,input,select { color:inherit; font:inherit; }
button,select { cursor:pointer; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:1px solid var(--blue-bright); outline-offset:-1px; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; z-index:200; top:4px; left:52px; padding:6px 10px; background:var(--blue); color:white; transform:translateY(-140%); }
.skip-link:focus { transform:none; }
.workbench { width:100%; height:100dvh; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:35px minmax(0,1fr); }
.titlebar { display:grid; grid-template-columns:48px auto 1fr auto; align-items:center; border-bottom:1px solid var(--border-soft); background:var(--title); user-select:none; }
.window-mark { height:35px; display:grid; place-items:center; }
.window-mark svg { width:19px; height:19px; overflow:visible; }
.window-mark circle,.window-mark path { fill:none; stroke:var(--blue-bright); stroke-width:1.8; }
.menubar { height:100%; display:flex; align-items:center; gap:1px; }
.menubar a { height:28px; display:flex; align-items:center; padding:0 8px; border-radius:4px; color:var(--text); font-size:12px; }
.menubar a:hover { background:var(--hover); }
.window-title { min-width:0; margin:0; overflow:hidden; color:var(--muted); font-size:12px; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.window-title span { color:var(--text); }
.title-actions { height:100%; display:flex; align-items:center; gap:4px; padding-right:7px; }
.exact-release { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; color:var(--muted); font-size:12px; }
.exact-release i { width:7px; height:7px; border-radius:50%; background:var(--green); }
.title-actions>a { width:32px; height:28px; display:grid; place-items:center; border-radius:4px; }
.title-actions>a:hover { background:#c42b1c; color:white; }
.workspace { min-height:0; display:grid; grid-template-columns:290px minmax(420px,1fr) 330px; }
.catalog-panel,.inspector-panel { min-width:0; min-height:0; display:flex; flex-direction:column; background:var(--sidebar); }
.catalog-panel { border-right:1px solid var(--border-soft); }
.inspector-panel { border-left:1px solid var(--border-soft); }
.sidebar-header { min-height:36px; display:flex; align-items:center; justify-content:space-between; padding:0 10px 0 16px; }
.sidebar-header h1,.sidebar-header h2 { margin:0; color:var(--text); font-size:12px; font-weight:400; letter-spacing:.04em; text-transform:uppercase; }
.sidebar-header>span { min-width:0; max-width:62%; overflow:hidden; color:var(--green); font-family:var(--mono); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.toolbar-button { width:26px; height:26px; display:grid; place-items:center; border:0; border-radius:4px; background:transparent; }
.toolbar-button:hover { background:var(--hover); }
.toolbar-button .ui-icon { width:14px; height:14px; }
.model-section { border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
.model-section h2,.tree-heading h2 { height:24px; display:flex; align-items:center; gap:2px; margin:0; color:var(--text-bright); font-size:12px; font-weight:700; text-transform:uppercase; }
.model-section h2 { padding:0 6px; }
.model-section h2 .ui-icon,.tree-heading h2 .ui-icon,.relation-section h4 .ui-icon { width:14px; height:14px; }
.model-picker { display:grid; gap:3px; padding:5px 12px 4px 22px; color:var(--muted); font-size:12px; }
.model-picker select { min-width:0; width:100%; height:27px; padding:2px 5px; border:1px solid var(--border); border-radius:0; outline:0; background:var(--input); color:var(--text); font-size:12px; }
.model-picker select:focus { border-color:var(--blue); }
.model-picker select:disabled { opacity:.65; cursor:wait; }
.release-summary { display:grid; grid-template-columns:1fr 1fr; margin:0; padding:4px 12px 9px 22px; }
.release-summary div { min-width:0; padding:3px 0; }
.release-summary div:nth-child(1),.release-summary div:nth-child(4) { grid-column:1/3; }
.release-summary dt { color:var(--muted); font-size:12px; }
.release-summary dd { margin:1px 0 0; overflow:hidden; color:var(--text); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.release-summary code { color:var(--green); font-family:var(--mono); font-size:12px; }
.catalog-section { min-height:0; display:flex; flex:1; flex-direction:column; }
.tree-heading { min-height:24px; display:flex; align-items:center; justify-content:space-between; padding-right:10px; }
.tree-heading h2 { min-width:0; overflow:hidden; padding-left:6px; text-overflow:ellipsis; white-space:nowrap; }
.tree-heading>span { flex:none; color:var(--muted); font-family:var(--mono); font-size:12px; white-space:nowrap; }
.catalog-tools { display:grid; gap:6px; padding:5px 8px 8px; border-bottom:1px solid var(--border-soft); }
.search-field { height:28px; display:grid; grid-template-columns:28px 1fr; border:1px solid var(--border); background:var(--input); }
.search-field:focus-within { border-color:var(--blue); }
.search-field>.ui-icon { width:14px; height:14px; place-self:center; color:var(--muted); }
.search-field input { min-width:0; border:0; outline:0; background:transparent; font-size:12px; }
.search-field input::placeholder { color:#a0a0a0; }
.filter-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
#interaction-view-controls[hidden],.graph-controls [hidden],.graph-legend [hidden] { display:none; }
#interaction-view-controls { grid-template-columns:1fr; }
.filter-grid label,.sort-field { min-width:0; display:grid; grid-template-columns:43px 1fr; align-items:center; gap:3px; color:var(--muted); font-size:12px; }
.filter-grid select,.sort-field select { min-width:0; height:25px; padding:1px 4px; border:1px solid var(--border); border-radius:0; outline:0; background:var(--input); font-size:12px; }
.filter-grid select:focus,.sort-field select:focus { border-color:var(--blue); }
.catalog-list { min-height:0; overflow-x:hidden; overflow-y:auto; flex:1; overscroll-behavior:contain; scrollbar-color:#5a5a5a transparent; }
.catalog-item { width:100%; min-height:42px; overflow:hidden; display:grid; grid-template-columns:58px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; gap:0 5px; padding:4px 8px; border:0; background:transparent; text-align:left; }
.catalog-item:hover { background:var(--hover); }
.catalog-item[aria-selected="true"] { background:var(--selection-strong); color:white; }
.catalog-item[data-focus="true"] { box-shadow:inset 2px 0 var(--green); }
.catalog-coordinate { min-width:0; grid-row:1/3; overflow:hidden; color:var(--orange); font-family:var(--mono); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.catalog-item[aria-selected="true"] .catalog-coordinate { color:#ffd8c9; }
.catalog-item strong { min-width:0; overflow:hidden; font-size:12px; font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
.catalog-item small { min-width:0; overflow:hidden; color:var(--muted); font-family:var(--mono); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.catalog-item[aria-selected="true"] small { color:#d6eaff; }
.catalog-empty { padding:18px 12px; color:var(--muted); text-align:center; }
.catalog-empty strong,.catalog-empty p { font-size:12px; }
.catalog-empty strong { color:var(--text); }
.catalog-empty p { margin:4px 0 0; }
.catalog-more { min-height:29px; padding:4px 8px; border:0; border-top:1px solid var(--border-soft); background:var(--sidebar-deep); color:var(--blue-bright); font-size:12px; text-align:left; }
.catalog-more:hover { background:var(--hover); color:var(--text-bright); }
.editor-group { min-width:0; min-height:0; display:grid; grid-template-rows:35px 36px minmax(0,1fr) 25px; background:var(--editor); }
.editor-tabs { display:flex; align-items:stretch; overflow:hidden; border-bottom:1px solid var(--border-soft); background:var(--title); }
.editor-tab { position:relative; min-width:180px; max-width:460px; display:flex; align-items:center; gap:7px; padding:0 12px; border-right:1px solid var(--border-soft); background:var(--tab); color:var(--text); font-size:12px; }
.editor-tab>.ui-icon { width:15px; height:15px; color:var(--green); }
.editor-tab span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.editor-tab>i { position:absolute; inset:0 0 auto; height:1px; background:var(--blue); }
.editor-add { width:35px; min-width:35px; height:35px; display:grid; place-items:center; padding:0; border:0; border-right:1px solid var(--border-soft); background:transparent; color:var(--text); }
.editor-add span { display:block; margin-top:-2px; font-family:var(--sans); font-size:22px; font-weight:300; line-height:1; }
.editor-add:hover:not(:disabled) { background:var(--hover); color:var(--text-bright); }
.editor-add:disabled { color:var(--faint); cursor:default; opacity:.5; }
.editor-toolbar { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 8px; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); background:var(--sidebar-deep); }
.graph-controls { display:flex; align-items:center; gap:7px; }
.graph-controls fieldset { display:flex; align-items:center; margin:0; padding:0; border:0; }
.graph-controls legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.control-label { margin-right:5px; color:var(--muted); font-size:12px; }
.graph-controls button { min-width:28px; height:24px; padding:2px 7px; border:0; border-radius:3px; background:transparent; font-size:12px; }
.graph-controls button:hover { background:var(--hover); }
.graph-controls button[aria-pressed="true"] { background:var(--selection-strong); color:white; }
.toolbar-separator { width:1px; height:18px; background:var(--border); }
.graph-legend { min-width:0; display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; }
.graph-legend strong { max-width:260px; overflow:hidden; color:var(--text); font-size:12px; font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
.graph-legend span { display:inline-flex; align-items:center; gap:4px; }
.graph-legend i { width:8px; height:8px; border-radius:50%; border:1px solid; }
.graph-legend .parent-key { border-color:var(--blue-bright); background:#16394d; }
.graph-legend .focus-key { border-color:var(--orange); background:#4a2922; }
.graph-legend .child-key { border-color:var(--green); background:#153d36; }
.graph-stage { position:relative; min-width:0; min-height:0; overflow:hidden; background:linear-gradient(rgb(255 255 255 / 2.7%) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / 2.7%) 1px,transparent 1px),var(--editor); background-size:24px 24px; }
.graph-stage[data-isolated-case="true"] { overflow-y:auto; scrollbar-gutter:stable; }
.graph-loading { position:absolute; z-index:2; inset:0; display:none; place-content:center; justify-items:center; gap:10px; color:var(--muted); font-family:var(--mono); font-size:12px; letter-spacing:.03em; }
.graph-loading-spinner { width:30px; height:30px; border:2px solid #3f3f3f; border-top-color:var(--blue-bright); border-right-color:var(--green); border-radius:50%; animation:graph-loading-spin .8s linear infinite; }
body[data-state="loading"] .graph-loading { display:grid; }
body[data-state="loading"] #neighborhood-graph { opacity:.18; }
@keyframes graph-loading-spin { to { transform:rotate(360deg); } }
#neighborhood-graph { width:100%; height:100%; display:block; overflow:visible; }
#studio-arrow path { fill:#858585; }
#studio-arrow-focus path { fill:var(--green); }
.graph-edge,.graph-node { transition:opacity .12s ease; }
.graph-edge .edge-hit { fill:none; stroke:transparent; stroke-width:14; pointer-events:stroke; vector-effect:non-scaling-stroke; }
.graph-edge .edge-line { fill:none; stroke:#6a6a6a; stroke-width:1.4; pointer-events:none; vector-effect:non-scaling-stroke; }
.graph-edge .edge-line[data-focus-edge="true"] { stroke:var(--green); stroke-width:1.8; }
.graph-edge[data-highlight="dimmed"],.graph-node[data-highlight="dimmed"] { opacity:.12; }
.graph-edge[data-highlight="connected"] .edge-line { stroke:var(--blue-bright); stroke-width:2; }
.graph-edge[data-highlight="primary"] .edge-line { stroke:var(--yellow); stroke-width:2.8; }
.graph-node { cursor:pointer; }
.graph-node rect { fill:#252526; stroke:#858585; stroke-width:1.7; vector-effect:non-scaling-stroke; transition:fill .12s ease,stroke-width .12s ease; }
.graph-node[data-relation="parent"] rect { fill:#16394d; stroke:var(--blue-bright); }
.graph-node[data-relation="child"] rect { fill:#153d36; stroke:var(--green); }
.graph-node[data-relation="both"] rect { fill:#3b3040; stroke:var(--purple); }
.graph-node[data-focus="true"] rect { fill:#4a2922; stroke:var(--orange); stroke-width:2.7; }
.graph-node[data-selected="true"]:not([data-focus="true"]) rect { stroke:var(--yellow); stroke-width:2.7; }
.graph-node[data-highlight="connected"] rect { stroke:var(--blue-bright); stroke-width:2.7; }
.graph-node[data-highlight="primary"] rect { fill:#51491e; stroke:var(--yellow); stroke-width:3.2; }
.graph-node:hover rect,.graph-node:focus rect { stroke:var(--yellow); stroke-width:2.7; }
.graph-node text { fill:var(--text-bright); font-family:var(--mono); font-size:12px; font-weight:500; pointer-events:none; text-anchor:middle; }
.graph-message { position:absolute; right:8px; bottom:8px; max-width:320px; padding:6px 8px; border:1px solid var(--border); background:rgb(37 37 38 / 96%); color:var(--muted); font-size:12px; }
.graph-message[data-case-overview="true"] { top:8px; bottom:auto; }
.graph-message summary { cursor:pointer; }
.editor-footer { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 10px; border-top:1px solid var(--border-soft); color:var(--muted); font-size:12px; }
.editor-footer p { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.editor-footer p:first-child { color:var(--green); font-family:var(--mono); }
.inspector-content { min-height:0; overflow:auto; overscroll-behavior:contain; padding:8px 12px 20px; scrollbar-color:#5a5a5a transparent; }
.node-heading { padding:8px 2px 10px; border-bottom:1px solid var(--border-soft); }
.node-heading>p { margin:0 0 4px; color:var(--orange); font-family:var(--mono); font-size:12px; text-transform:uppercase; }
.node-heading h3 { margin:0 0 8px; color:var(--text-bright); font-size:16px; font-weight:500; line-height:1.25; }
.tag-row { display:flex; flex-wrap:wrap; gap:4px; }
.node-tag { padding:2px 5px; border:1px solid var(--border); border-radius:2px; color:var(--muted); font-family:var(--mono); font-size:12px; }
.node-tag[data-tone="role"] { border-color:#287e70; color:var(--green); }
.node-summary { margin:10px 2px; color:var(--text); font-size:12px; line-height:1.5; }
.node-metrics { display:grid; grid-template-columns:repeat(3,1fr); margin:0 0 10px; border:1px solid var(--border); }
.node-metrics div { min-width:0; padding:5px 6px; border-left:1px solid var(--border); }
.node-metrics div:first-child { border-left:0; }
.node-metrics dt { overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.node-metrics dd { margin:1px 0 0; color:var(--yellow); font-family:var(--mono); font-size:14px; }
.relation-section { margin-top:8px; }
.relation-section>header { min-width:0; height:25px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid var(--border-soft); }
.relation-section h4 { min-width:0; flex:1; display:flex; align-items:center; gap:2px; margin:0; color:var(--text-bright); font-size:12px; font-weight:700; }
.relation-section h4>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.relation-section>header>span { flex:none; color:var(--muted); font-family:var(--mono); font-size:12px; }
.relation-list { max-height:162px; overflow-x:hidden; overflow-y:auto; }
.relation-item { min-width:0; width:100%; min-height:43px; display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:1px; padding:5px 4px; overflow:hidden; border:0; background:transparent; text-align:left; }
.relation-item:hover { background:var(--hover); }
.relation-item code,.relation-item span { min-width:0; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.relation-item code { color:var(--orange); font-family:var(--mono); font-size:12px; line-height:1.35; }
.relation-item span { color:var(--text); font-size:12px; line-height:1.35; }
.relation-empty { margin:0; padding:5px 3px; color:var(--muted); font-size:12px; }
.record-details { border-top:1px solid var(--border-soft); }
.record-details:first-of-type { margin-top:12px; }
.record-details summary { padding:7px 2px; color:var(--text-bright); font-size:12px; font-weight:700; cursor:pointer; }
.record-details p { margin:2px 2px 10px; color:var(--text); font-size:12px; line-height:1.5; }
.record-details pre { max-height:300px; margin:0 0 8px; overflow:auto; padding:7px; border:1px solid var(--border); background:var(--editor); color:var(--green); font-family:var(--mono); font-size:12px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.source-boundary { margin-top:14px; padding:8px; border:1px solid var(--border); background:var(--sidebar-deep); }
.source-boundary h4 { margin:0 0 5px; color:var(--yellow); font-size:12px; }
.source-boundary p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
.source-boundary code { color:var(--green); font-family:var(--mono); font-size:12px; }
.import-dialog { width:min(560px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; overflow:auto; border:1px solid #4c4c4c; border-radius:0; color:var(--text); background:var(--sidebar); box-shadow:0 16px 52px rgb(0 0 0 / 48%); font-family:var(--sans); font-size:12px; }
.import-dialog::backdrop { background:rgb(0 0 0 / 54%); }
.import-dialog form { display:grid; }
.import-dialog-header { min-height:58px; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:12px 12px 10px 16px; border-bottom:1px solid var(--border); background:var(--title); }
.import-dialog-header p { margin:0 0 2px; color:var(--green); font-family:var(--mono); font-size:12px; letter-spacing:.08em; }
.import-dialog-header h2 { margin:0; color:var(--text-bright); font-size:17px; font-weight:500; }
.dialog-close { width:28px; height:28px; display:grid; place-items:center; padding:0; border:0; border-radius:3px; background:transparent; color:var(--muted); }
.dialog-close:hover { background:#c42b1c; color:white; }
.dialog-close .ui-icon { width:15px; height:15px; }
.import-description { margin:0; padding:12px 16px; color:var(--text); line-height:1.5; }
.import-files { display:grid; gap:1px; margin:0 16px; border:1px solid var(--border); background:var(--border); }
.import-files label { min-width:0; display:grid; grid-template-columns:155px minmax(0,1fr); align-items:center; gap:12px; min-height:58px; padding:8px 10px; background:var(--editor); }
.import-files label>span { min-width:0; display:grid; gap:2px; }
.import-files strong { color:var(--text-bright); font-size:12px; }
.import-files small { color:var(--muted); font-size:12px; }
.import-files input { min-width:0; width:100%; color:var(--muted); font-size:12px; }
.import-files input::file-selector-button { min-height:27px; margin-right:8px; padding:3px 9px; border:1px solid var(--border); border-radius:2px; color:var(--text); background:var(--input); font:inherit; cursor:pointer; }
.import-files input::file-selector-button:hover { border-color:#5b5b5b; background:var(--hover); }
.import-boundary { margin:12px 16px 0; padding:9px 10px; border-left:2px solid var(--yellow); color:var(--muted); background:var(--sidebar-deep); line-height:1.5; }
.import-boundary strong { color:var(--yellow); }
.import-status { min-height:18px; margin:9px 16px 0; color:var(--green); font-family:var(--mono); line-height:1.45; overflow-wrap:anywhere; }
.import-status[data-tone="error"] { color:#f48771; }
.import-actions { display:flex; justify-content:flex-end; gap:7px; padding:10px 16px 14px; }
.import-actions button { min-width:92px; min-height:29px; padding:4px 12px; border:1px solid var(--border); border-radius:2px; background:var(--input); }
.import-actions button:hover:not(:disabled) { background:var(--hover); }
.import-actions .primary-action { border-color:var(--blue); background:var(--blue); color:white; }
.import-actions .primary-action:hover:not(:disabled) { background:#0e639c; }
.import-actions button:disabled { opacity:.55; cursor:wait; }
body[data-state="loading"] #load-state { opacity:.72; }
body[data-state="error"] #load-state { color:#fff1f1; font-weight:700; }
@media (max-width:1150px) { .workspace{grid-template-columns:260px minmax(400px,1fr) 290px}.graph-legend strong{display:none}.window-title{text-align:left;padding-left:20px} }
@media (max-width:900px) { html,body{height:auto;min-height:100%;overflow:auto}.workbench{height:auto;min-height:100dvh;grid-template-rows:35px auto}.workspace{display:block}.catalog-panel{height:560px;border-bottom:1px solid var(--border)}body[data-interaction-views="true"] .catalog-panel{height:720px}.editor-group{height:650px}.inspector-panel{min-height:520px;border-top:1px solid var(--border);border-left:0}.titlebar{grid-template-columns:48px auto 1fr}.window-title{display:none}.title-actions{justify-self:end}.exact-release{display:none} }
@media (max-width:560px) { .titlebar{grid-template-columns:40px 1fr auto}.window-mark{width:40px}.menubar a:nth-child(2){display:none}.release-summary{grid-template-columns:1fr}.release-summary div:nth-child(n){grid-column:1}.filter-grid{grid-template-columns:1fr}.editor-toolbar{height:auto;min-height:48px;align-items:flex-start;flex-direction:column;padding:5px 8px}.editor-group{height:680px;grid-template-rows:35px auto minmax(0,1fr) 25px}.graph-controls{flex-wrap:wrap}.import-files label{grid-template-columns:1fr}.import-dialog{width:calc(100vw - 16px)} }
@media (max-width:560px) { body[data-interaction-views="true"] .filter-grid label { grid-template-columns:64px 1fr; } }
@media (prefers-reduced-motion:reduce) { *{scroll-behavior:auto!important}.graph-loading-spinner{animation:none;border-color:var(--blue-bright) var(--border) var(--border) var(--green)} }

.record-details h5 { font-size: 12px; line-height: 1.5; margin: 16px 0 8px; }
.record-details .evidence-link { color: var(--accent, #48c9b0); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }