/* Homepage "您的企业是否正在承受这些": four challenge cards in a bento grid.
   Card layout: title → one-line description → animation area → static issue list + description.
   Only the animation area moves; the text content never animates.
   Layout follows the reference: an outer container (.ch-frame) with diffused violet/blue glows and
   streamlined gradient edges on its left and right sides only (top and bottom uncoloured) holds
   solid navy cards without border lines. Scenes are drawn from scratch in CSS/SVG in a "box illustration"
   language (matte objects lit from above, hairline rims, dashed beams with travelling pulses),
   using Aceternity's public previews only as visual references:
   systems → server boxes with broken beam links; finance → two folders whose sheets disagree;
   knowledge → editor-style terminal with a named cursor (typed by challenges.js);
   ontology → after the free "3D Animated Pin" (tilted ripple plane, beam, title pill).
   Mobile turns the grid into a swipeable row. */

.ch-root {
  --ch-lilac: #e2cbff;
  --ch-indigo: #393bb2;
  --ch-violet: #8b6cff;
  --ch-violet-soft: #a78bfa;
  --ch-blue: #5b7cff;
  --ch-surface: #07081c;
  --ch-frame: #0c0d29;
  --ch-module: #04051a;
  --ch-text: #f4f4f6;
  --ch-muted: #b4b4c0;
  --ch-dim: #8a8a98;
  --ch-faint: #5d5d6b;
  --ch-red: #fb7185;
  --ch-ease: cubic-bezier(.22, 1, .36, 1);
}
.ch-root .section-title-wrap { margin-bottom: 48px; }
.ch-root svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ch-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.ch-card { grid-column: span 5; }
.ch-card--wide { grid-column: span 7; }

/* Outer container: diffused glows (violet top-left, blue on the right, a soft wash along the
   bottom) and a 1.5px gradient edge that is coloured on the left and right sides only — the
   edge gradient runs top-to-bottom and is transparent at both ends, so the top and bottom
   edges show no line. */
.ch-frame {
  position: relative;
  padding: 24px;
  overflow: hidden;
  border: 1.5px solid transparent;
  border-radius: 32px;
  background:
    radial-gradient(38% 34% at 0% 0%, rgba(124, 92, 255, .34), transparent 72%) padding-box,
    radial-gradient(30% 48% at 100% 72%, rgba(80, 96, 255, .3), transparent 72%) padding-box,
    radial-gradient(70% 38% at 50% 100%, rgba(98, 72, 230, .22), transparent 74%) padding-box,
    linear-gradient(var(--ch-frame), var(--ch-frame)) padding-box,
    linear-gradient(180deg, rgba(167, 139, 255, 0) 5%, rgba(167, 139, 255, .85) 28%, rgba(120, 104, 255, .8) 55%, rgba(91, 124, 255, .85) 76%, rgba(91, 124, 255, 0) 95%) border-box;
}

/* Cards: solid central blocks, no border lines. */
.ch-card {
  position: relative;
  min-width: 0;
  border-radius: 20px;
  container-type: inline-size;
}
.ch-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px;
  border-radius: 20px;
  background: var(--ch-surface);
}

/* Title box and description (static) */
.ch-head { display: flex; align-items: center; gap: 12px; }
.ch-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--ch-lilac);
  background: linear-gradient(#24243a, #16162a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(226, 203, 255, .14), 0 8px 16px -8px rgba(0, 0, 0, .8);
}
.ch-icon svg { width: 20px; height: 20px; }
.ch-head h3 { margin: 0; color: var(--ch-text); font-size: 22px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.ch-lead { margin: 14px 0 0; color: var(--ch-muted); font-size: 16px; line-height: 1.6; }

/* Animation area: a solid module with streamlined gradient edges on the left and right only;
   the top and bottom edges stay uncoloured. */
.ch-visual {
  position: relative;
  flex: 1 0 auto;
  min-height: 250px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--ch-module);
  isolation: isolate;
}
.ch-visual::before, .ch-visual::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(rgba(167, 139, 250, 0), rgba(167, 139, 250, .75) 35%, rgba(91, 124, 255, .7) 68%, rgba(91, 124, 255, 0));
  pointer-events: none;
}
.ch-visual::before { left: 0; }
.ch-visual::after { right: 0; }

/* Static content: issue list and the selected issue's description */
.ch-tabs { display: flex; flex-direction: column; gap: 2px; max-width: 34em; margin-top: 18px; }
.ch-tab {
  display: block;
  width: 100%;
  padding: 7px 12px;
  border: 0;
  border-radius: 10px;
  color: #8e8aa6;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.ch-tab:hover { color: #fff; }
.ch-tab:focus-visible { outline: 2px solid var(--ch-violet); outline-offset: 2px; }
.ch-details { display: grid; gap: 10px; max-width: 34em; margin-top: 10px; }
.ch-details p { margin: 0; padding: 0 12px; color: var(--ch-muted); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.ch-enhanced .ch-tab[aria-selected="true"] { color: #fff; background: linear-gradient(90deg, rgba(139, 108, 255, .18), rgba(57, 59, 178, .07) 70%, transparent); }
.ch-enhanced .ch-details { gap: 0; }
.ch-enhanced .ch-details p { grid-area: 1 / 1; visibility: hidden; }
.ch-enhanced .ch-details p.is-active { visibility: visible; }

/* Shared object language */
.ch-visual [data-hl] { transition: box-shadow .5s var(--ch-ease), color .5s var(--ch-ease), background-color .5s var(--ch-ease); }
.ch-pulse { position: absolute; height: 1px; pointer-events: none; }
.ch-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--ch-dim);
  font-size: 12px;
  white-space: nowrap;
  background: linear-gradient(#1b1b23, #141419);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .06);
}

/* 1 · Systems — four server boxes on dashed beams; pulses die at every break. */
.ch-rack { position: absolute; inset: 0 0 26px; display: flex; align-items: center; justify-content: center; padding: 0; }
.ch-edge, .ch-link::before { background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 4px, transparent 4px 9px) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 4px, transparent 4px 9px) 0 20px / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 4px, transparent 4px 9px) 0 40px / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 4px, transparent 4px 9px) 0 60px / 100% 1px no-repeat;
}
.ch-edge { position: relative; flex: 1 1 0; min-width: 12px; height: 61px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
.ch-edge--end { -webkit-mask-image: linear-gradient(270deg, transparent, #000 70%); mask-image: linear-gradient(270deg, transparent, #000 70%); }
.ch-link::before { content: ""; position: absolute; inset: 0; -webkit-mask-image: linear-gradient(90deg, #000 calc(50% - 9px), transparent calc(50% - 9px) calc(50% + 9px), #000 calc(50% + 9px)); mask-image: linear-gradient(90deg, #000 calc(50% - 9px), transparent calc(50% - 9px) calc(50% + 9px), #000 calc(50% + 9px)); }
.ch-server {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
  width: 86px;
  padding: 8px;
  border-radius: 12px;
  background: linear-gradient(#2c2c35, #1c1c23);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 22px 30px -14px rgba(0, 0, 0, .95);
}
.ch-vent {
  position: relative;
  height: 16px;
  border-radius: 6px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .32) 0 1px, transparent 1px 4px) 50% 50% / 38% 7px no-repeat, #0d0d12;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .05);
}
.ch-vent::after { content: ""; position: absolute; top: 50%; right: 6px; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #34d399; box-shadow: 0 0 6px #34d399; }
.ch-server:first-child .ch-vent::after { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
.ch-drawer { display: block; padding: 5px 6px; border-radius: 6px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.ch-drawer i { display: block; width: 14px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .28); }
.ch-drawer em { display: block; margin-top: 4px; overflow: hidden; color: var(--ch-dim); font: 500 9.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; text-overflow: clip; white-space: nowrap; transition: color .5s var(--ch-ease); }
.ch-server > b { position: absolute; top: calc(100% + 10px); left: 50%; color: var(--ch-dim); font-size: 12px; font-weight: 500; white-space: nowrap; transform: translateX(-50%); }
.ch-server.is-hl { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(167, 139, 250, .85), 0 0 0 4px rgba(139, 108, 255, .12), 0 22px 30px -14px rgba(0, 0, 0, .95); }
.ch-server.is-hl > b { color: var(--ch-text); }
.ch-drawer.is-hl { box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .9); background: rgba(139, 108, 255, .1); }
.ch-drawer.is-hl em, .ch-server.is-hl em { color: #ddd6fe; }
.ch-link { position: relative; flex: 1 1 0; min-width: 22px; max-width: 76px; height: 61px; }
.ch-break { position: absolute; top: 50%; left: 50%; color: rgba(251, 113, 133, .55); font-size: 13px; font-weight: 500; line-height: 1; transform: translate(-50%, -55%); transition: color .5s var(--ch-ease), text-shadow .5s var(--ch-ease); }
.ch-link.is-hl .ch-break { color: var(--ch-red); text-shadow: 0 0 10px rgba(251, 113, 133, .7); }
.ch-link .ch-pulse { top: 20px; left: -40%; width: 34px; background: linear-gradient(90deg, transparent, var(--ch-violet), #c4b5fd); animation: ch-run-to-gap 2.6s linear infinite; }
.ch-link .ch-pulse--b { top: 60px; animation-delay: 1.3s; animation-duration: 3.1s; }
.ch-link:nth-of-type(4) .ch-pulse { animation-delay: .6s; }
.ch-link:nth-of-type(6) .ch-pulse { animation-delay: 1s; }
.ch-pulse--edge { top: calc(50% - 23px); left: 0; width: 44px; background: linear-gradient(90deg, transparent, var(--ch-blue), #b4c3ff); animation: ch-run-in 3.4s linear infinite; }

/* 2 · Finance — two folders whose sheets disagree; pulses meet at the difference. */
.ch-desk { position: absolute; inset: 0 0 52px; display: flex; align-items: center; justify-content: center; padding: 0 20px; }
.ch-folder { position: relative; z-index: 1; flex: 0 0 auto; width: 144px; height: 108px; }
.ch-folder-back { position: absolute; inset: 10px 0 0; border-radius: 12px; background: linear-gradient(var(--fb1), var(--fb2)); }
.ch-folder-back::before { content: ""; position: absolute; top: -9px; left: 10px; width: 44px; height: 14px; border-radius: 7px 7px 0 0; background: var(--fb1); }
.ch-sheet {
  position: absolute;
  top: -6px;
  left: 13px;
  right: 13px;
  height: 66px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #18181b;
  background: linear-gradient(#fbfbfd, #e3e3ea);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  animation: ch-sheet 3.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
.ch-sheet b { display: block; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ch-sheet small { display: block; margin-top: 2px; color: #6b6b78; font-size: 9.5px; white-space: nowrap; }
.ch-folder-front {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  border-radius: 12px;
  background: linear-gradient(var(--ff1), var(--ff2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 20px 28px -14px rgba(0, 0, 0, .95);
}
.ch-folder-front::before { content: ""; position: absolute; top: 9px; left: 12px; right: 12px; height: 1px; background: rgba(255, 255, 255, .3); }
.ch-folder--biz { --fb1: #5a3fd1; --fb2: #4630ad; --ff1: #a58bff; --ff2: #7050f0; }
.ch-folder--fin { --fb1: #3554c8; --fb2: #2840a6; --ff1: #8aa0ff; --ff2: #4c6af0; }
.ch-folder--fin .ch-sheet { animation-delay: -1.8s; }
.ch-folder-name { position: absolute; top: calc(100% + 10px); left: 50%; color: var(--ch-dim); font-size: 12px; font-weight: 500; white-space: nowrap; transform: translateX(-50%); }
.ch-folder-tag { position: absolute; z-index: 2; top: 52px; right: -14px; padding: 3px 8px; border-radius: 999px; color: var(--ch-dim); font-size: 10.5px; white-space: nowrap; background: linear-gradient(#1f1f28, #15151b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ch-folder-tag.is-hl { color: #ede9fe; box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .9), 0 0 0 3px rgba(139, 108, 255, .14); }
.ch-reconcile { position: relative; flex: 1 1 0; min-width: 70px; max-width: 170px; height: 41px; margin: 0 6px; }
.ch-reconcile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 4px, transparent 4px 9px) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 4px, transparent 4px 9px) 0 20px / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .13) 0 4px, transparent 4px 9px) 0 40px / 100% 1px no-repeat;
}
.ch-reconcile .ch-pulse { top: 0; left: 0; width: 30px; background: linear-gradient(90deg, transparent, #b59cff); animation: ch-run-mid 2.4s linear infinite; }
.ch-reconcile .ch-pulse--rev { top: 40px; left: auto; right: 0; background: linear-gradient(270deg, transparent, #8aa0ff); animation-name: ch-run-mid-rev; animation-delay: 1.2s; }
.ch-diff {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  color: #e4e4ea;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: linear-gradient(#1f1f28, #141419);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .09), 0 10px 20px -8px rgba(0, 0, 0, .9);
  transform: translate(-50%, -50%);
}
.ch-diff::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ch-red); box-shadow: 0 0 8px var(--ch-red); }
.ch-diff.is-hl { color: #fff; box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .9), 0 0 0 4px rgba(139, 108, 255, .14), 0 10px 20px -8px rgba(0, 0, 0, .9); }
.ch-locks { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ch-locks span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; color: var(--ch-dim); font-size: 12px; white-space: nowrap; background: linear-gradient(#1b1b23, #141419); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.ch-locks svg { width: 12px; height: 12px; }
.ch-locks span.is-hl { color: #ede9fe; box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .85), 0 0 0 3px rgba(139, 108, 255, .12); }

/* 3 · Knowledge — editor-style terminal with a named cursor */
.ch-term {
  position: absolute;
  inset: 14px 10px 10px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(#17171e, #111116);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 26px 40px -20px rgba(0, 0, 0, .95);
}
.ch-term-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; }
.ch-term-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.ch-term-bar i:nth-child(2) { background: #febc2e; }
.ch-term-bar i:nth-child(3) { background: #28c840; }
.ch-term-title { margin-left: 8px; padding: 2px 9px; border-radius: 6px; color: var(--ch-faint); font: 10.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(255, 255, 255, .05); }
.ch-term-gutter { position: absolute; top: 40px; left: 0; display: flex; flex-direction: column; width: 30px; padding-top: 4px; color: #45454f; font: 12px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
.ch-term-gutter span { padding-right: 8px; }
.ch-term-body { padding: 4px 16px 12px 40px; font: 12.5px/1.8 ui-monospace, SFMono-Regular, Menlo, Consolas, "PingFang SC", "Microsoft YaHei", monospace; }
.ch-term-gutter { font-size: 12.5px; }
.ch-tl { margin: 0; overflow: hidden; color: #9b9bab; font-size: inherit; line-height: inherit; white-space: nowrap; text-overflow: ellipsis; transition: color .5s var(--ch-ease); }
.ch-tl--cmd { color: #ececf2; }
.ch-tl--cmd::before { content: "$ "; color: var(--ch-violet-soft); }
.ch-tl--warn { color: #d4a8b4; }
.ch-tl.is-hl { color: #fda4b8; }
.ch-term-live .ch-tl { visibility: hidden; }
.ch-term-live .ch-tl.is-shown { visibility: visible; animation: ch-line-in .4s var(--ch-ease); }
.ch-tl.is-typing::after { content: ""; display: inline-block; width: 7px; height: 13px; margin-left: 2px; vertical-align: -2px; background: var(--ch-lilac); animation: ch-caret .9s steps(2, start) infinite; }
.ch-cursor-tag {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: flex-start;
  gap: 2px;
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--cx, 60%), var(--cy, 70px));
  transition: transform .9s var(--ch-ease), opacity .4s ease;
}
.ch-term-live .ch-cursor-tag, .ch-cursor-tag.is-parked { opacity: 1; }
.ch-cursor-tag svg { width: 16px; height: 16px; color: var(--ch-violet); fill: var(--ch-violet); stroke: #fff; stroke-width: 1.2; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.ch-cursor-tag b { margin-top: 12px; padding: 3px 9px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; background: linear-gradient(#9a80ff, #7357f0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px -4px rgba(115, 87, 240, .7); }

/* 4 · Ontology — after the free "3D Animated Pin" */
.ch-pin-scene { position: absolute; inset: 0; perspective: 1000px; }
.ch-pin-plane {
  position: absolute;
  left: 50%;
  bottom: -40px;
  width: 300px;
  height: 300px;
  transform: translateX(-50%) rotateX(70deg);
  transform-style: preserve-3d;
  transition: transform .8s var(--ch-ease);
}
.ch-v-pin:hover .ch-pin-plane { transform: translateX(-50%) rotateX(60deg) scale(1.05); }
.ch-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  border-radius: 50%;
  background: rgba(139, 108, 255, .16);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(196, 181, 253, .4);
  opacity: 0;
  animation: ch-ripple 6s linear infinite;
}
.ch-ring:nth-child(2) { animation-delay: 2s; }
.ch-ring:nth-child(3) { animation-delay: 4s; }
.ch-pin-dot { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #c4b5fd; box-shadow: 0 0 12px 3px rgba(139, 108, 255, .6); }
.ch-pin { position: absolute; left: 50%; top: 26px; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); transition: top .8s var(--ch-ease); }
.ch-v-pin:hover .ch-pin { top: 14px; }
.ch-pin-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--ch-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: #0a0a0f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 12px 24px -10px rgba(0, 0, 0, .9);
}
.ch-pin-title::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 1px; background: linear-gradient(90deg, rgba(167, 139, 250, 0), rgba(167, 139, 250, .9), rgba(167, 139, 250, 0)); transition: opacity .5s ease; }
.ch-pin-title em { padding: 1px 8px; border-radius: 999px; color: var(--ch-dim); font-size: 11px; font-weight: 500; font-style: normal; background: rgba(255, 255, 255, .06); transition: color .5s var(--ch-ease), background-color .5s var(--ch-ease); }
.ch-pin-title.is-hl { box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .9), 0 0 0 4px rgba(139, 108, 255, .14), 0 12px 24px -10px rgba(0, 0, 0, .9); }
.ch-pin-title.is-hl em { color: #fda4b8; background: rgba(251, 113, 133, .12); }
.ch-pin-beam { position: relative; width: 1px; height: 120px; background: linear-gradient(rgba(196, 181, 253, .9), rgba(139, 108, 255, 0)); transition: height .8s var(--ch-ease); }
.ch-pin-beam i { position: absolute; inset: 0 -1px; background: inherit; filter: blur(2px); }
.ch-v-pin:hover .ch-pin-beam { height: 140px; }
.ch-pin-tag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--ch-dim);
  font-size: 12px;
  white-space: nowrap;
  background: linear-gradient(#1b1b23, #141419);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 10px 18px -10px rgba(0, 0, 0, .9);
  transform: translate(-50%, -50%);
}
.ch-pin-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ch-faint); }
.ch-pin-tag.is-hl { color: #ede9fe; box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .85), 0 0 0 3px rgba(139, 108, 255, .12); }
.ch-pin-tag.is-hl::before { background: var(--ch-violet-soft); }

/* Animations run only while a card is on screen. */
.ch-enhanced .ch-card:not(.is-inview) :is(.ch-pulse, .ch-sheet, .ch-ring) { animation-play-state: paused; }

.ch-pager { display: none; }

@keyframes ch-run-to-gap { 0% { left: -40%; opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { left: calc(50% - 40px); opacity: 0; } }
@keyframes ch-run-in { 0% { left: 0; opacity: 0; } 20% { opacity: 1; } 100% { left: 18%; opacity: 0; } }
@keyframes ch-run-mid { 0% { left: 0; opacity: 0; } 20% { opacity: 1; } 100% { left: calc(50% - 44px); opacity: 0; } }
@keyframes ch-run-mid-rev { 0% { right: 0; opacity: 0; } 20% { opacity: 1; } 100% { right: calc(50% - 44px); opacity: 0; } }
@keyframes ch-sheet { 0%, 100% { transform: translateY(6px); } 50% { transform: translateY(-8px); } }
@keyframes ch-line-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes ch-caret { to { visibility: hidden; } }
@keyframes ch-ripple { 0% { opacity: 0; transform: scale(0); } 15% { opacity: 1; } 60% { opacity: .5; } 100% { opacity: 0; transform: scale(1); } }

/* Narrow cards */
@container (max-width: 520px) {
  .ch-server { width: 64px; padding: 6px; gap: 5px; border-radius: 10px; }
  .ch-vent { height: 12px; }
  .ch-drawer { padding: 4px 5px; }
  .ch-drawer em { font-size: 8px; }
  .ch-server > b { font-size: 11px; }
  .ch-link { min-width: 14px; }
  .ch-folder { width: 108px; height: 84px; }
  .ch-sheet { top: -4px; left: 9px; right: 9px; height: 54px; padding: 6px 7px; }
  .ch-sheet b { font-size: 11.5px; }
  .ch-sheet small { font-size: 8.5px; }
  .ch-folder-front { height: 50px; }
  .ch-folder-tag { top: 40px; right: -10px; }
  .ch-reconcile { min-width: 40px; }
  .ch-diff { padding: 4px 9px; font-size: 10.5px; }
  .ch-term-body { padding: 4px 12px 10px 32px; font-size: 11px; line-height: 1.65; }
  .ch-term-gutter { width: 24px; font-size: 11px; line-height: 1.65; }
  .ch-tl { white-space: normal; overflow-wrap: anywhere; }
  .ch-pin-plane { width: 260px; height: 260px; }
  .ch-ring { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
  .ch-pin-tag { left: clamp(48px, var(--x), calc(100% - 48px)); top: calc(var(--y) + 22%); font-size: 11px; padding: 4px 9px; }
}
@container (max-width: 380px) {
  .ch-server { width: 52px; padding: 5px; gap: 4px; }
  .ch-drawer em { display: none; }
  .ch-drawer { height: 12px; }
  .ch-server > b { font-size: 10px; }
  .ch-link { min-width: 10px; }
  .ch-folder { width: 86px; height: 70px; }
  .ch-sheet { height: 46px; }
  .ch-sheet b { font-size: 10px; }
  .ch-sheet small { display: none; }
  .ch-folder-front { height: 44px; }
  .ch-folder-tag { top: 30px; right: -6px; font-size: 9.5px; }
  .ch-locks { gap: 6px; }
  .ch-locks span { padding: 4px 8px; font-size: 11px; }
  .ch-locks svg { display: none; }
  .ch-term-gutter { display: none; }
  .ch-term-body { padding-left: 12px; font-size: 10.5px; }
  .ch-pin-tag:nth-of-type(2), .ch-pin-tag:nth-of-type(4) { display: none; }
}

@media (max-width: 991px) {
  .ch-frame { padding: 16px; border-radius: 26px; }
  .ch-grid { gap: 16px; }
  .ch-card, .ch-card--wide { grid-column: span 6; }
  .ch-card-inner { padding: 24px 20px; }
}
@media (max-width: 767px) {
  .ch-root .container { padding-inline: 20px; }
  .ch-root .section-title-wrap { margin-bottom: 28px; }
  .ch-frame { padding: 12px 0; border-radius: 20px; }
  .ch-grid {
    display: flex;
    gap: 12px;
    padding: 0 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    scrollbar-width: none;
  }
  .ch-grid::-webkit-scrollbar { display: none; }
  .ch-card, .ch-card--wide { flex: 0 0 90%; scroll-snap-align: center; }
  .ch-card, .ch-card-inner { border-radius: 16px; }
  .ch-head h3 { font-size: 20px; }
  .ch-lead { font-size: 15px; }
  .ch-visual { min-height: 230px; }
  .ch-tab { font-size: 15px; }
  .ch-details p { font-size: 14px; }
  .ch-enhanced .ch-pager { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .ch-pager button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .22); cursor: pointer; transition: width .3s ease, background-color .3s ease; }
  .ch-pager button[aria-current="true"] { width: 22px; background: var(--ch-violet); }
}

@media (prefers-reduced-motion: reduce) {
  .ch-root *, .ch-root *::before, .ch-root *::after { animation: none !important; }
  .ch-root *, .ch-root *::before, .ch-root *::after { transition: none !important; }
  .ch-pulse { display: none; }
  .ch-ring:nth-child(1) { opacity: .6; transform: scale(.7); }
}