.object-inspector-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  overflow: hidden;
  touch-action: pan-y;
}
.object-inspector-layer:focus { outline: none; }
.object-inspector-layer:focus-visible:not([aria-activedescendant]) { outline: 2px solid #397ce8; outline-offset: 4px; }
.oi-hit-area { fill: transparent; stroke: transparent; stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; }
.oi-hit-line { stroke: transparent; stroke-width: 14; vector-effect: non-scaling-stroke; cursor: pointer; }
.oi-selection { fill: rgb(48 117 226 / 4%); stroke: #3075e2; stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .oi-target:hover .oi-hit-area { stroke: rgb(48 117 226 / 65%); fill: rgb(48 117 226 / 4%); }
  .oi-target:hover .oi-hit-line { stroke: rgb(48 117 226 / 20%); stroke-width: 8; }
}
.object-inspector-panel { color: #22252a; min-width: 0; font-size: 12px; text-align: left; }
.oi-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 25px; }
.oi-panel-heading h3 { font-size: 12px; font-weight: 600; margin: 0; letter-spacing: 0; }
.oi-readonly { font-size: 10px; color: #676f7d; white-space: nowrap; }
.oi-kind { display: block; color: #6b737c; font-size: 10px; letter-spacing: .045em; text-transform: uppercase; margin-bottom: 8px; }
.oi-object-title { font-size: 14px; line-height: 1.45; font-weight: 500; letter-spacing: -.01em; margin: 0 0 10px; overflow-wrap: anywhere; }
.oi-meta, .oi-empty { color: #676f7d; font-size: 11px; line-height: 1.65; margin: 0 0 14px; }
.oi-text-content { white-space: pre-wrap; user-select: text; color: #30353c; font-size: 12px; line-height: 1.6; margin: 16px 0 24px; overflow-wrap: anywhere; }
.oi-layers { border-top: 1px solid #e5e7eb; margin-top: 24px; }
.oi-layers summary { padding: 13px 0; cursor: pointer; font-size: 11px; color: #646b74; transition: color 140ms ease; }
.oi-layer-list { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.oi-layer { display: flex; flex-direction: column; gap: 3px; width: 100%; border: 0; border-radius: 5px; background: transparent; color: #343942; text-align: left; padding: 9px; cursor: pointer; }
.oi-layer[aria-pressed='true'] { background: #eaf1ff; color: #235bb1; }
.oi-layer:focus-visible { outline: 2px solid #3075e2; outline-offset: -2px; }
.oi-layer-kind { font-size: 9px; color: #676f7d; }
.oi-layer-name { font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.oi-table-scroll { overflow: auto; margin: 16px 0; }
.oi-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11px; }
.oi-table caption { text-align: left; font-size: 10px; color: #676f7d; padding-bottom: 8px; }
.oi-table th, .oi-table td { padding: 7px 5px; border-bottom: 1px solid #e6e8eb; vertical-align: top; font-weight: 400; }
.oi-table td { text-align: right; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .oi-layers summary:hover { color: #343942; }
  .oi-layer:hover:not([aria-pressed='true']) { background: #f0f3f8; }
  .oi-layer:hover[aria-pressed='true'] { background: #e0ebff; }
}
