[data-ui] .seg {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 3px;
  background: var(--surface-2);
  border-radius: 6px;
  position: relative;
  isolation: isolate;
}

[data-ui] .seg button {
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 4px;
  font-size: var(--ui);
  font-weight: 600;
  color: var(--muted);
  transition: color var(--t-hover) ease;
  white-space: nowrap;
}

[data-ui] .seg button[aria-checked="true"] {
  color: var(--ink);
}

[data-ui] .seg .seg-thumb {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--n, 2));
  border-radius: 4px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--control-line);
  transform: translateX(calc(var(--k, 0) * 100%));
  transition: transform 320ms var(--ease-out);
}

[data-ui] .stack {
  display: grid;
}

[data-ui] .stack>* {
  grid-area: 1 / 1;
  transition: opacity 700ms var(--ease-out), visibility 700ms, transform 700ms var(--ease-out);
}

[data-ui] .stack>[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
}

.js [data-ui] .stack:not(.is-ready)> :not(:first-child) {
  opacity: 0;
  visibility: hidden;
}

html:not(.js) [data-ui] .stack {
  gap: 16px;
}

html:not(.js) [data-ui] .stack>* {
  grid-area: auto;
}

[data-ui] mark {
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 2px;
  padding: 0 2px;
}

[data-ui].panel {
  background: var(--surface);
  border-radius: 8px;
  overflow: hidden;
  font-size: var(--ui);
  line-height: 1.6;
}

[data-ui] .panel-tab {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  font-size: var(--ui-s);
  color: var(--muted);
}

[data-ui] .panel-tab b {
  color: var(--ink);
  font-weight: 600;
}

[data-ui] .code {
  margin: 0 6px 6px;
  background: var(--code-bg);
  border-radius: 6px;
  padding: 14px 16px;
  overflow-x: auto;
  line-height: 1.7;
  white-space: pre;
  tab-size: 2;
}

[data-ui] .code+.panel-tab {
  padding-top: 8px;
}

[data-ui] .c {
  color: var(--muted);
}

[data-ui] .k {
  color: var(--key);
}

[data-ui] .s {
  color: var(--ink);
}

[data-ui] .x {
  color: var(--bad);
}

[data-ui] .prompt {
  color: var(--muted);
  user-select: none;
}

[data-ui] :is(.chat, .reply, .grader, .ck-main, .ck-out, .tl, .tree, .thr, .vs, .dlg-field),
[data-ui].tf,
[data-ui].dialog {
  grid-template-columns: minmax(0, 1fr);
}

@media (forced-colors: active) {
  [data-ui] .seg {
    border: 1px solid CanvasText;
  }

  [data-ui] .seg .seg-thumb {
    forced-color-adjust: none;
    background: Highlight;
    box-shadow: none;
  }

  [data-ui] .seg button[aria-checked="true"] {
    forced-color-adjust: none;
    color: HighlightText;
  }
}