.xco-dot { display: inline-flex; align-items: center; gap: 0.5rem; }
.xco-dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--pillar-accent, #50A2FF);
  box-shadow: 0 0 0 3px rgba(var(--pillar-accent-rgb, 80, 162, 255), 0.18);
}
.rc-kicker.xco-dot { color: var(--color-text-secondary); }

.xco-areas__lead { margin-top: 1rem; }
.xco-areas {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
  margin: 2.5rem 0 0; padding: 0; list-style: none;
}
.xco-areas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2rem; }
.xco-areas > li { display: flex; min-width: 0; }
.xco-area {
  position: relative; display: flex; flex-direction: column; gap: 0.5rem; width: 100%;
  padding: 1.5rem 1.375rem 1.25rem; overflow: hidden;
  background: var(--ox-navy-raised); border: 1px solid var(--ox-line); border-radius: var(--radius-md);
  color: inherit; text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.xco-area::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--pillar-accent, #50A2FF); opacity: 0.85;
}
.xco-area:hover { border-color: var(--ox-line-strong); background: var(--ox-raised-2); }
.xco-area:focus-visible { outline: 2px solid #50A2FF; outline-offset: 3px; }
.xco-area__name { font-size: var(--fs-title-sm); font-weight: 600; line-height: 1.3; color: var(--color-text-primary); }
.xco-area__line { font-size: var(--fs-small); line-height: 1.5; color: var(--color-text-secondary); }
.xco-area__go {
  margin-top: auto; padding-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: var(--fs-label); font-weight: 500; color: var(--color-accent);
}
.xco-area__go > span { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
.xco-area:hover .xco-area__go > span, .xco-area:focus-visible .xco-area__go > span { transform: translateX(3px); }
@media (max-width: 1024px) { .xco-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .xco-areas--3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .xco-areas { grid-template-columns: minmax(0, 1fr); } }

.xco-group__head { margin-bottom: 2rem; }
.xco-group__head .rc-lead { margin-top: 1rem; }
.xco-lib { margin-top: 2.5rem; scroll-margin-top: calc(var(--nav-h, 72px) + 1rem); }
.xco-lib__h {
  margin-bottom: 1rem; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.04em; color: var(--color-text-secondary);
}
.xco-group--others .xco-group__head { margin-bottom: 0; }
@media (max-width: 760px) { .xco-group .rc-start__item:not(:has(.rc-start__k))::before { content: none; } }

.xco-nowrap { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .xco-area:hover .xco-area__go > span, .xco-area:focus-visible .xco-area__go > span { transform: none; }
}