#fractal-tree-app {
  background:
    radial-gradient(circle at var(--sfi-stage-center-x) var(--sfi-stage-center-y), rgba(76, 161, 205, 0.075), transparent 36%),
    radial-gradient(circle at 55% 112%, rgba(210, 175, 103, 0.045), transparent 42%),
    #020306;
}

.fractal-tree-stage { touch-action: none; }

#fractal-tree-2d,
#fractal-tree-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#fractal-tree-2d[hidden],
#fractal-tree-3d[hidden] { display: none; }

.fractal-tree-aura {
  position: absolute;
  z-index: 0;
  left: var(--sfi-stage-center-x);
  top: var(--sfi-stage-center-y);
  width: min(48vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(104, 204, 243, 0.055), transparent 68%);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.fractal-tree-webgl-fallback {
  position: absolute;
  z-index: 3;
  left: var(--sfi-stage-center-x);
  top: var(--sfi-stage-center-y);
  width: min(280px, 70vw);
  color: var(--sfi-muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  transform: translate(-50%, -50%);
}

#fractal-tree-panel { --sfi-control-label-width: 76px; }

#fractal-tree-panel .sfi-control-row:first-of-type { margin-top: 12px; }

.fractal-tree-binary-angles {
  display: contents;
}

.fractal-tree-main-angle {
  display: grid;
  grid-template-columns: var(--sfi-control-label-width, 76px) 1fr;
  min-height: 62px;
  align-items: center;
  margin: 3px 0 6px;
  color: var(--sfi-muted, rgba(255, 255, 255, 0.72));
  font-size: 11px;
}

.fractal-tree-angle-dial-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.fractal-tree-angle-dial-row.is-spatial { justify-content: flex-start; }

.fractal-tree-binary-angles[hidden] { display: none; }

.fractal-tree-color-section { margin: 8px 0 5px; }
.fractal-tree-materials { --sfi-button-columns: 3; }
#fractal-tree-panel .fractal-tree-materials button {
  min-width: 0;
  padding-inline: 3px;
  font-size: 8px;
}
#fractal-tree-material-quality { display: block; margin: 5px 2px 0; }
.fractal-tree-palettes { display: flex; justify-content: center; gap: 4px; }
.fractal-tree-palettes button {
  display: flex;
  min-width: 0;
  min-height: 32px;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  padding: 4px;
  font-size: 7px;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
}
#fractal-tree-panel .fractal-tree-palettes button { padding: 4px; font-size: 7px; }
.fractal-tree-palettes i { width: 16px; height: 6px; flex: 0 0 auto; border-radius: 4px; }
.fractal-tree-palettes [data-tree-color="monochrome"] i { background: linear-gradient(90deg,#050505,#fff,#5b5b5b,#f5f5f5); }
.fractal-tree-palettes [data-tree-color="blue"] i { background: linear-gradient(90deg,#6daee4,#1767b1,#0a376b); }
.fractal-tree-palettes [data-tree-color="gradient"] i { background: linear-gradient(90deg,#dff8ff,#33c2e8,#ebad4e); }
.fractal-tree-palettes [data-tree-color="pulse"] i { background: linear-gradient(90deg,#4825d4,#36dcff,#7ff0bd,#ff83d5,#ffdc75); }

.fractal-tree-structure-toggles { --sfi-button-columns: 3; }
.fractal-tree-sphere-toggles { --sfi-button-columns: 2; }
.fractal-tree-sphere-toggles.is-planar { --sfi-button-columns: 1; }
.fractal-tree-vertex-mode { --sfi-button-columns: 1; margin-top: 4px; }
.fractal-tree-view-actions { --sfi-button-columns: 2; margin-top: 6px; }
#fractal-tree-limit-note { margin: 6px 2px 10px; }
.fractal-tree-construction-actions { --sfi-button-columns: 2; margin-top: 6px; }
.fractal-tree-speed { margin-top: 0; }
.fractal-tree-control-section { margin-top: 10px; padding-top: 9px; }

#fractal-tree-panel .fractal-tree-structure-toggles button,
#fractal-tree-panel .fractal-tree-sphere-toggles button {
  min-width: 0;
  padding-inline: 4px;
  font-size: 8.5px;
}

.fractal-tree-mini-label {
  display: block;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.43);
  font-size: 8px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.fractal-tree-preset-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

#fractal-tree-panel .fractal-tree-preset-grid button {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  flex: 0 0 calc((100% - 15px) / 4);
  overflow: hidden;
  padding: 0;
  border-radius: 50%;
  background: #010407;
}

.fractal-tree-preset-grid canvas { display: block; width: 100%; height: 100%; border-radius: 50%; clip-path: circle(49.5% at 50% 50%); }
.fractal-tree-preset-grid span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  left: 4px;
  overflow: hidden;
  padding: 2px 3px;
  border-radius: 999px;
  background: rgba(1, 4, 8, 0.78);
  color: rgba(241, 251, 255, 0.94);
  font-size: 7px;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fractal-tree-rule {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 9px 2px 0;
  color: var(--sfi-blue-muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  letter-spacing: 0.015em;
}

.fractal-tree-rule-card { pointer-events: none; }
.fractal-tree-rule-kicker { display: block; color: rgba(191, 232, 251, 0.58); font-size: 8px; letter-spacing: 0.13em; text-transform: uppercase; }
#fractal-tree-rule-canvas { display: block; width: 100%; aspect-ratio: 20 / 11; margin-top: 4px; }
.fractal-tree-rule-card .fractal-tree-rule { display: grid; justify-content: initial; gap: 3px; margin: 5px 3px 2px; font-size: 12px; line-height: 1.3; }

.fractal-tree-rule sub { font-size: 0.7em; }

@media (max-width: 640px) {
  #fractal-tree-panel { --sfi-control-label-width: 72px; }
  .fractal-tree-rule { font-size: 10px; }
}

@media (max-width: 430px) {
  #fractal-tree-panel .sfi-result-card { margin-top: 7px; }
  .fractal-tree-rule { margin-top: 6px; }
}