ltcai 4.0.0 → 4.1.0

package/static/css/reference/graph.css

@@ -1,1016 +0,0 @@
-/* Lattice AI — graph page (graph.html, body.lattice-ref-graph). Token-native. */
-/* ============================================================
-   GRAPH PAGE  (graph.html)
-   ============================================================ */
-    * { box-sizing: border-box; }
-    html, body.lattice-ref-graph { height: 100%; }
-    body.lattice-ref-graph {
-      margin: 0;
-      overflow: hidden;
-      color: var(--text);
-      background: var(--app-bg);
-      font-family: "SF Pro Display", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
-    }
-
-    body.lattice-ref-graph .app {
-      min-height: 0;
-      height: 100dvh;
-      overflow: hidden;
-    }
-
-    body.lattice-ref-graph .stage {
-      height: calc(100dvh - 138px);
-      max-height: calc(100dvh - 138px);
-      min-height: 0;
-    }
-
-    body.lattice-ref-graph .app > aside:not(.reference-rail) {
-      height: calc(100dvh - 138px);
-      max-height: calc(100dvh - 138px);
-      min-height: 0;
-      overflow-y: auto;
-      overscroll-behavior: contain;
-      padding-bottom: max(28px, env(safe-area-inset-bottom));
-      scrollbar-gutter: stable;
-    }
-
-    .app {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) 360px;
-      height: 100vh;
-    }
-
-    .stage {
-      position: relative;
-      min-width: 0;
-      border-right: 1px solid var(--line);
-      background:
-        radial-gradient(circle, rgba(111,66,232,0.18) 1px, transparent 1.9px),
-        linear-gradient(116deg, transparent 0 43%, rgba(111,66,232,0.05) 43.1%, transparent 43.28% 100%),
-        linear-gradient(28deg, transparent 0 61%, rgba(180,160,255,0.07) 61.1%, transparent 61.28% 100%);
-      background-size: 32px 32px, 100% 100%, 100% 100%;
-      background-position: 10px 10px, 0 0, 0 0;
-    }
-
-    body.lattice-ref-graph .stage {
-      background:
-        radial-gradient(circle, var(--graph-grid) 1px, transparent 1.9px),
-        linear-gradient(116deg, transparent 0 43%, rgba(111,66,232,0.05) 43.1%, transparent 43.28% 100%),
-        linear-gradient(180deg, var(--graph-bg) 0%, var(--surface) 100%);
-      background-size: 32px 32px, 100% 100%, 100% 100%;
-      background-position: 10px 10px, 0 0, 0 0;
-    }
-
-    :root[data-lt-theme="dark"] body.lattice-ref-graph {
-      background: var(--bg);
-    }
-
-    :root[data-lt-theme="dark"] body.lattice-ref-graph .app,
-    :root[data-lt-theme="dark"] body.lattice-ref-graph .app > aside:not(.reference-rail) {
-      background: var(--bg);
-    }
-
-    :root[data-lt-theme="dark"] body.lattice-ref-graph .stage {
-      background:
-        radial-gradient(circle, rgba(160, 170, 230, 0.11) 1px, transparent 1.9px),
-        linear-gradient(116deg, transparent 0 43%, rgba(167,139,250,0.08) 43.1%, transparent 43.28% 100%),
-        radial-gradient(circle at 72% 18%, rgba(34, 211, 238, 0.08), transparent 28%),
-        linear-gradient(180deg, #0b0b1e 0%, #10122c 100%);
-      border-color: rgba(160, 170, 230, 0.20);
-      box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.05), 0 18px 52px rgba(0, 0, 0, 0.40);
-    }
-
-    :root[data-lt-theme="dark"] body.lattice-ref-graph .stage::before {
-      color: var(--text);
-    }
-
-    :root[data-lt-theme="dark"] body.lattice-ref-graph .search-shell,
-    :root[data-lt-theme="dark"] body.lattice-ref-graph .toolbar,
-    :root[data-lt-theme="dark"] body.lattice-ref-graph .graph-minimap,
-    :root[data-lt-theme="dark"] body.lattice-ref-graph .detail-wrap {
-      background: rgba(22, 22, 58, 0.96);
-      border-color: rgba(160, 170, 230, 0.22);
-      box-shadow: 0 18px 46px rgba(0, 0, 0, 0.46);
-    }
-
-    :root[data-lt-theme="dark"] body.lattice-ref-graph .search-input,
-    :root[data-lt-theme="dark"] body.lattice-ref-graph .local-source-input input {
-      background: rgba(255, 255, 255, 0.06);
-      border-color: rgba(160, 170, 230, 0.22);
-      color: var(--text);
-    }
-
-    :root[data-lt-theme="dark"] body.lattice-ref-graph .search-input::placeholder,
-    :root[data-lt-theme="dark"] body.lattice-ref-graph .local-source-input input::placeholder {
-      color: rgba(226, 232, 255, 0.48);
-    }
-
-    canvas {
-      display: block;
-      width: 100%;
-      height: 100%;
-      cursor: grab;
-    }
-
-    canvas.panning { cursor: grabbing; }
-
-    .search-shell,
-    .toolbar {
-      position: absolute;
-      z-index: 20;
-      border: 1px solid var(--line);
-      background: var(--panel);
-      backdrop-filter: none; /* glass removed v3.5.0 */
-      box-shadow: var(--shadow);
-    }
-
-    .search-shell {
-      top: 16px;
-      left: 16px;
-      width: min(360px, calc(100% - 32px));
-      border-radius: 10px;
-      overflow: hidden;
-    }
-
-    .search-head {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      padding: 14px 16px 10px;
-      border-bottom: 1px solid rgba(111,66,232,0.10);
-    }
-
-    .search-title {
-      display: flex;
-      flex-direction: column;
-      gap: 3px;
-    }
-
-    .search-title strong {
-      font-size: 14px;
-      font-weight: 700;
-      letter-spacing: 0.01em;
-    }
-
-    .search-title span {
-      font-size: 12px;
-      color: var(--muted);
-    }
-
-    .search-count {
-      flex-shrink: 0;
-      font-size: 11px;
-      color: #fff;
-      background: linear-gradient(135deg, var(--accent), #9a78f0);
-      border-radius: 999px;
-      padding: 5px 10px;
-      font-weight: 700;
-    }
-
-    .search-input-wrap {
-      padding: 12px 16px 10px;
-    }
-
-    .search-input-row {
-      display: flex;
-      gap: 8px;
-      align-items: center;
-    }
-
-    .search-input {
-      flex: 1;
-      height: 42px;
-      border-radius: 12px;
-      border: 1px solid var(--line-strong);
-      background: var(--input);
-      color: var(--text);
-      padding: 0 14px;
-      font-size: 14px;
-      outline: none;
-    }
-
-    .search-input:focus {
-      border-color: rgba(111,66,232,0.55);
-      box-shadow: 0 0 0 4px rgba(111,66,232,0.09);
-    }
-
-    .icon-btn,
-    .tb-btn {
-      height: 42px;
-      border-radius: 8px;
-      border: 1px solid var(--line-strong);
-      background: var(--surface-2);
-      color: var(--text);
-      cursor: pointer;
-      font-size: 13px;
-      transition: 140ms ease;
-    }
-
-    .icon-btn {
-      width: 42px;
-      flex-shrink: 0;
-      font-size: 16px;
-    }
-
-    .icon-btn:hover,
-    .tb-btn:hover {
-      transform: translateY(-1px);
-      border-color: rgba(111,66,232,0.45);
-      color: var(--accent);
-      background: rgba(111,66,232,0.07);
-    }
-
-    .search-results {
-      max-height: min(420px, calc(100vh - 180px));
-      overflow-y: auto;
-      padding: 0 8px 10px;
-    }
-
-    .search-empty,
-    .search-loading {
-      margin: 0;
-      padding: 14px 12px 16px;
-      color: var(--muted);
-      font-size: 13px;
-      line-height: 1.65;
-    }
-
-    .search-list {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      padding: 0 8px 8px;
-    }
-
-    .search-item {
-      width: 100%;
-      text-align: left;
-      border: 1px solid rgba(111,66,232,0.10);
-      border-radius: 8px;
-      background: var(--surface-2);
-      color: var(--text);
-      padding: 12px 12px 13px;
-      cursor: pointer;
-      transition: 140ms ease;
-    }
-
-    .search-item:hover,
-    .search-item.active {
-      border-color: rgba(111,66,232,0.34);
-      background: rgba(111,66,232,0.07);
-      transform: translateY(-1px);
-    }
-
-    .search-item-top {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-bottom: 6px;
-    }
-
-    .search-type {
-      display: inline-flex;
-      align-items: center;
-      border-radius: 999px;
-      padding: 4px 10px;
-      font-size: 11px;
-      font-weight: 700;
-      color: var(--text);
-    }
-
-    .search-item-title {
-      font-size: 13px;
-      font-weight: 700;
-      letter-spacing: 0.01em;
-      color: var(--text);
-    }
-
-    .search-item-summary {
-      font-size: 12px;
-      color: var(--muted);
-      line-height: 1.55;
-      margin: 0 0 8px;
-      word-break: break-word;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-
-    .search-item-meta {
-      font-size: 11px;
-      color: var(--faint);
-      display: flex;
-      gap: 10px;
-      flex-wrap: wrap;
-    }
-
-    .toolbar {
-      top: 16px;
-      right: 16px;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      padding: 8px;
-      border-radius: 10px;
-      max-width: min(760px, calc(100% - 32px));
-    }
-
-    .tb-btn {
-      padding: 0 14px;
-      min-width: 72px;
-      white-space: nowrap;
-    }
-
-    #tooltip {
-      position: fixed;
-      z-index: 50;
-      max-width: 300px;
-      padding: 8px 11px;
-      border-radius: 10px;
-      border: 1px solid rgba(111,66,232,0.18);
-      background: var(--surface-elevated);
-      color: var(--text);
-      box-shadow: var(--shadow);
-      font-size: 12px;
-      line-height: 1.45;
-      pointer-events: none;
-      display: none;
-      word-break: break-word;
-    }
-
-    aside {
-      display: flex;
-      flex-direction: column;
-      background: var(--surface);
-      border-left: 1px solid var(--accent-soft);
-      overflow: hidden;
-    }
-
-    .sidebar-head {
-      padding: 18px 18px 12px;
-      border-bottom: 1px solid rgba(111,66,232,0.10);
-    }
-
-    .eyebrow {
-      color: var(--accent);
-      font-size: 11px;
-      font-weight: 700;
-      letter-spacing: 0.12em;
-      text-transform: uppercase;
-      margin-bottom: 8px;
-    }
-
-    h1 {
-      margin: 0;
-      font-size: 22px;
-      line-height: 1.1;
-      letter-spacing: -0.02em;
-    }
-
-    .sidebar-sub {
-      margin: 10px 0 0;
-      color: var(--muted);
-      font-size: 13px;
-      line-height: 1.65;
-    }
-
-    .stats-row {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 10px;
-      margin-top: 14px;
-    }
-
-    .stat {
-      border: 1px solid rgba(111,66,232,0.16);
-      border-radius: 8px;
-      background: var(--surface-2);
-      padding: 12px 13px;
-      color: var(--text);
-    }
-
-    .stat strong {
-      display: block;
-      font-size: 24px;
-      line-height: 1;
-      margin-bottom: 5px;
-    }
-
-    .stat span {
-      display: block;
-      font-size: 11px;
-      color: var(--muted);
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-    }
-
-    .section {
-      padding: 16px 18px 14px;
-      flex-shrink: 0;
-    }
-
-    .section-label {
-      color: var(--accent);
-      font-size: 11px;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-      font-weight: 700;
-      margin-bottom: 10px;
-    }
-
-    .legend-grid,
-    .filter-grid {
-      display: flex;
-      flex-direction: column;
-      gap: 7px;
-    }
-
-    .local-source-panel {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-
-    .local-source-notice {
-      border: 1px solid rgba(13,148,136,0.20);
-      border-radius: 8px;
-      background: rgba(13,148,136,0.07);
-      color: var(--success);
-      padding: 9px 10px;
-      font-size: 12px;
-      line-height: 1.5;
-    }
-
-    .local-source-input {
-      display: flex;
-      gap: 8px;
-      align-items: center;
-    }
-
-    .local-source-input input {
-      min-width: 0;
-      flex: 1;
-      height: 38px;
-      border-radius: 8px;
-      border: 1px solid rgba(111,66,232,0.16);
-      background: var(--input);
-      color: var(--text);
-      padding: 0 10px;
-      font-size: 12px;
-      outline: none;
-    }
-
-    .local-source-input input:focus {
-      border-color: rgba(111,66,232,0.42);
-      box-shadow: 0 0 0 3px rgba(111,66,232,0.08);
-    }
-
-    .local-root-list,
-    .local-tree-list,
-    .local-source-list {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-      max-height: min(150px, 22dvh);
-      overflow-y: auto;
-      padding-right: 2px;
-    }
-
-    .local-root-btn,
-    .local-tree-row,
-    .local-source-row {
-      width: 100%;
-      border: 1px solid rgba(111,66,232,0.13);
-      border-radius: 8px;
-      background: var(--surface-2);
-      color: var(--text);
-      padding: 8px 9px;
-      display: grid;
-      grid-template-columns: 18px minmax(0, 1fr) auto;
-      gap: 8px;
-      align-items: center;
-      text-align: left;
-      font-size: 12px;
-    }
-
-    .local-root-btn {
-      cursor: pointer;
-    }
-
-    .local-root-btn:hover,
-    .local-root-btn.active {
-      border-color: rgba(111,66,232,0.34);
-      background: rgba(111,66,232,0.07);
-    }
-
-    .local-source-main,
-    .local-tree-main {
-      min-width: 0;
-    }
-
-    .local-source-main strong,
-    .local-tree-main strong {
-      display: block;
-      font-size: 12px;
-      line-height: 1.25;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .local-source-main span,
-    .local-tree-main span {
-      display: block;
-      color: var(--faint);
-      font-size: 11px;
-      line-height: 1.35;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .local-source-actions {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 7px;
-    }
-
-    .local-source-btn {
-      min-width: 0;
-      height: 36px;
-      border: 1px solid rgba(111,66,232,0.18);
-      border-radius: 8px;
-      background: var(--surface-2);
-      color: var(--text);
-      cursor: pointer;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: 6px;
-      font-size: 12px;
-      font-weight: 650;
-    }
-
-    .local-source-btn:hover {
-      border-color: rgba(111,66,232,0.42);
-      color: var(--accent);
-      background: rgba(111,66,232,0.07);
-    }
-
-    .local-source-btn.primary {
-      grid-column: 1 / -1;
-      background: linear-gradient(135deg, var(--accent), #7b61ff);
-      color: #fff;
-      border-color: rgba(111,66,232,0.3);
-    }
-
-    .local-source-btn.primary:hover {
-      color: #fff;
-      background: linear-gradient(135deg, #5f35d8, #6b51ef);
-      box-shadow: 0 8px 20px rgba(111,66,232,0.22);
-    }
-
-    .local-source-btn:disabled {
-      cursor: not-allowed;
-      opacity: 0.55;
-      transform: none;
-    }
-
-    .local-option-row {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 7px;
-    }
-
-    .local-option-btn {
-      min-width: 0;
-      height: 36px;
-      border: 1px solid rgba(111,66,232,0.18);
-      border-radius: 8px;
-      background: var(--surface-2);
-      color: var(--muted);
-      cursor: pointer;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: 6px;
-      padding: 0 9px;
-      font-size: 12px;
-      font-weight: 650;
-      line-height: 1;
-      text-align: center;
-      white-space: nowrap;
-    }
-
-    .local-option-btn span {
-      min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .local-option-btn:hover {
-      border-color: rgba(111,66,232,0.42);
-      color: var(--accent);
-      background: rgba(111,66,232,0.07);
-    }
-
-    .local-option-btn.active {
-      border-color: rgba(111,66,232,0.48);
-      background: rgba(111,66,232,0.11);
-      color: var(--accent);
-      box-shadow: inset 0 0 0 1px var(--accent-soft);
-    }
-
-    .local-audit-grid {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 6px;
-    }
-
-    .local-audit-stat {
-      border: 1px solid rgba(111,66,232,0.13);
-      border-radius: 8px;
-      background: var(--surface-2);
-      padding: 8px 7px;
-      min-width: 0;
-    }
-
-    .local-audit-stat strong {
-      display: block;
-      font-size: 15px;
-      line-height: 1.05;
-    }
-
-    .local-audit-stat span {
-      display: block;
-      margin-top: 4px;
-      color: var(--faint);
-      font-size: 10px;
-      line-height: 1.2;
-    }
-
-    .local-status-line {
-      color: var(--muted);
-      font-size: 12px;
-      line-height: 1.45;
-      word-break: break-word;
-    }
-
-    .local-status-line.error {
-      color: #a53131;
-    }
-
-    .local-permission {
-      border: 1px solid rgba(245,158,11,0.28);
-      background: rgba(245,158,11,0.09);
-      border-radius: 8px;
-      padding: 9px;
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
-
-    .legend-item,
-    .filter-item {
-      display: flex;
-      align-items: center;
-      gap: 9px;
-      min-height: 26px;
-      font-size: 12px;
-      min-width: 0;
-    }
-
-    .filter-item {
-      cursor: pointer;
-      user-select: none;
-    }
-
-    .filter-item input[type="checkbox"] {
-      width: 14px;
-      height: 14px;
-      margin: 0;
-      accent-color: var(--accent);
-      cursor: pointer;
-    }
-
-    .dot {
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      flex-shrink: 0;
-      box-shadow: 0 0 0 3px rgba(111,66,232,0.08);
-    }
-
-    .legend-line {
-      width: 18px;
-      height: 0;
-      border-top: 2px solid currentColor;
-      opacity: 0.8;
-      flex-shrink: 0;
-    }
-
-    .filter-name,
-    .legend-name {
-      flex: 1;
-      min-width: 0;
-      color: var(--text);
-      font-size: 13px;
-      font-weight: 500;
-      overflow-wrap: anywhere;
-    }
-
-    .filter-count,
-    .legend-meta {
-      color: var(--muted);
-      font-size: 12px;
-      font-weight: 600;
-      text-align: right;
-      white-space: nowrap;
-    }
-
-    .detail-wrap {
-      flex: 0 0 auto;
-      min-height: auto;
-      overflow: visible;
-      padding: 18px 18px max(24px, env(safe-area-inset-bottom));
-    }
-
-    .type-badge {
-      display: inline-flex;
-      align-items: center;
-      border-radius: 999px;
-      padding: 5px 11px;
-      font-size: 11px;
-      font-weight: 700;
-      color: var(--text);
-      margin-bottom: 10px;
-    }
-
-    .detail-title {
-      font-size: 19px;
-      line-height: 1.28;
-      font-weight: 750;
-      margin-bottom: 8px;
-      letter-spacing: -0.01em;
-      overflow-wrap: anywhere;
-    }
-
-    .detail-summary {
-      color: var(--muted);
-      font-size: 13px;
-      line-height: 1.7;
-      white-space: pre-wrap;
-      word-break: break-word;
-      margin-bottom: 14px;
-    }
-
-    .metric-grid {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 10px;
-      margin-bottom: 14px;
-    }
-
-    .metric-card {
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      padding: 11px 12px;
-      background: var(--card);
-      color: var(--text);
-    }
-
-    .metric-card strong {
-      display: block;
-      font-size: 18px;
-      line-height: 1;
-      margin-bottom: 5px;
-    }
-
-    .metric-card span {
-      display: block;
-      font-size: 11px;
-      color: var(--muted);
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-    }
-
-    .meta-block {
-      border: 1px solid var(--accent-soft);
-      border-radius: 8px;
-      background: var(--surface-2);
-      padding: 12px;
-      color: var(--muted);
-      font-size: 12px;
-      line-height: 1.65;
-      white-space: pre-wrap;
-      word-break: break-word;
-      overflow-wrap: anywhere;
-      max-height: min(42dvh, 460px);
-      overflow: auto;
-    }
-
-    .jump-btn {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      margin: 0 0 14px;
-      padding: 8px 14px;
-      border-radius: 999px;
-      text-decoration: none;
-      font-size: 12px;
-      font-weight: 700;
-      color: #fff;
-      background: linear-gradient(135deg, var(--accent), var(--accent-2));
-      box-shadow: 0 8px 22px rgba(111,66,232,0.22);
-    }
-
-    .jump-btn:hover { filter: brightness(1.04); }
-
-    .jump-btn.secondary {
-      border: 1px solid rgba(111,66,232,0.20);
-      color: var(--text);
-      background: var(--surface-2);
-      box-shadow: none;
-      cursor: pointer;
-      font: inherit;
-      font-size: 12px;
-      font-weight: 700;
-    }
-
-    .detail-actions {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      margin-bottom: 14px;
-    }
-
-    .related-node-list {
-      display: grid;
-      gap: 7px;
-      margin-bottom: 14px;
-    }
-
-    .related-node-btn {
-      width: 100%;
-      min-width: 0;
-      display: grid;
-      grid-template-columns: 18px minmax(0, 1fr) auto;
-      align-items: center;
-      gap: 8px;
-      border: 1px solid rgba(111,66,232,0.13);
-      border-radius: 8px;
-      background: var(--surface-2);
-      color: var(--text);
-      padding: 8px 10px;
-      text-align: left;
-      cursor: pointer;
-    }
-
-    .related-node-btn:hover {
-      border-color: rgba(111,66,232,0.34);
-      background: rgba(111,66,232,0.07);
-    }
-
-    .related-node-btn strong {
-      min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-size: 12px;
-    }
-
-    .related-node-btn em {
-      color: var(--faint);
-      font-size: 11px;
-      font-style: normal;
-      white-space: nowrap;
-    }
-
-    .focus-chip {
-      position: absolute;
-      z-index: 21;
-      left: 16px;
-      bottom: 16px;
-      max-width: min(560px, calc(100% - 32px));
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      padding: 8px;
-      border: 1px solid var(--line);
-      border-radius: 10px;
-      background: var(--surface-2);
-      box-shadow: var(--shadow);
-      backdrop-filter: none; /* glass removed v3.5.0 */
-    }
-
-    .focus-chip span {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      border-radius: 999px;
-      background: rgba(111,66,232,0.08);
-      color: var(--text);
-      padding: 5px 10px;
-      font-size: 11px;
-      font-weight: 800;
-      max-width: 260px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .search-shell.search-open .search-results {
-      display: block;
-    }
-
-    .empty-hint {
-      margin: 0;
-      color: var(--muted);
-      font-size: 13px;
-      line-height: 1.8;
-    }
-
-    @media (max-width: 900px) {
-      body.lattice-ref-graph {
-        overflow-y: auto;
-      }
-
-      body.lattice-ref-graph .reference-rail {
-        display: none;
-      }
-
-      body.lattice-ref-graph {
-        grid-template-columns: 1fr;
-      }
-
-      body.lattice-ref-graph .app {
-        height: auto;
-        min-height: 100dvh;
-        overflow: visible;
-        grid-template-columns: 1fr;
-        grid-template-rows: minmax(420px, 58dvh) auto;
-      }
-
-      body.lattice-ref-graph .stage {
-        height: auto;
-        max-height: none;
-        min-height: 420px;
-        margin: 84px 12px 12px;
-      }
-
-      body.lattice-ref-graph .stage::before {
-        top: 26px;
-        left: 58px;
-        font-size: 24px;
-      }
-
-      body.lattice-ref-graph .stage::after {
-        top: 22px;
-        left: 14px;
-      }
-
-      body.lattice-ref-graph .search-shell {
-        top: -60px;
-        left: 60px;
-        right: 12px;
-        width: auto;
-      }
-
-      body.lattice-ref-graph .app > aside:not(.reference-rail) {
-        height: auto;
-        max-height: none;
-        min-height: 0;
-        margin: 0 12px 24px;
-        overflow: visible;
-        padding-bottom: max(18px, env(safe-area-inset-bottom));
-      }
-
-      body.lattice-ref-graph .detail-wrap {
-        flex: none;
-        overflow: visible;
-      }
-
-      .app {
-        grid-template-columns: 1fr;
-        grid-template-rows: 1fr 360px;
-      }
-
-      .stage {
-        border-right: 0;
-        border-bottom: 1px solid var(--line);
-      }
-
-      .search-shell {
-        width: calc(100% - 32px);
-      }
-
-      .toolbar {
-        top: auto;
-        bottom: 16px;
-        right: 16px;
-      }
-    }