.garden-metric-link,
.garden-metric-link__node { display: none; }

/* Garden 全局：线是故事，节点是锚点，薄片是记忆帷幕。 */
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] body {
  background:
    radial-gradient(ellipse at 79% 13%, color-mix(in srgb, var(--garden-cold) 12%, transparent), transparent 35%),
    var(--canvas);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .ambient-grid {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 104px 104px;
  opacity: 0.16;
  mask-image: linear-gradient(118deg, transparent 4%, #000 37%, #000 72%, transparent 96%);
  transform: perspective(1000px) rotateX(61deg) translateY(-29%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .ambient-glow {
  background:
    radial-gradient(circle at 76% 18%, color-mix(in srgb, var(--garden-violet) 14%, transparent), transparent 31%),
    radial-gradient(circle at 27% 72%, color-mix(in srgb, var(--garden-cold) 11%, transparent), transparent 34%);
  opacity: 0.78;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .ambient-thread {
  border-color: color-mix(in srgb, var(--garden-silver) 28%, transparent);
  border-radius: 51% 49% 62% 38%;
  opacity: 0.56;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .sidebar {
  background:
    linear-gradient(168deg, color-mix(in srgb, var(--garden-violet) 6%, transparent), transparent 38%),
    color-mix(in srgb, var(--canvas) 94%, transparent);
  backdrop-filter: blur(23px) saturate(0.9);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .sidebar::before {
  background: linear-gradient(transparent, var(--garden-silver) 13%, var(--line) 82%, transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .sidebar::after {
  width: 8px;
  height: 8px;
  border: 1px solid var(--garden-gold);
  border-radius: 50%;
  background: var(--canvas);
  transform: none;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .primary-nav::before {
  background: linear-gradient(var(--line), var(--garden-silver), var(--line));
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .nav-item::before {
  border-radius: 50%;
  transform: scaleX(0.24);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .nav-item:hover::before,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .nav-item.is-active::before {
  background: var(--garden-gold);
  transform: scaleX(0.55);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .nav-item::after {
  background:
    linear-gradient(96deg, color-mix(in srgb, var(--garden-violet) 13%, transparent), color-mix(in srgb, var(--garden-cold) 5%, transparent) 70%, transparent 70%);
  clip-path: polygon(0 15%, 18% 3%, 91% 0, 100% 48%, 90% 100%, 12% 91%, 0 72%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .nav-item.is-active svg {
  color: var(--garden-violet);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .member-space-mark path:nth-of-type(2) {
  fill: color-mix(in srgb, var(--garden-violet) 9%, transparent);
  stroke: var(--garden-violet);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .member-space-mark circle {
  fill: var(--garden-gold);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .topbar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--canvas) 94%, transparent), color-mix(in srgb, var(--canvas) 72%, transparent));
  backdrop-filter: blur(22px) saturate(0.92);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .topbar::after {
  background: linear-gradient(90deg, var(--garden-silver) 0 18%, transparent 18% 53%, var(--line) 53% 83%, var(--garden-gold) 83% 88%, transparent 88%);
  opacity: 0.62;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .profile-chip__avatar {
  border-color: color-mix(in srgb, var(--garden-gold) 48%, var(--line));
  background-image: linear-gradient(145deg, color-mix(in srgb, var(--garden-violet) 13%, transparent), transparent);
  border-radius: 47% 53% 42% 58%;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .page-masthead::after {
  background: linear-gradient(90deg, var(--garden-silver) 0 24%, transparent 24% 31%, var(--line) 31% 74%, var(--garden-gold) 74% 81%, transparent 81%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .sacred-orbit {
  border-color: color-mix(in srgb, var(--garden-silver) 39%, transparent);
  border-radius: 49% 51% 61% 39%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--garden-sheet-strong) 62%, transparent), color-mix(in srgb, var(--garden-cold) 7%, transparent) 45%, transparent 69%);
  box-shadow: 0 0 34px color-mix(in srgb, var(--garden-cold) 12%, transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .sacred-orbit::before,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .sacred-orbit::after {
  border-color: color-mix(in srgb, var(--garden-violet) 36%, transparent);
  border-radius: 56% 44% 48% 52%;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .sacred-orbit::after {
  border-color: var(--garden-gold);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .masthead-progress {
  border-color: color-mix(in srgb, var(--garden-silver) 38%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--garden-cold) 8%, transparent), color-mix(in srgb, var(--garden-violet) 5%, var(--garden-sheet)));
  clip-path: polygon(0 8%, 13% 0, 93% 4%, 100% 25%, 94% 100%, 8% 91%, 0 70%);
}

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

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .masthead-copy {
  background: linear-gradient(90deg, var(--garden-silver) 0 1px, transparent 1px);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .masthead-title h1,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .panel-heading h2 {
  font-family: var(--font-sacred);
  font-weight: 430;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .eyebrow,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .panel-tag {
  font-family: var(--font-ui);
  letter-spacing: 0.11em;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .capacity-panel,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .metric-card,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .route-panel,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .activity-panel,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .notice-panel,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .quick-panel {
  border: 0;
  background:
    linear-gradient(132deg, color-mix(in srgb, var(--garden-violet) 6%, transparent), transparent 58%),
    var(--garden-sheet);
  box-shadow: var(--shadow);
  clip-path: polygon(1% 7%, 7% 1%, 91% 0, 100% 9%, 98% 91%, 91% 100%, 5% 96%, 0 79%);
  backdrop-filter: blur(18px) saturate(0.88);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .capacity-panel::before,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .metric-card::before,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .route-panel::before,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .activity-panel::before,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .notice-panel::before,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .quick-panel::before {
  top: 0;
  left: 7%;
  width: 34%;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, var(--garden-silver), transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .capacity-panel::after,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .metric-card::after,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .route-panel::after,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .activity-panel::after,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .notice-panel::after,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .quick-panel::after {
  right: 5%;
  bottom: 3%;
  width: 17%;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--garden-gold));
}

/* Garden 总览：容量成为记忆花心，数据依旧共用原有节点。 */
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .overview-layout::before {
  background:
    linear-gradient(153deg, transparent 0 31%, color-mix(in srgb, var(--garden-violet) 5%, transparent) 31% 57%, transparent 57%),
    repeating-linear-gradient(0deg, transparent 0 64px, var(--line) 64px 65px);
  clip-path: polygon(8% 0, 100% 12%, 87% 100%, 0 78%);
  opacity: 0.58;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .capacity-panel {
  background:
    radial-gradient(ellipse at 44% 48%, color-mix(in srgb, var(--garden-cold) 12%, transparent), transparent 55%),
    linear-gradient(132deg, var(--garden-sheet), color-mix(in srgb, var(--garden-violet) 4%, transparent));
  clip-path: polygon(3% 6%, 14% 0, 91% 3%, 100% 18%, 96% 90%, 83% 100%, 5% 94%, 0 72%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .capacity-panel::before {
  left: 14%;
  width: 37%;
  background: linear-gradient(90deg, var(--garden-silver), var(--garden-gold), transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-memory-bloom {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  pointer-events: none;
  transform: translateZ(16px) rotate(1.5deg);
}

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

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

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-memory-bloom__thread,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-memory-bloom__echo,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-memory-bloom__ice {
  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-memory-bloom__thread {
  stroke: var(--garden-gold);
  stroke-width: 1;
  stroke-dasharray: 1;
  animation: garden-thread-arrive 760ms var(--ease-ceremonial) both;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-memory-bloom__echo {
  stroke: color-mix(in srgb, var(--garden-violet) 66%, transparent);
  stroke-width: 0.8;
  stroke-dasharray: 2 7;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-memory-bloom__ice {
  stroke: color-mix(in srgb, var(--garden-cold) 78%, transparent);
  stroke-width: 0.8;
  stroke-dasharray: 3 5;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-memory-bloom__seeds circle {
  fill: var(--garden-gold);
  stroke: var(--canvas);
  stroke-width: 1.5;
}

@keyframes garden-thread-arrive {
  from { stroke-dashoffset: 1; opacity: 0.3; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .orbit-svg {
  opacity: 0.68;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .orbit-progress-bg {
  opacity: 0.46;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .orbit-progress {
  stroke: var(--garden-gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--garden-gold) 26%, transparent));
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .orbit-gyro {
  inset: 11%;
  border-color: color-mix(in srgb, var(--garden-violet) 32%, transparent);
  border-radius: 48% 52% 44% 56%;
  opacity: 0.58;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"][data-member-scheme="light"] .capacity-panel {
  background:
    radial-gradient(ellipse at 44% 48%, color-mix(in srgb, var(--garden-cold) 21%, transparent), transparent 57%),
    linear-gradient(132deg, var(--garden-plane-focus), color-mix(in srgb, var(--garden-violet) 7%, var(--garden-plane-fog)));
}

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

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

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

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

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"][data-member-scheme="light"] .orbit-svg {
  opacity: 0.82;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"][data-member-scheme="light"] .orbit-gyro {
  border-color: color-mix(in srgb, var(--garden-violet) 57%, transparent);
  opacity: 0.72;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"][data-member-scheme="light"] .orbit-gyro--meridian {
  border-color: color-mix(in srgb, var(--garden-silver) 68%, transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .orbit-gyro--meridian {
  border-color: color-mix(in srgb, var(--garden-silver) 42%, transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .orbit-core {
  width: 49%;
  border: 0;
  border-radius: 48% 52% 44% 56%;
  background:
    radial-gradient(ellipse, color-mix(in srgb, var(--garden-gold) 12%, transparent), transparent 67%),
    color-mix(in srgb, var(--garden-sheet-strong) 48%, transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .orbit-core::before {
  inset: 9px 17px 13px 8px;
  border: 1px solid color-mix(in srgb, var(--garden-silver) 46%, transparent);
  border-radius: 57% 43% 61% 39%;
  transform: rotate(6deg);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .orbit-core::after {
  background: color-mix(in srgb, var(--garden-gold) 8%, transparent);
  filter: blur(22px);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .orbit-core strong {
  font-family: var(--font-sacred);
  font-weight: 380;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .orbit-core strong small,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .panel-tag span {
  color: var(--garden-gold-ink);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .orbit-code--a {
  top: 27%;
  left: 3%;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .orbit-code--b {
  right: clamp(8px, 2%, 18px);
  bottom: 25%;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .capacity-meta {
  padding-inline: clamp(4px, 1.5%, 14px);
  border-top-color: color-mix(in srgb, var(--garden-silver) 46%, transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .capacity-panel .panel-tag {
  left: clamp(36px, 10%, 88px);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .meter {
  height: 2px;
  background: var(--line);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .meter span {
  position: relative;
  background: linear-gradient(90deg, var(--garden-violet), var(--garden-gold));
  box-shadow: none;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .meter span::after {
  position: absolute;
  top: -3px;
  right: -1px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--garden-gold);
  border-radius: 50%;
  background: var(--canvas);
  content: "";
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .metric-stack::before {
  display: none;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-metric-link {
  position: absolute;
  z-index: 4;
  inset: 0 auto 0 0;
  display: block;
  width: 40px;
  height: 100%;
  overflow: visible;
  fill: none;
  pointer-events: none;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-metric-link__path {
  stroke: url(#garden-metric-link-gradient);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-width: 0.8;
  opacity: 0;
  vector-effect: non-scaling-stroke;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .view--overview.is-active .garden-metric-link__path {
  animation: garden-metric-link-grow 620ms cubic-bezier(0.45, 0, 0.2, 1) 160ms both;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-metric-link__path--narrow {
  display: none;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .metric-card::before {
  display: none;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-metric-link__node {
  position: absolute;
  z-index: 5;
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid var(--garden-gold);
  border-radius: 50%;
  background: var(--canvas);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .view--overview.is-active .garden-metric-link__node {
  animation: garden-metric-link-node-arrive 220ms var(--ease-ceremonial) var(--metric-link-node-delay) both;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-metric-link__node--one {
  --metric-link-node-delay: 160ms;
  top: calc(100% / 6);
  left: 10.5px;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-metric-link__node--two {
  --metric-link-node-delay: 300ms;
  top: 50%;
  left: 25.5px;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-metric-link__node--three {
  --metric-link-node-delay: 560ms;
  top: calc(500% / 6);
  left: 14.5px;
}

@keyframes garden-metric-link-grow {
  0% { stroke-dashoffset: 1; opacity: 0; }
  12% { opacity: 0.54; }
  100% { stroke-dashoffset: 0; opacity: 0.54; }
}

@keyframes garden-metric-link-node-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .metric-card:nth-child(n) {
  margin-inline: 0 9px;
  border: 0;
  background:
    linear-gradient(96deg, color-mix(in srgb, var(--garden-violet) 7%, transparent), transparent 76%),
    color-mix(in srgb, var(--garden-sheet) 74%, transparent);
  clip-path: polygon(3% 8%, 14% 1%, 95% 0, 100% 19%, 94% 100%, 7% 91%, 0 68%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .metric-card:nth-child(2) {
  margin-left: 15px;
  clip-path: polygon(0 12%, 11% 0, 91% 5%, 100% 26%, 96% 91%, 12% 100%, 3% 76%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .metric-card:nth-child(3) {
  margin-left: 4px;
  clip-path: polygon(5% 0, 96% 8%, 100% 83%, 89% 100%, 0 91%, 2% 18%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .metric-card::before {
  top: 50%;
  left: 7px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--garden-gold);
  border-radius: 50%;
  background: var(--canvas);
  transform: translateY(-50%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .metric-card strong {
  font-family: var(--font-sacred);
  font-weight: 390;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .mini-bars i {
  background: linear-gradient(var(--garden-violet), color-mix(in srgb, var(--garden-cold) 30%, transparent));
  clip-path: polygon(48% 0, 61% 0, 55% 100%, 45% 100%);
}

/* 窄平板保持纵向指标关系，避免三片在五列区域内被压扁。 */
@media (min-width: 761px) and (max-width: 1260px) {
  html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .metric-stack {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-metric-link__path--wide {
    display: none;
  }

  html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-metric-link__path--narrow {
    display: block;
  }

  html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-metric-link__node--two {
    left: 32.5px;
  }

  html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .garden-metric-link__node--three {
    left: 10.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .view--overview .garden-metric-link__path {
    stroke-dashoffset: 0;
    opacity: 0.54;
    animation: none !important;
  }

  html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .view--overview .garden-metric-link__node {
    opacity: 1;
    animation: none !important;
  }
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .route-panel {
  border-left-color: color-mix(in srgb, var(--garden-silver) 46%, transparent);
  background: linear-gradient(112deg, color-mix(in srgb, var(--garden-violet) 7%, transparent), transparent 72%);
  clip-path: polygon(0 4%, 7% 0, 91% 2%, 100% 13%, 97% 92%, 88% 100%, 5% 96%, 0 79%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .route-panel .live-label {
  margin-right: clamp(12px, 4%, 28px);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .route-panel::before {
  top: 0;
  bottom: auto;
  left: -1px;
  width: 1px;
  height: 92px;
  background: linear-gradient(var(--garden-gold), var(--garden-violet), transparent);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .route-map::before,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .route-map__rings,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .route-map__rings i {
  border-radius: 51% 49% 62% 38%;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .route-map svg path {
  stroke: color-mix(in srgb, var(--garden-silver) 62%, transparent);
  stroke-dasharray: 2 6;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .route-core {
  border-radius: 43% 57% 48% 52%;
  background: color-mix(in srgb, var(--garden-sheet-strong) 68%, transparent);
  color: var(--garden-gold);
  clip-path: polygon(50% 0, 82% 15%, 100% 48%, 83% 85%, 48% 100%, 13% 83%, 0 48%, 18% 14%);
}

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

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .activity-bar {
  border-top: 3px solid var(--garden-gold);
  background: linear-gradient(90deg, transparent 0 46%, var(--garden-violet) 46% 54%, transparent 54%);
  clip-path: none;
  opacity: 0.7;
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .notice-panel {
  background:
    linear-gradient(138deg, color-mix(in srgb, var(--garden-violet) 9%, transparent), transparent 58%),
    var(--garden-sheet);
  color: var(--text-1);
  box-shadow: 13px 17px 0 color-mix(in srgb, var(--garden-cold) 5%, transparent);
  clip-path: polygon(0 11%, 14% 2%, 91% 0, 100% 19%, 95% 100%, 8% 93%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .notice-panel::before {
  top: 19%;
  right: auto;
  bottom: 18%;
  left: 18px;
  width: 1px;
  height: auto;
  border: 0;
  border-radius: 0;
  background: linear-gradient(var(--garden-silver), var(--garden-violet), var(--garden-gold));
  box-shadow: none;
}

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

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .notice-panel__index span,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .notice-panel .notice-kicker,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .notice-panel p,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .notice-panel .text-action,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .notice-panel .text-action span {
  color: var(--text-2);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .notice-panel .text-action {
  border-top-color: var(--line-strong);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .quick-panel {
  background: linear-gradient(118deg, color-mix(in srgb, var(--garden-violet) 6%, transparent), transparent 66%);
  clip-path: polygon(2% 2%, 9% 0, 96% 3%, 100% 16%, 97% 93%, 89% 100%, 3% 95%, 0 77%);
}

html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .quick-panel pre,
html[data-surface="member"][data-member-active="true"][data-member-theme="garden"] .guide-content pre {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--garden-silver) 46%, transparent);
  border-left: 1px solid var(--garden-gold);
  background: var(--garden-code);
  color: var(--garden-code-text);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  clip-path: polygon(0 0, 97% 0, 100% 14px, 99% 100%, 2% 97%, 0 82%);
}