/* Offset Finder design layer: typography, spacing, surfaces. Loaded after style.css. */
:root {
  --of-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --of-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --of-radius: 8px;
  --of-radius-sm: 6px;
  --of-header: 52px;
  --of-hairline: var(--tblr-border-color);
  --of-muted: var(--tblr-secondary);
  --of-raise: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 1px rgba(16, 24, 40, 0.04);
  --of-pop: 0 12px 32px -8px rgba(16, 24, 40, 0.22), 0 2px 6px rgba(16, 24, 40, 0.08);
  --tblr-font-sans-serif: var(--of-sans);
  --tblr-body-font-family: var(--of-sans);
  --tblr-font-monospace: var(--of-mono);
  --atlas-header: var(--of-header);
}
:root[data-bs-theme="dark"] { --of-raise: none; --of-pop: 0 16px 40px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04); }
:root[data-theme="terminal"] { --of-sans: var(--of-mono); }

body { font-family: var(--of-sans); font-size: 14px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.005em; }
code, kbd, pre, .function-name, .graph-code, .CodeMirror, .cm-editor, .cm-content { font-family: var(--of-mono); }
::selection { background: rgba(var(--tblr-primary-rgb), 0.22); }

/* ---- buttons: quiet by default, one solid primary ---- */
.btn { font-weight: 500; letter-spacing: -0.005em; border-radius: var(--of-radius-sm); box-shadow: none; }
.btn:not(.btn-primary):not(.btn-link):not(.btn-close) { background: var(--tblr-bg-surface); border-color: var(--of-hairline); color: var(--tblr-body-color); }
.btn:not(.btn-primary):not(.btn-link):not(.btn-close):hover { background: var(--tblr-bg-surface-secondary); }
.btn-sm { --tblr-btn-padding-y: 4px; --tblr-btn-padding-x: 10px; font-size: 12.5px; min-height: 30px; }
.form-control, .form-select { border-radius: var(--of-radius-sm); border-color: var(--of-hairline); background-color: var(--tblr-bg-surface); font-size: 13px; }
.form-control:focus, .form-select:focus { border-color: rgba(var(--tblr-primary-rgb), 0.7); box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), 0.16); }
.dropdown-menu { border-radius: var(--of-radius); border-color: var(--of-hairline); box-shadow: var(--of-pop); padding: 6px; }
.dropdown-item { border-radius: var(--of-radius-sm); font-size: 13px; }

/* ---- header ---- */
.atlas-header { height: var(--of-header); min-height: var(--of-header); background: var(--tblr-bg-surface); border-bottom: 1px solid var(--of-hairline); }
.atlas-header .container-fluid { padding-inline: 16px; }
.brand { flex-direction: row; align-items: center; gap: 10px; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--tblr-primary); color: #fff; flex: none; }
:root[data-theme="terminal"] .brand-mark { color: #041004; }
.brand .navbar-brand { font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em; }
.brand-discord { font-size: 11.5px; padding-left: 10px; border-left: 1px solid var(--of-hairline); line-height: 16px; }
.header-actions { gap: 6px; }

/* ---- sidebar / search ---- */
:root { --atlas-sidebar: 340px; }
.search-pane { background: var(--tblr-bg-surface); }
.search-controls { padding: 14px 14px 0; }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; margin-bottom: 12px; border-radius: var(--of-radius); background: var(--tblr-bg-surface-secondary); }
.mode-switch .nav-link { min-height: 28px; padding: 4px 8px; border-radius: var(--of-radius-sm); font-size: 12.5px; font-weight: 500; color: var(--of-muted); background: transparent; }
.mode-switch .nav-link.active { background: var(--tblr-bg-surface); color: var(--tblr-body-color); font-weight: 600; box-shadow: var(--of-raise), 0 0 0 1px var(--of-hairline); }
.search-controls .form-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.search-box { position: relative; flex-wrap: nowrap; }
.search-box .form-control { height: 38px; padding-left: 34px; padding-right: 30px; border-radius: var(--of-radius) !important; font-size: 13.5px; }
.search-box .search-icon { position: absolute; left: 11px; top: 11px; z-index: 5; color: var(--of-muted); pointer-events: none; }
.search-box .search-kbd { position: absolute; right: 9px; top: 9px; z-index: 5; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; font: 500 11px/1 var(--of-mono); color: var(--of-muted); background: var(--tblr-bg-surface-secondary); border: 1px solid var(--of-hairline); border-radius: 5px; box-shadow: none; pointer-events: none; }
.search-box:focus-within .search-kbd, .search-box:has(input:not(:placeholder-shown)) .search-kbd { display: none; }
#search-submit { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.search-options-row { margin-top: 8px; gap: 6px; }
.search-options-row .form-select { height: 30px; min-height: 30px; font-size: 12.5px; padding-block: 2px; }
.search-status-row { min-height: 30px; padding-block: 6px; }
.search-status-row #result-status { font-size: 12px; font-variant-numeric: tabular-nums; }

/* compact result rows */
.results { padding: 4px 6px 8px; }
.result { padding: 7px 10px; margin: 1px 0; border: 0; border-left: 0 !important; border-radius: var(--of-radius-sm); }
.result strong { font: 500 12.5px/1.45 var(--of-mono); letter-spacing: -0.01em; -webkit-line-clamp: 2; }
.result .reference-meta { font-size: 11.5px; gap: 8px; margin-top: 1px; color: var(--of-muted); }
.result .reference-meta:empty { display: none; }
.result:hover { background: var(--tblr-bg-surface-secondary); }
.result.active { background: rgba(var(--tblr-primary-rgb), 0.12); box-shadow: inset 2px 0 0 var(--tblr-primary); }
.result .string-snippet { margin-top: 4px; font-size: 11.5px; padding: 3px 6px; border-radius: 4px; background: var(--tblr-bg-surface-secondary); color: var(--of-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-disclosure { border-top: 1px solid var(--of-hairline); font-size: 12px; }

/* ---- landing ---- */
.empty-workspace { align-items: flex-start; overflow: auto; padding: clamp(28px, 7vh, 80px) clamp(24px, 6vw, 88px); background:
  radial-gradient(1200px 400px at 70% -10%, rgba(var(--tblr-primary-rgb), 0.07), transparent 70%), var(--tblr-body-bg); }
.landing { max-width: 680px; width: 100%; color: var(--tblr-body-color); }
.landing-eyebrow { margin: 0 0 14px; font: 600 11.5px/1 var(--of-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tblr-primary); }
.landing-title { margin: 0 0 14px; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; font-weight: 650; letter-spacing: -0.035em; }
.landing-lede { margin: 0 0 22px; max-width: 560px; font-size: 15px; line-height: 1.6; color: var(--of-muted); }
.landing-lede code { font-size: 13px; padding: 1px 5px; border-radius: 4px; background: var(--tblr-bg-surface-secondary); color: var(--tblr-body-color); }
.landing-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 30px; font-size: 12.5px; color: var(--of-muted); }
.landing-try > span { margin-right: 4px; }
.landing-chip { font: 500 12.5px/1 var(--of-mono); padding: 7px 10px; border-radius: 999px; border: 1px solid var(--of-hairline); background: var(--tblr-bg-surface); color: var(--tblr-body-color); transition: border-color 0.15s, background 0.15s; }
.landing-chip:hover { border-color: rgba(var(--tblr-primary-rgb), 0.6); background: rgba(var(--tblr-primary-rgb), 0.06); }
.landing-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 28px; border: 1px solid var(--of-hairline); border-radius: var(--of-radius); background: var(--tblr-bg-surface); overflow: hidden; }
.landing-stats > div { padding: 14px 16px; }
.landing-stats > div + div { border-left: 1px solid var(--of-hairline); }
.landing-stats dt { font-size: 11.5px; font-weight: 500; color: var(--of-muted); margin-bottom: 4px; }
.landing-stats dd { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.landing-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0 0 28px; }
.landing-steps li { counter-increment: step; display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--of-hairline); font-size: 13px; }
.landing-steps li::before { content: counter(step, decimal-leading-zero); font: 500 11px/1 var(--of-mono); color: var(--tblr-primary); margin-bottom: 6px; }
.landing-steps strong { font-weight: 600; }
.landing-steps span { color: var(--of-muted); }
.landing-discord { font-size: 13px; font-weight: 500; color: var(--tblr-body-color); text-decoration: none; border-bottom: 1px solid var(--of-hairline); padding-bottom: 2px; }
.landing-discord:hover { color: var(--tblr-primary); border-color: currentColor; }
@media (max-width: 720px) { .landing-stats, .landing-steps { grid-template-columns: 1fr; } .landing-stats > div + div { border-left: 0; border-top: 1px solid var(--of-hairline); } }

/* ---- function view ---- */
.function-header { padding: 18px 24px 14px; }
.function-name { font: 600 17px/1.35 var(--of-mono); letter-spacing: -0.02em; margin: 0 0 4px; }
.function-full > summary { font-size: 12px; }
.function-actions { margin-top: 10px; gap: 6px; }
.workspace-tabs { padding-inline: 18px; gap: 2px; }
.workspace-tabs .nav-link { padding: 10px 12px; font-size: 13px; font-weight: 500; color: var(--of-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.workspace-tabs .nav-link:hover { color: var(--tblr-body-color); }
.workspace-tabs .nav-link.active { color: var(--tblr-body-color); font-weight: 600; border-bottom-color: var(--tblr-primary); }
.code-toolbar { padding: 8px 24px; gap: 8px; background: var(--tblr-bg-surface); }
.code-toolbar .form-control { height: 30px; font-size: 12.5px; }
.relation-link { border-radius: var(--of-radius-sm); }

/* ---- graph tab ---- */
.call-graph { padding: 14px 18px 18px; }
.graph-stage, .graph-inspector, .graph-preview, .graph-memory { border-radius: var(--of-radius); border-color: var(--of-hairline); }
.graph-preview { gap: 12px; box-shadow: var(--of-raise); }
.graph-side-title { font: 600 13.5px/1.35 var(--of-mono); letter-spacing: -0.015em; }
.graph-code { font-size: 11.75px; line-height: 1.6; }
.graph-legend { gap: 16px; }
.graph-legend-item { font-size: 11.5px; }

/* ---- view counter ---- */
.view-count { font: 500 11px/1 var(--of-sans); padding: 5px 10px; box-shadow: var(--of-raise); font-variant-numeric: tabular-nums; }

/* ---- small screens ---- */
@media (max-width: 640px) {
  .atlas-header .container-fluid { padding-inline: 12px; gap: 8px; }
  .brand { gap: 8px; min-width: 0; }
  .brand-mark { display: grid !important; width: 26px; height: 26px; }
  .brand .navbar-brand { font-size: 14px; white-space: nowrap; }
  .brand-discord { display: none; }
  .header-actions .btn { padding-inline: 9px; }
  .search-controls { padding: 12px 12px 0; }
  .search-box .form-control { font-size: 16px; }
}

/* ---- links front page ---- */
.empty-workspace { align-items: center; justify-content: center; }
.links-page { width: 100%; max-width: 400px; display: grid; gap: 22px; }
.links-head { text-align: center; display: grid; gap: 4px; }
.links-title { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -0.025em; }
.links-sub { margin: 0; font-size: 13px; color: var(--of-muted); }
.links-list { display: grid; gap: 8px; }
.link-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--of-hairline); border-radius: 10px; background: var(--tblr-bg-surface); color: var(--tblr-body-color); text-decoration: none; transition: border-color .15s, background .15s, transform .15s; }
.link-row:hover { border-color: rgba(var(--tblr-primary-rgb), .55); background: rgba(var(--tblr-primary-rgb), .05); text-decoration: none; color: var(--tblr-body-color); }
.link-row:active { transform: translateY(1px); }
.link-row:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; }
.link-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--tblr-bg-surface-secondary); color: var(--tblr-body-color); }
.link-text { display: grid; gap: 1px; min-width: 0; }
.link-text strong { font-size: 14px; font-weight: 600; }
.link-text span { font: 400 12.5px/1.3 var(--of-mono); color: var(--of-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-arrow { color: var(--of-muted); font-size: 15px; transition: transform .15s, color .15s; }
.link-row:hover .link-arrow { color: var(--tblr-primary); transform: translate(2px, -2px); }

/* ---- traversal animation v2: calm, one accent, no glow filters ---- */
.graph-trace .trace-path, .graph-trace .trace-ring, .graph-trace .trace-dot { display: none; }
.graph-canvas .graph-node, .graph-canvas .graph-edges { transition: opacity 260ms ease; }
.graph-canvas.is-tracing .graph-node:not(.on-trace) { opacity: 0.28; }
.graph-canvas.is-tracing .graph-edges { opacity: 0.22; }
.graph-trace .trace-line { animation: of-trace-draw cubic-bezier(.65, 0, .35, 1) forwards; opacity: 0.9; }
.graph-trace .trace-comet { animation: of-trace-comet cubic-bezier(.65, 0, .35, 1) forwards; opacity: 0; }
.graph-trace .trace-halo { opacity: 0; transform-box: fill-box; transform-origin: center; animation: of-trace-halo 420ms cubic-bezier(.2, .8, .2, 1) forwards; }
.graph-trace.trace-done, .graph-trace.trace-settled { opacity: 1; transition: none; }
.graph-trace.trace-done .trace-line, .graph-trace.trace-settled .trace-line { opacity: 0.55; transition: opacity 500ms ease; }
.graph-trace.trace-done .trace-halo, .graph-trace.trace-settled .trace-halo { opacity: 0.55; transition: opacity 500ms ease; }
.graph-trace.trace-settled .trace-line, .graph-trace.trace-settled .trace-halo { animation: none; stroke-dashoffset: 0 !important; }
@keyframes of-trace-draw { to { stroke-dashoffset: 0; } }
@keyframes of-trace-comet { 0% { opacity: 0; stroke-dashoffset: 28; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: calc(-1 * var(--len) * 1px); } }
@keyframes of-trace-halo { 0% { opacity: 0; transform: scale(1.04); } 60% { opacity: 1; } 100% { opacity: 0.9; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .graph-canvas.is-tracing .graph-node:not(.on-trace), .graph-canvas.is-tracing .graph-edges { opacity: 1; } .graph-trace .trace-line, .graph-trace .trace-halo { animation: none; opacity: .7; stroke-dashoffset: 0; } .graph-trace .trace-comet { display: none; } }
.graph-trace.trace-done .trace-halo, .graph-trace.trace-settled .trace-halo { opacity: 0.3; } .graph-trace.trace-done .trace-line, .graph-trace.trace-settled .trace-line { opacity: 0.5; }

/* ---- workspace ---- */
.ws-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; font: 600 10.5px/1 var(--of-sans); background: var(--tblr-primary); color: #fff; }
#workspace-toggle.is-on, #ws-add.is-on { border-color: rgba(var(--tblr-primary-rgb), .6) !important; background: rgba(var(--tblr-primary-rgb), .08) !important; }
.ws-panel { height: 100%; overflow: auto; padding: 22px 24px 28px; display: flex; flex-direction: column; gap: 14px; }
.ws-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ws-title { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -0.02em; }
.ws-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--of-muted); }
.ws-sub span:not(:empty) { color: var(--tblr-body-color); font-weight: 600; margin-right: 6px; }
.ws-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-empty { margin: 0; padding: 28px 18px; text-align: center; font-size: 13px; color: var(--of-muted); border: 1px dashed var(--of-hairline); border-radius: var(--of-radius); }
.ws-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--of-hairline); border-radius: var(--of-radius); background: var(--tblr-bg-surface); overflow: hidden; }
.ws-list:empty { display: none; }
.ws-row { display: grid; grid-template-columns: auto minmax(0, 1.2fr) auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; }
.ws-row + .ws-row { border-top: 1px solid var(--of-hairline); }
.ws-row .form-check-input { margin: 0; }
.ws-name { border: 0; background: none; padding: 0; text-align: left; font: 500 12.5px/1.4 var(--of-mono); color: var(--tblr-body-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-name:hover { color: var(--tblr-primary); }
.ws-addr { font: 400 11.5px/1 var(--of-mono); color: var(--of-muted); }
.ws-note { height: 28px; font-size: 12.5px; }
.ws-remove { width: 10px; height: 10px; opacity: .5; }
.ws-remove:hover { opacity: 1; }
.ws-output { display: grid; gap: 8px; }
.ws-output-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ws-progress { font-size: 12.5px; color: var(--of-muted); }
.ws-output-actions { display: flex; gap: 6px; }
.ws-code { margin: 0; max-height: 58vh; overflow: auto; padding: 14px 16px; border-radius: var(--of-radius); background: #11161f; color: #dfe5ee; font: 400 12px/1.55 var(--of-mono); white-space: pre; }
:root[data-theme="terminal"] .ws-code { background: #050805; color: #c8f7c5; }
@media (max-width: 720px) { .ws-row { grid-template-columns: auto minmax(0, 1fr) auto; } .ws-row .ws-note { grid-column: 2 / -1; } .ws-row .ws-addr { display: none; } }
/* select mode in search results */
.search-status-row { display: flex; align-items: center; gap: 6px; }
.select-mode { order: 3; margin-left: auto; padding: 0 4px; font-size: 12px; }
#search-clear { order: 4; }
.pick-bar { display: flex; gap: 6px; padding: 6px 14px; border-bottom: 1px solid var(--of-hairline); background: var(--tblr-bg-surface); }
.pick-bar .btn { flex: 1; }
.results.is-selecting .result { padding-left: 34px; position: relative; }
.results.is-selecting .result::before { content: ""; position: absolute; left: 10px; top: 9px; width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--of-hairline); background: var(--tblr-bg-surface); }
.results.is-selecting .result.is-picked { background: rgba(var(--tblr-primary-rgb), .08); }
.results.is-selecting .result.is-picked::before { border-color: var(--tblr-primary); background: var(--tblr-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.ws-panel > * { flex: none; } .ws-panel { min-width: 0; } .ws-code { max-height: 60vh; }

/* ---- workspace call graph ---- */
.ws-graph { position: relative; flex: none; height: 440px; border: 1px solid var(--of-hairline); border-radius: var(--of-radius); background: var(--tblr-bg-surface); overflow: hidden; }
.wsg-canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.wsg-canvas:active { cursor: grabbing; }
.wsg-bg { fill: transparent; }
.wsg-status { position: absolute; left: 12px; bottom: 10px; font-size: 11.5px; color: var(--of-muted); pointer-events: none; }
.wsg-edge { fill: none; stroke: var(--tblr-primary); stroke-width: 1.6; opacity: .85; }
.wsg-edge.is-ghost { stroke: var(--of-muted); stroke-width: 1; opacity: .35; }
.wsg-edge.is-jump { stroke-dasharray: 4 3; }
.wsg-arrowhead { fill: var(--of-muted); }
.wsg-node { cursor: pointer; outline: none; }
.wsg-node rect { fill: var(--tblr-bg-surface); stroke: var(--of-hairline); stroke-width: 1; transition: stroke .15s, fill .15s; }
.wsg-node.is-mine rect { fill: rgba(var(--tblr-primary-rgb), .1); stroke: rgba(var(--tblr-primary-rgb), .7); stroke-width: 1.4; }
.wsg-node.is-ghost { opacity: .55; transition: opacity .15s; }
.wsg-node.is-ghost rect { stroke-dasharray: 4 3; }
.wsg-node:hover, .wsg-node:focus-visible { opacity: 1; }
.wsg-node:hover rect, .wsg-node:focus-visible rect { stroke: var(--tblr-primary); }
.wsg-name { font: 500 12px var(--of-mono); fill: var(--tblr-body-color); }
.wsg-meta { font: 400 10.5px var(--of-sans); fill: var(--of-muted); }
.graph-inspector-actions .btn.is-on { border-color: rgba(var(--tblr-primary-rgb), .6); background: rgba(var(--tblr-primary-rgb), .08); }

/* ---- resizable panels ---- */
.of-resize { position: absolute; top: 0; bottom: 0; width: 8px; z-index: 20; cursor: col-resize; touch-action: none; }
.of-resize.is-right { right: -4px; } .of-resize.is-left { left: 0; }
.of-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; border-radius: 2px; background: transparent; transition: background .15s; }
.of-resize:hover::after, body.is-resizing .of-resize::after { background: var(--tblr-primary); }
body.is-resizing { cursor: col-resize; user-select: none; }
.search-pane { position: relative; }
/* graph side panel: narrower by default, code kept short */
.graph-body { grid-template-columns: minmax(0, 1fr) var(--graph-side, 300px) !important; }
.graph-body > :last-child { position: relative; max-height: 100%; overflow: auto; }
.graph-preview .graph-code-wrap { max-height: 260px; }
@media (max-width: 640px) { .graph-body { grid-template-columns: 1fr !important; } .of-resize { display: none; } }
#code-text.is-link .cm-content { cursor: pointer; }

/* ---- workspace: list left, graph right ---- */
.ws-panel:not([hidden]) { display: grid !important; grid-template-columns: var(--ws-list, 380px) minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); gap: 14px 16px; overflow: hidden; }
.ws-panel > .ws-head { grid-column: 1 / -1; }
.ws-panel > .ws-empty, .ws-panel > .ws-list { grid-column: 1; grid-row: 2; }
.ws-panel > .ws-list { max-height: 100%; overflow: auto; align-self: start; }
.ws-panel > .ws-output { grid-column: 1; grid-row: 3 / 5; min-height: 0; overflow: auto; align-content: start; }
.ws-panel > .ws-output .ws-code { max-height: none; }
.ws-panel > .ws-graph { grid-column: 2; grid-row: 2 / 5; height: auto; min-height: 320px; }
.ws-panel .ws-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.ws-panel .ws-row .ws-note { grid-column: 2 / -1; }
.ws-panel .ws-row .ws-addr { display: none; }
:root:not([data-hide-addr]) .ws-panel .ws-row .ws-addr { display: inline; }
@media (max-width: 900px) { .ws-panel:not([hidden]) { display: flex !important; overflow: auto; } .ws-panel > .ws-graph { height: 440px; } }
/* ---- floating code windows ---- */
.of-float { position: fixed; width: 560px; height: 420px; min-width: 300px; min-height: 160px; max-width: 96vw; max-height: 92vh; display: flex; flex-direction: column; resize: both; overflow: hidden; border: 1px solid var(--of-hairline); border-radius: 10px; background: var(--tblr-bg-surface); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.of-float-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--of-hairline); cursor: move; user-select: none; touch-action: none; }
.of-float-title { flex: 1; min-width: 0; font: 600 12.5px var(--of-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-float-tabs { display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: var(--tblr-bg-surface-secondary); }
.of-float-tab, .of-float-btn { border: 0; background: none; color: var(--of-muted); font: 500 12px var(--of-sans); padding: 3px 8px; border-radius: 5px; cursor: pointer; }
.of-float-tab.is-on { background: var(--tblr-bg-surface); color: var(--tblr-body-color); }
.of-float-btn:hover, .of-float-tab:hover { color: var(--tblr-body-color); }
.of-float-x { font-size: 16px; line-height: 1; }
.of-float-code { flex: 1; margin: 0; overflow: auto; padding: 12px 14px; background: #11161f; color: #dfe5ee; font: 400 12px/1.55 var(--of-mono); white-space: pre; }
:root[data-theme="terminal"] .of-float-code { background: #050805; color: #c8f7c5; }

/* ---- plainer look: square-ish corners, no glow, no lifted cards ---- */
:root { --of-radius: 6px; --of-radius-sm: 4px; }
:root[data-bs-theme="dark"] { --of-pop: 0 10px 30px rgba(0,0,0,.45); }
.btn-primary { box-shadow: none !important; }
.btn:focus-visible { box-shadow: none; outline: 2px solid rgba(var(--tblr-primary-rgb), .6); outline-offset: 1px; }

/* homepage links: a plain list, not cards */
.links-page { max-width: 420px; gap: 18px; justify-items: stretch; }
.links-head { text-align: left; }
.links-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.links-sub { margin: 2px 0 0; }
.links-list { display: grid; gap: 0; border-top: 1px solid var(--of-hairline); }
.link-row { grid-template-columns: 22px 1fr auto; gap: 14px; padding: 13px 2px; border: 0; border-bottom: 1px solid var(--of-hairline); border-radius: 0; background: none; transition: color .12s; }
.link-row:hover { background: none; border-color: var(--of-hairline); color: var(--tblr-body-color); }
.link-row:active { transform: none; }
.link-icon { width: 22px; height: 22px; border-radius: 0; background: none; color: var(--of-muted); }
.link-icon svg { width: 18px; height: 18px; }
.link-row:hover .link-icon { color: var(--tblr-body-color); }
.link-text { display: flex; align-items: baseline; gap: 10px; }
.link-text strong { font-weight: 550; }
.link-text span { font: 400 12px var(--of-mono); color: var(--of-muted); }
.link-arrow { display: grid; place-items: center; color: var(--of-muted); transition: color .12s, transform .12s; }
.link-row:hover .link-arrow { color: var(--tblr-body-color); transform: translate(2px, -2px); }

/* workspace rows: one clean line each */
.ws-panel .ws-list { border-radius: var(--of-radius); }
.ws-panel .ws-row { grid-template-columns: 16px minmax(0, 1fr) minmax(0, .8fr) 24px; gap: 10px; padding: 7px 8px 7px 12px; min-height: 38px; }
.ws-panel .ws-row .ws-note { grid-column: auto; }
.ws-panel .ws-row:hover { background: rgba(var(--tblr-primary-rgb), .04); }
.ws-check { appearance: none; -webkit-appearance: none; margin: 0; width: 16px; height: 16px; border: 1.5px solid var(--of-muted); border-radius: 3px; background: transparent; cursor: pointer; display: grid; place-items: center; transition: background .1s, border-color .1s; }
.ws-check:hover { border-color: var(--tblr-body-color); }
.ws-check:checked { border-color: var(--tblr-primary); background: var(--tblr-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.2l3 3 6-6.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.ws-check:focus-visible { outline: 2px solid rgba(var(--tblr-primary-rgb), .6); outline-offset: 2px; }
.ws-panel .ws-note { height: 26px; padding: 2px 8px; border-color: transparent; background: transparent; font-size: 12px; color: var(--of-muted); }
.ws-panel .ws-note:hover { border-color: var(--of-hairline); }
.ws-panel .ws-note:focus { border-color: rgba(var(--tblr-primary-rgb), .5); background: var(--tblr-bg-surface); color: var(--tblr-body-color); box-shadow: none; }
.ws-remove { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--of-muted); opacity: 0; cursor: pointer; transition: opacity .1s, color .1s, background .1s; }
.ws-row:hover .ws-remove, .ws-remove:focus-visible { opacity: 1; }
.ws-remove:hover { color: #e5484d; background: rgba(229, 72, 77, .1); }
@media (hover: none) { .ws-remove { opacity: .7; } }

/* workspace graph: cleaner boxes, badge outside the box */
.wsg-node rect { rx: 5px; }
.wsg-node.is-ghost rect { stroke-dasharray: none; fill: var(--tblr-bg-surface); }
.wsg-node.is-ghost { opacity: .6; }
.wsg-badge { font: 600 10.5px var(--of-mono); fill: var(--of-muted); }
.wsg-edge.is-ghost { opacity: .22; }
.link-row:hover .link-arrow { transform: translateX(3px); }

/* ---- Luau source ---- */
.luau-btn { color: #7aa2f7; border-color: rgba(122,162,247,.35); }
.luau-btn:hover { color: #9db8ff; border-color: rgba(122,162,247,.7); background: rgba(122,162,247,.08); }
.of-float-split { flex: 1; min-height: 0; display: flex; }
.of-float-split > .of-float-code { flex: 1 1 0; min-width: 0; }
.of-float.has-luau { width: 980px; }
.of-float.is-luau .luau-pane { flex: 1; min-height: 0; border-left: 0; }
.luau-pane { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--of-hairline); background: #0f1420; }
.luau-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; border-bottom: 1px solid rgba(122,162,247,.18); font: 500 11.5px var(--of-sans); }
.luau-label { color: #7aa2f7; font-weight: 600; }
.luau-head a { color: #8b95a7; font-family: var(--of-mono); text-decoration: none; }
.luau-head a:hover { color: #c0caf5; text-decoration: underline; }
.luau-code { flex: 1; margin: 0; overflow: auto; padding: 12px 14px; color: #c0caf5; font: 400 12px/1.55 var(--of-mono); white-space: pre; }
.lx-kw { color: #bb9af7; } .lx-str { color: #9ece6a; } .lx-num { color: #ff9e64; } .lx-com { color: #565f89; font-style: italic; }
:root[data-theme="vanilla"] .luau-pane, :root:not([data-theme]) .luau-pane { background: #0f1420; }
.of-float.has-luau { max-width: calc(100vw - 24px); }
.of-float.has-luau, .of-float.is-luau { height: 520px; }
/* many workspace functions: the list scrolls on its own so the code below stays in reach */
.ws-panel > .ws-list { max-height: 34vh; overflow: auto; }
.ws-panel:has(.ws-output:not([hidden])) > .ws-list { max-height: 22vh; }
.ws-panel > .ws-output { display: flex; flex-direction: column; overflow: hidden; }
.ws-panel > .ws-output .ws-output-bar { position: sticky; top: 0; z-index: 1; padding: 4px 0; background: var(--tblr-body-bg); }
.ws-panel > .ws-output .ws-code { flex: 1; min-height: 120px; overflow: auto; }
@media (max-width: 900px) { .ws-panel > .ws-list { max-height: 40vh; } .ws-panel > .ws-output .ws-code { max-height: 60vh; } }

/* graph boxes are opaque so lines always pass underneath */
.wsg-node .wsg-base { fill: var(--tblr-bg-surface); stroke: none; }
.wsg-node rect.wsg-box { fill: var(--tblr-bg-surface); stroke: var(--of-hairline); stroke-width: 1; }
.wsg-node.is-mine rect.wsg-box { fill: rgba(var(--tblr-primary-rgb), .12); stroke: rgba(var(--tblr-primary-rgb), .7); stroke-width: 1.4; }
.wsg-node.is-ghost { opacity: 1; }
.wsg-node.is-ghost rect.wsg-box { stroke-opacity: .55; }
.wsg-node.is-ghost text { opacity: .6; }
.wsg-node.is-ghost:hover text, .wsg-node.is-ghost:focus-visible text { opacity: 1; }
.wsg-node:hover rect.wsg-box, .wsg-node:focus-visible rect.wsg-box { stroke: var(--tblr-primary); stroke-opacity: 1; }
.wsg-head { fill: var(--of-muted); stroke: none; opacity: .85; }
.wsg-head.is-ghost { opacity: .25; }
.wsg-edge { vector-effect: non-scaling-stroke; }