/* Garden 接入凭证：保留清晰的主从工作台，将工业冲击线转译成缀线与冰裂。 */
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .view--keys {
  --key-cold: var(--garden-cold-rgb);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-masthead {
  border-bottom-color: color-mix(in srgb, var(--garden-silver) 42%, transparent);
  background: linear-gradient(136deg, color-mix(in srgb, var(--garden-violet) 5%, transparent), transparent 61%);
  clip-path: polygon(0 5%, 6% 0, 96% 2%, 100% 18%, 98% 100%, 3% 94%, 0 76%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-masthead::before {
  background:
    radial-gradient(ellipse at 57% 43%, color-mix(in srgb, var(--garden-cold) 8%, transparent), transparent 48%),
    radial-gradient(ellipse at 83% 72%, color-mix(in srgb, var(--garden-violet) 5%, transparent), transparent 34%);
  clip-path: none;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-masthead::after {
  top: 14%;
  right: 5%;
  width: 38%;
  height: 84%;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--garden-silver) 35%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--garden-violet) 24%, transparent);
  border-radius: 50%;
  background: none;
  mask-image: linear-gradient(90deg, transparent, #000 18% 72%, transparent 94%);
  opacity: 0.78;
  transform: rotate(-7deg);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-masthead__copy::before {
  background: linear-gradient(var(--garden-gold) 0 29%, var(--garden-silver) 29% 30%, var(--line) 30% 100%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-masthead__copy h1,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-detail__head h2,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-workbench-title h2,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-focus__empty h2 {
  font-family: var(--font-sacred);
  font-weight: 430;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-create-button {
  background: linear-gradient(102deg, var(--garden-violet), color-mix(in srgb, var(--garden-violet) 72%, var(--garden-gold)));
  color: var(--accent-ink);
  clip-path: polygon(0 5%, 9% 0, 91% 3%, 100% 32%, 95% 100%, 7% 91%, 0 69%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-impact-shards polygon {
  fill: color-mix(in srgb, var(--garden-cold) 5%, transparent);
  stroke: color-mix(in srgb, var(--garden-silver) 23%, transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-impact-shards {
  opacity: 0;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-masthead__trace {
  inset: -7% -3% -22px 11%;
  width: 92%;
  height: 112%;
  overflow: visible;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 94%, transparent 100%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-key-weave {
  display: block;
  filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--garden-cold) 7%, transparent));
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-masthead__trace .key-trace {
  opacity: 0;
  animation: none;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-key-keepsakes path {
  fill: color-mix(in srgb, var(--garden-cold) 8%, transparent);
  stroke: color-mix(in srgb, var(--garden-silver) 44%, transparent);
  stroke-width: 0.85;
  vector-effect: non-scaling-stroke;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-key-keepsakes path:nth-child(2) {
  fill: color-mix(in srgb, var(--garden-violet) 8%, transparent);
  stroke: color-mix(in srgb, var(--garden-violet) 48%, transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-key-thread {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-key-thread--gold {
  stroke: var(--garden-gold);
  stroke-width: 1.15;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-key-thread--silver {
  stroke: color-mix(in srgb, var(--garden-silver) 58%, transparent);
  stroke-width: 0.88;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-key-thread--violet {
  stroke: color-mix(in srgb, var(--garden-violet) 58%, transparent);
  stroke-width: 0.82;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-key-thread--ice {
  stroke: color-mix(in srgb, var(--garden-cold) 52%, transparent);
  stroke-width: 0.78;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-key-petals path {
  fill: color-mix(in srgb, var(--garden-violet) 9%, transparent);
  stroke: color-mix(in srgb, var(--garden-silver) 68%, transparent);
  stroke-width: 0.85;
  vector-effect: non-scaling-stroke;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-key-petals path:nth-child(2) {
  fill: color-mix(in srgb, var(--garden-cold) 10%, transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-key-petals path:nth-child(3) {
  fill: color-mix(in srgb, var(--garden-gold) 7%, transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-key-seeds circle,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-key-seeds path {
  fill: var(--garden-gold);
  stroke: var(--canvas);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-key-seeds .garden-key-node--ring {
  fill: var(--canvas);
  stroke: var(--garden-silver);
  stroke-width: 1.1;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-shared-note span {
  background: linear-gradient(90deg, var(--garden-silver), var(--garden-gold));
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-shared-note {
  grid-template-columns: 72px 1fr;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-shared-note span::after,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-focus__axis::after {
  border-color: var(--garden-gold);
  border-radius: 50%;
  transform: none;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-rail {
  border-right-color: color-mix(in srgb, var(--garden-silver) 35%, transparent);
  background: linear-gradient(116deg, color-mix(in srgb, var(--garden-cold) 4%, transparent), transparent 72%);
  clip-path: polygon(0 3%, 7% 0, 100% 2%, 97% 97%, 8% 100%, 0 91%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-rail::before {
  background: linear-gradient(var(--garden-gold), var(--garden-violet), transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-route::before {
  background: linear-gradient(102deg, color-mix(in srgb, var(--garden-violet) 12%, transparent), color-mix(in srgb, var(--garden-cold) 5%, transparent) 58%, transparent 78%);
  clip-path: polygon(0 13%, 11% 2%, 91% 0, 100% 43%, 90% 100%, 7% 89%, 0 67%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-route.is-active > i {
  border-radius: 50%;
  background: var(--garden-gold);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-route > i {
  width: 7px;
  height: 7px;
  border: 1px solid var(--garden-silver);
  border-radius: 50%;
  background: var(--canvas);
  box-shadow: none;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-route.is-active > i {
  border-color: var(--garden-gold);
  background: var(--garden-gold);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-route.is-expiring > i {
  border-color: var(--status-warning);
  background: var(--status-warning);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-route.is-expired > i,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-route.is-paused > i {
  border-color: var(--text-3);
  background: var(--canvas);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-route.is-revoked > i {
  height: 1px;
  border: 0;
  border-radius: 0;
  background: var(--status-danger);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-focus {
  background:
    radial-gradient(ellipse at 79% 18%, color-mix(in srgb, var(--garden-cold) 10%, transparent), transparent 33%),
    linear-gradient(137deg, color-mix(in srgb, var(--garden-cold) 7%, var(--garden-plane-fog)), color-mix(in srgb, var(--garden-violet) 5%, var(--garden-plane-fog)) 69%);
  box-shadow: none;
  clip-path: polygon(2% 2%, 11% 0, 95% 3%, 100% 11%, 97% 94%, 89% 100%, 0 96%, 1% 10%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-focus::before {
  border-left-color: color-mix(in srgb, var(--garden-silver) 26%, transparent);
  background: linear-gradient(131deg, color-mix(in srgb, var(--garden-cold) 6%, transparent), transparent 60%);
  clip-path: polygon(26% 0, 100% 5%, 96% 82%, 4% 100%, 16% 46%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-focus__axis {
  background: linear-gradient(var(--garden-gold), var(--garden-violet), var(--line));
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-focus__empty > span,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-create-summary > span {
  border-color: color-mix(in srgb, var(--garden-silver) 42%, transparent);
  border-radius: 48% 52% 59% 41%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--garden-cold) 7%, transparent), color-mix(in srgb, var(--garden-violet) 4%, transparent));
  clip-path: none;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-focus__empty > span {
  position: relative;
  overflow: visible;
  background:
    radial-gradient(circle at 50% 50%, var(--garden-gold) 0 2px, transparent 2.5px),
    radial-gradient(ellipse at 50% 50%, transparent 0 38%, color-mix(in srgb, var(--garden-silver) 48%, transparent) 39% 40%, transparent 41%),
    linear-gradient(145deg, color-mix(in srgb, var(--garden-cold) 9%, transparent), color-mix(in srgb, var(--garden-violet) 5%, transparent));
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-focus__empty > span::before,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-focus__empty > span::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-focus__empty > span::before {
  inset: 13px 32px;
  border: 1px solid color-mix(in srgb, var(--garden-violet) 56%, transparent);
  border-radius: 50%;
  transform: rotate(-6deg);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-focus__empty > span::after {
  top: 50%;
  left: 50%;
  width: 27px;
  height: 27px;
  border: 1px solid var(--garden-gold);
  background: color-mix(in srgb, var(--garden-violet) 5%, transparent);
  transform: translate(-50%, -50%) rotate(45deg);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-detail__facts,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-limit-row,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-endpoint {
  border-color: color-mix(in srgb, var(--garden-silver) 30%, transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-limit-trace {
  border-top-color: color-mix(in srgb, var(--garden-silver) 43%, transparent);
  transform: rotate(-1.4deg);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-limit-trace i {
  border-color: color-mix(in srgb, var(--garden-silver) 55%, transparent);
  border-radius: 50%;
  background: var(--canvas);
  transform: none;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-limit-row .is-effective {
  background: linear-gradient(112deg, color-mix(in srgb, var(--garden-violet) 10%, transparent), transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-limit-row .is-effective b {
  color: var(--garden-violet);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-secret-shell {
  border-color: color-mix(in srgb, var(--garden-silver) 37%, transparent);
  background: linear-gradient(112deg, color-mix(in srgb, var(--garden-cold) 9%, var(--garden-code)), color-mix(in srgb, var(--garden-violet) 7%, var(--garden-code)) 60%, var(--garden-code));
  clip-path: polygon(0 2%, 7% 0, 96% 3%, 100% 21%, 96% 100%, 5% 91%, 0 70%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-secret-shell > span,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-secret-shell code {
  color: var(--garden-code-text);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-secret-shell.is-masked code {
  color: color-mix(in srgb, var(--garden-code-text) 58%, transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-endpoint {
  background: linear-gradient(100deg, color-mix(in srgb, var(--garden-cold) 6%, transparent), color-mix(in srgb, var(--garden-violet) 3%, transparent) 62%, transparent);
  clip-path: polygon(0 4%, 3% 0, 97% 2%, 100% 23%, 97% 100%, 2% 94%, 0 71%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-endpoint::before {
  width: 24%;
  height: 1px;
  background: linear-gradient(90deg, var(--garden-silver), var(--garden-gold), transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"][data-member-scheme="light"] .key-create-form select {
  color-scheme: light;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"][data-member-scheme="dark"] .key-create-form select {
  color-scheme: dark;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"][data-member-scheme="light"] .garden-key-keepsakes path {
  fill: color-mix(in srgb, var(--garden-cold) 11%, transparent);
  stroke: color-mix(in srgb, var(--garden-silver) 62%, transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"][data-member-scheme="light"] .garden-key-keepsakes path:nth-child(2) {
  fill: color-mix(in srgb, var(--garden-violet) 10%, transparent);
  stroke: color-mix(in srgb, var(--garden-violet) 58%, transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"][data-member-scheme="light"] .garden-key-thread--silver {
  stroke: color-mix(in srgb, var(--garden-silver) 74%, transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"][data-member-scheme="light"] .garden-key-thread--violet {
  stroke: color-mix(in srgb, var(--garden-violet) 72%, transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"][data-member-scheme="light"] .garden-key-thread--ice {
  stroke: color-mix(in srgb, var(--garden-cold) 68%, transparent);
}

@media (max-width: 860px) {
  html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-key-thread--silver,
  html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-key-keepsakes path:last-child,
  html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-key-node--c {
    display: none;
  }

  html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-shared-note {
    grid-template-columns: 48px 1fr;
  }
}

@media (max-width: 620px) {
  html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .key-masthead__trace {
    display: none;
  }

  html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-key-mobile-weave {
    position: absolute;
    z-index: 0;
    right: -2%;
    bottom: -2px;
    display: block;
    width: min(100%, 430px);
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--garden-cold) 7%, transparent));
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 96%, transparent 100%);
    pointer-events: none;
  }

}

/* Garden 接入指南：章节沿一根细线开放，代码仍保留高对比阅读井。 */
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .guide-index {
  padding-left: 24px;
  border-left: 0;
  background: transparent !important;
  box-shadow: none;
  backdrop-filter: none;
  clip-path: polygon(0 4%, 11% 0, 96% 3%, 100% 16%, 95% 100%, 6% 92%, 0 72%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .guide-index::before {
  top: 18px;
  bottom: 21px;
  left: 13px;
  width: 1px;
  height: auto;
  background: linear-gradient(var(--garden-silver), var(--garden-violet), var(--garden-gold));
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .guide-index a {
  position: relative;
  border-top-color: color-mix(in srgb, var(--garden-silver) 25%, transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .guide-index a::before {
  position: absolute;
  top: 50%;
  left: -15px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--garden-silver);
  border-radius: 50%;
  background: var(--canvas);
  content: "";
  transform: translateY(-50%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .guide-index a:hover {
  color: var(--garden-violet);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .guide-index a:hover::before {
  border-color: var(--garden-gold);
  background: var(--garden-gold);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .guide-content {
  border: 0;
  background:
    radial-gradient(ellipse at 82% 8%, color-mix(in srgb, var(--garden-cold) 9%, transparent), transparent 29%),
    linear-gradient(136deg, var(--garden-plane-focus), var(--garden-plane-fog));
  box-shadow: none;
  backdrop-filter: none;
  clip-path: polygon(2% 1%, 9% 0, 96% 2%, 100% 6%, 98% 96%, 92% 100%, 0 98%, 1% 9%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .guide-content::before {
  left: 9%;
  width: 29%;
  height: 1px;
  background: linear-gradient(90deg, var(--garden-silver), var(--garden-gold), transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .guide-content section + section {
  border-top-color: color-mix(in srgb, var(--garden-silver) 28%, transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .guide-content h2 {
  font-family: var(--font-sacred);
  font-weight: 430;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .guide-content p code,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .error-grid code {
  border-color: color-mix(in srgb, var(--garden-silver) 31%, transparent);
  color: var(--garden-violet);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .error-grid {
  gap: 13px;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .error-grid > div {
  border: 0;
  background: linear-gradient(112deg, color-mix(in srgb, var(--garden-violet) 7%, transparent), color-mix(in srgb, var(--garden-cold) 4%, transparent));
  clip-path: polygon(0 5%, 8% 0, 94% 3%, 100% 22%, 95% 100%, 4% 91%, 0 71%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .error-grid b {
  color: var(--garden-gold);
}