:root {
  --sceneleaf-night: #06100b;
  --sceneleaf-spruce: #0b1b12;
  --sceneleaf-moss: #285c38;
  --sceneleaf-leaf: #79d58c;
  --sceneleaf-amber: #d8a24a;
  --sceneleaf-copper: #b9683f;
  --sceneleaf-birch: #f0eadc;
}

body {
  background-color: var(--sceneleaf-night);
}

html[data-theme="dark"],
.studio-body,
.editor-shell {
  --lime: var(--sceneleaf-leaf);
  --blue: var(--sceneleaf-amber);
}

.studio-body::before {
  background:
    radial-gradient(circle at 82% 8%, rgba(216, 162, 74, .13), transparent 25rem),
    radial-gradient(circle at 16% 80%, rgba(121, 213, 140, .09), transparent 28rem),
    linear-gradient(rgba(121, 213, 140, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121, 213, 140, .025) 1px, transparent 1px) !important;
  background-size: auto, auto, 52px 52px, 52px 52px !important;
}

.greenline-auth {
  --gl-lime: var(--sceneleaf-leaf) !important;
  --gl-blue: var(--sceneleaf-amber) !important;
}

.greenline-auth::before {
  background:
    linear-gradient(rgba(121, 213, 140, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121, 213, 140, .025) 1px, transparent 1px),
    radial-gradient(circle at 78% 12%, rgba(216, 162, 74, .17), transparent 30%),
    radial-gradient(circle at 14% 80%, rgba(121, 213, 140, .09), transparent 27%) !important;
  background-size: 52px 52px, 52px 52px, auto, auto !important;
}

.greenline-auth .signup-side::before {
  background:
    linear-gradient(90deg, rgba(5, 13, 8, .86), rgba(5, 13, 8, .18)),
    url("assets/sceneleaf-nordic-autumn-hero-v1.png") 68% center / cover no-repeat !important;
}

.brand > span,
.studio-brand > span,
.editor-logo > span,
.studio-entry-brand > span,
.brand-mark {
  position: relative;
  overflow: hidden;
  border-radius: 52% 12% 52% 12% !important;
  background: linear-gradient(145deg, var(--sceneleaf-leaf), #3d8d58) !important;
  color: #07130c !important;
  box-shadow: 0 0 28px rgba(121, 213, 140, .2);
  transform: rotate(-5deg);
}

.brand > span::after,
.studio-brand > span::after,
.editor-logo > span::after,
.studio-entry-brand > span::after,
.brand-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 18%;
  width: 1px;
  height: 68%;
  background: rgba(7, 19, 12, .38);
  transform: rotate(35deg);
}

.brand > span,
.studio-brand > span,
.editor-logo > span,
.studio-entry-brand > span,
.brand-mark { font-style: normal; }

.primary,
.create-button,
.download-button,
.export-main,
.wide-tool.lime,
.tour-primary,
.apply-mask-edit {
  background: linear-gradient(135deg, #8ee09d, #5fb876) !important;
  color: #06100b !important;
}

.site-header,
.studio-sidebar,
.editor-topbar,
.tool-rail,
.timeline-shell {
  border-color: rgba(240, 234, 220, .11) !important;
}

.studio-sidebar nav a.active,
.studio-sidebar nav a:hover,
.tool-rail button.active,
.tool-rail button:hover {
  background: rgba(121, 213, 140, .09) !important;
  color: var(--sceneleaf-leaf) !important;
}

.editor-topbar,
.tool-rail,
.timeline-shell,
.studio-sidebar {
  background-color: rgba(5, 13, 8, .94) !important;
}

::selection {
  background: rgba(216, 162, 74, .35);
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .brand > span,
  .studio-brand > span,
  .editor-logo > span,
  .studio-entry-brand > span,
  .brand-mark { transition: transform .25s ease, filter .25s ease; }
  .brand:hover > span,
  .studio-brand:hover > span,
  .editor-logo:hover > span,
  .studio-entry-brand:hover > span { transform: rotate(3deg) scale(1.04); filter: brightness(1.08); }
}