:root {
  --panda-black: #101512;
  --bamboo-green: #2f6b4f;
  --young-bamboo: #82b96b;
  --mist-white: #f3f7f1;
  --bamboo-gold: #d6b967;
  --board-ink: #142019;
  --board-deep: #142c22;
  --sensor-cyan: #3d775c;
  --season-gold: #a78937;
  --season-light: var(--bamboo-gold);
  --action-green: var(--bamboo-green);
  --code-blue: #315b48;
  --paper: #eaf1e9;
  --panel: rgba(248, 252, 247, 0.78);
  --panel-soft: rgba(226, 238, 226, 0.82);
  --ink: #142019;
  --muted: #607067;
  --line: rgba(47, 107, 79, 0.2);
  --line-strong: rgba(47, 107, 79, 0.43);
  --shadow: 0 24px 60px -22px rgba(16, 32, 24, 0.3);
  --display: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

html {
  background: #e7efe7;
}

body {
  background:
    radial-gradient(circle at 10% 4%, rgba(130, 185, 107, 0.22), transparent 29rem),
    radial-gradient(circle at 92% 0%, rgba(214, 185, 103, 0.16), transparent 25rem),
    linear-gradient(142deg, #e6efe6, #f5f8f3 48%, #dfeae2);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: repeating-linear-gradient(91deg, transparent 0 94px, rgba(47, 107, 79, 0.045) 95px 101px, transparent 102px 158px);
  content: "";
}

.circuit-line {
  border: 0;
  border-radius: 45% 55% 50% 48%;
  background: repeating-linear-gradient(88deg, transparent 0 46px, rgba(47, 107, 79, 0.12) 47px 53px, transparent 54px 92px);
  filter: blur(1px);
  animation: bambooDrift 22s ease-in-out infinite alternate;
}

.line-two {
  animation-delay: -10s;
}

@keyframes bambooDrift {
  from { translate: -1% 0; rotate: -1deg; }
  to { translate: 1.5% 1%; rotate: 1deg; }
}

.studio-header,
.workspace-panel,
.output-panel,
.studio-footer {
  border-color: rgba(255, 255, 255, 0.68);
  background: rgba(248, 252, 247, 0.72);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.studio-header {
  border-radius: 24px 24px 10px 10px;
}

.panda-program-seal {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  background: rgba(243, 247, 241, 0.86);
  box-shadow: 0 18px 34px -18px rgba(16, 21, 18, 0.55);
}

.panda-comfort-mark {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.title-copy h1 {
  color: var(--panda-black);
  font-size: clamp(28px, 2.7vw, 44px);
  font-weight: 760;
  letter-spacing: -0.045em;
}

.title-copy h1 span,
.eyebrow,
.panel-kicker {
  color: var(--bamboo-green);
}

.header-topline {
  border-bottom-color: rgba(47, 107, 79, 0.18);
}

.back-link,
.tool-button,
.copy-button,
.output-tabs button {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.back-link:hover,
.tool-button:not(:disabled):hover,
.copy-button:hover,
.output-tabs button:hover {
  transform: translateY(-2px);
}

.tool-button.is-primary {
  border-color: var(--panda-black);
  color: #fff;
  background: var(--panda-black);
  box-shadow: 0 12px 26px -16px rgba(16, 21, 18, 0.78);
}

.tool-button,
.copy-button {
  border-color: rgba(47, 107, 79, 0.3);
  color: #234e3a;
  background: rgba(239, 246, 237, 0.9);
}

.logic-rail {
  border-color: rgba(47, 107, 79, 0.2);
  background: rgba(229, 239, 227, 0.65);
}

.logic-rail li::after {
  background: rgba(47, 107, 79, 0.25);
}

.workspace-shell {
  border-color: rgba(47, 107, 79, 0.34);
  background: rgba(246, 250, 244, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.block-inspector,
.loading-card,
.error-card,
.truth-card {
  border-color: rgba(47, 107, 79, 0.2);
  background: rgba(240, 247, 239, 0.82);
  backdrop-filter: blur(12px);
}

.truth-card {
  border-left-color: var(--bamboo-gold);
}

.truth-card > span,
.loading-mark {
  color: var(--bamboo-green);
  border-color: rgba(47, 107, 79, 0.34);
  background: rgba(221, 235, 220, 0.88);
}

.output-content {
  color: #e9f2e9;
  border-color: rgba(47, 107, 79, 0.5);
  background:
    radial-gradient(circle at 94% 8%, rgba(130, 185, 107, 0.16), transparent 13rem),
    linear-gradient(145deg, #111d17, #17392a);
}

.output-content pre,
code,
.studio-footer code {
  font-family: Cascadia Mono, Consolas, var(--utility);
}

.output-tabs button[aria-selected="true"] {
  color: #fff;
  border-color: var(--bamboo-green);
  background: var(--bamboo-green);
}

.blocklyToolboxDiv,
.blocklyFlyoutBackground {
  background-color: rgba(232, 241, 230, 0.96) !important;
}

.blocklyMainBackground {
  fill: rgba(250, 252, 248, 0.88) !important;
  stroke: rgba(47, 107, 79, 0.16) !important;
}

@media (max-width: 760px) {
  .panda-program-seal {
    flex-basis: 62px;
    width: 62px;
    height: 62px;
    border-radius: 19px;
  }

  .title-copy h1 {
    font-size: clamp(24px, 8vw, 32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .circuit-line {
    animation: none;
  }

  .back-link,
  .tool-button,
  .copy-button,
  .output-tabs button {
    transition: none;
  }
}