.example-offices {
  --example-card: #ffffff;
  --example-ink: #192b39;
  --example-muted: #596579;
  --example-line: #d2d7e3;
  --example-status: #eff0f5;
  --example-focus: #4a2ccc;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--example-line);
  color: var(--example-ink);
  min-width: 0;
}
.example-offices-heading { max-width: 740px; }
.example-offices-heading h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 0 0 10px; }
.example-offices-heading p, .example-offices-help { color: var(--example-muted); line-height: 1.6; }
.example-offices-help { font-size: .8rem; margin: 14px 0 8px; }
.example-offices-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--example-muted) var(--example-status);
  padding: 5px 3px 16px;
  border-radius: 10px;
}
.example-offices-scroll:focus-visible { outline: 3px solid var(--example-focus); outline-offset: 3px; }
.example-offices-list { display: flex; gap: 16px; list-style: none; padding: 0; margin: 0; }
.fictional-office-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 280px;
  min-width: 0;
  max-width: calc(100vw - 64px);
  padding: 22px;
  background: var(--example-card);
  border: 1px solid var(--example-line);
  border-radius: 18px;
  scroll-snap-align: start;
  overflow-wrap: anywhere;
}
.example-office-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  margin-bottom: 16px;
  font-size: .9rem;
  font-weight: 650;
}
.example-office-tone-0 { background: #edf1ff; color: #29409a; }
.example-office-tone-1 { background: #f0edfb; color: #655283; }
.example-office-tone-2 { background: #eaf6ef; color: #286146; }
.example-office-tone-3 { background: #faf0df; color: #775321; }
.fictional-office-card h3 { font-size: 1.05rem; line-height: 1.4; margin: 0 0 6px; }
.example-office-expertise { font-size: .85rem; font-weight: 600; line-height: 1.5; margin: 0 0 10px; }
.example-office-detail { color: var(--example-muted); font-size: .83rem; line-height: 1.65; margin: 0 0 22px; }
.example-office-status { margin: auto 0 0; padding: 8px 10px; border-radius: 8px; background: var(--example-status); color: var(--example-muted); font-size: .75rem; line-height: 1.5; }
:root[data-appearance='dark'] .example-offices {
  --example-card: #191b2a;
  --example-ink: #f2f3ff;
  --example-muted: #b8bdd4;
  --example-line: #535b77;
  --example-status: #292c40;
  --example-focus: #b7a0ff;
}
:root[data-appearance='dark'] .example-office-tone-0 { background: #26314e; color: #c2d2ff; }
:root[data-appearance='dark'] .example-office-tone-1 { background: #34294a; color: #decbff; }
:root[data-appearance='dark'] .example-office-tone-2 { background: #1c3a30; color: #ade4c5; }
:root[data-appearance='dark'] .example-office-tone-3 { background: #3e3125; color: #f2ce8c; }
@media (max-width: 600px) {
  .example-offices { margin-top: 32px; padding-top: 24px; }
  .fictional-office-card { flex-basis: 250px; padding: 18px; }
}
@media (forced-colors: active) {
  .example-offices { --example-card: Canvas; --example-ink: CanvasText; --example-muted: CanvasText; --example-line: CanvasText; --example-status: Canvas; --example-focus: Highlight; }
  :root[data-appearance='dark'] .example-offices { --example-card: Canvas; --example-ink: CanvasText; --example-muted: CanvasText; --example-line: CanvasText; --example-status: Canvas; --example-focus: Highlight; }
  .example-office-avatar, :root[data-appearance='dark'] .example-office-avatar { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
}
.example-office-avatar{object-fit:scale-down;display:block;border-radius:0;background:#fff}