/* Shared night palette: keep lime concentrated on actions and edge light. */
:root {
  color-scheme: dark;
  --night-base: #0b0f0d;
  --night-surface: #141c17;
  --night-raised: #1b261e;
  --night-line: #303e33;
  --night-text: #eef3e9;
  --night-muted: #aab5a4;
  --muted: var(--night-muted);
  --line: var(--night-line);
}
html,
body { background: var(--night-base); }
body { color: var(--night-text); }
:focus-visible { outline-color: var(--lime); }

.header,
.header.scrolled {
  color: #eef3e9;
  background: #0b100ded;
  border-bottom-color: #d7edbf14;
  backdrop-filter: blur(18px);
  box-shadow: none;
}
.header .desktop-nav a,
.header .language-button { color: #acb7a4; }
.header .desktop-nav a:hover,
.header .desktop-nav a.active,
.header .language-button:hover { color: #edfacf; }
.header .desktop-nav a.active:after { background: var(--lime); }
.header .icon-button:hover { background: #24301e; }
.header .mobile-nav { color: #dce7d2; background: #111812; border-color: #2d3927; }
.header .mobile-nav a:hover { background: #22301a; }

/* Preserve the supplied shapes and transparency. Only the dark wordmark is
   reversed for navigation and footer; the original lime letters sit above it. */
.brand-wordmark { filter: brightness(0) invert(1); }
.brand-accent-on-dark { display: block; }

.hero {
  background: #0b0f0d;
  color: #f2f5ed;
  border-bottom: 1px solid #26301f;
}
.hero:after { height: 100px; background: linear-gradient(0deg, #0b0f0d, transparent); }
.hero .eyebrow { color: #a9b79b; }
.hero-highlight {
  background-image: linear-gradient(110deg, #d6ff84, #b6ff00 70%, #a4e72b);
}
.hero-highlight:after { background: #b6ff001a; }
.hero .typing-cursor { background: var(--lime); }
.hero-description { color: #b0b9ac; }
.hero-platforms,
.hero-platforms .icon { color: #aebaa1; }
.hero-platforms button:hover { color: #e5ffc1; }
.hero-pillars a { border-color: #c4df9c26; }
.hero-pillars strong { color: #edf3e5; }
.hero-pillars small { color: #9eaa92; }
.hero-pillars .icon { color: #b6e967; }
.hero-watch-button {
  background: #182019;
  color: #e0f1ca;
  border: 1px solid #536442;
  box-shadow: 0 10px 20px #0003;
}
.hero-watch-button .icon { color: var(--lime); }
.hero-watch-button:hover { background: #25321e; box-shadow: 0 10px 24px #0005; }
.hero-watch-button:active { background: #314324; }
.hero .app-window { color: var(--night-text); box-shadow: 0 30px 70px #0008, 0 0 70px #8ebd001a; }
.hero .visual-caption { color: #e3edda; background: #182018f0; border-color: #536442; box-shadow: 0 12px 35px #0005; }
.hero .visual-caption div > span { color: #9eae8a; }
.hero .caption-star { color: #b6ff00; }
.hero .carousel-dot { background: #46543b; }
.hero .carousel-dot.active { background: #b6ff00; }
.hero .carousel-controls > span,
.hero .carousel-pause,
.hero .scroll-cue { color: #9ba98c; }

.download.download-reference { color: #f2f5ed; background: #0b0f0d; }
.download-reference h2 { color: #f2f5ed; }
.download-reference .download-description { color: #adb8a5; }
.download-reference .download-note { color: #9ca990; }
.download-reference .download-values { color: #c9d4be; }
.download-reference .download-values .icon { color: #b6ed71; }

.hero-download-split { box-shadow: 0 12px 28px #8bbb001f, 0 4px 12px #0003; }
.hero-download-split:has(button:hover) { box-shadow: 0 12px 32px #9acb0038; }
.hero-download-menu { background: #151d16; color: #ecf2e8; border-color: #415238; box-shadow: 0 16px 40px #0008; }
.hero-download-heading { color: #a7b797; }
.hero-download-menu small { color: #a1b38f; }
.hero-download-menu button:hover,
.hero-download-menu button:focus-visible { background: #2b3b20; }
.hero-download-menu .option-arrow { color: #c0f381; }
.dark-panel :focus-visible,
.header :focus-visible { outline-color: #b6ff00; }

/* Shared text and controls. The original lime buttons retain dark labels. */
.section-kicker { color: #a7bc8f; }
.section-heading p,
.section-copy > p { color: var(--night-muted); }
.small-note { color: #a2ae9b !important; }
.preview-badge { color: #c0cfb3; background: #263121; }
.text-button { color: #dcf4b7; border-bottom-color: #638042; }
.text-button:hover { color: var(--lime); }
.icon-button:hover { background: #293729; }
.button { box-shadow: 0 6px 20px #90bb0014; }
.button:hover { background: #c5ff39; box-shadow: 0 9px 26px #90bb0029; }
.button-white { color: var(--night-text); background: var(--night-raised); border-color: #526345; }
.button-white:hover { background: #2b3a24; }
.tiny-divider { background: #45513c; }
.status-dot { background: #b0db69; }

/* The app mockup follows the same palette as the real site. */
.app-window { background: #121914; border-color: #4b5a42; }
.app-titlebar { background: #1c261f; border-color: #354230; color: #aebba2; }
.app-sidebar { background: #101711; border-color: #2d3b29; }
.app-wordmark > span { color: var(--lime); }
.app-nav-item { color: #a8b69d; }
.app-nav-item.selected { color: #d6ffa0; background: #2c3d1d; }
.mini-avatar { color: #d8f5b1; background: #304226; }
.app-sidebar-bottom { color: #b2bfa7; }
.app-welcome,
.app-welcome[data-slide="0"] {
  background: radial-gradient(ellipse at 85% 30%, #5b7048 0, transparent 60%), linear-gradient(120deg, #1d2c1a, #2d3c26);
}
.app-welcome[data-slide="1"] {
  background: radial-gradient(ellipse at 85% 30%, #5c7052 0, transparent 60%), linear-gradient(120deg, #1d2821, #334131);
}
.app-welcome[data-slide="2"] {
  background: radial-gradient(ellipse at 85% 30%, #536250 0, transparent 60%), linear-gradient(120deg, #1b2420, #2b372d);
}
.micro-label { color: #c6d7ae; }
.app-welcome p { color: #c2d0b5; }
.app-mini-button { color: var(--charcoal); }
.welcome-path { background: #7b945557; }
.welcome-spark { color: var(--lime); }
.app-section-top > span { color: #a5b298; }
.shortcut { border: 1px solid #39482f; }
.shortcut-lime { background: #24321b; }
.shortcut-peach { background: #253027; }
.shortcut-gray { background: #202c29; }
.shortcut small { color: #adbc9b; }
.shortcut .icon,
.shortcut > span { color: #c4e496; }
.shortcut:hover { filter: brightness(1.13); }

/* Alternating charcoal surfaces keep the long page structured. */
.features {
  background: radial-gradient(ellipse at 50% 100%, #b6ff0006, transparent 65%), var(--night-base);
}
.feature-card {
  color: var(--night-text);
  background: linear-gradient(145deg, #1c271e, #111913);
  border-color: #303d2a;
  box-shadow: 0 12px 30px #0003, inset 0 1px #dfffb10a;
}
.feature-card:hover,
.feature-card:focus-visible {
  background: linear-gradient(145deg, #273620, #172214);
  border-color: #668441;
  box-shadow: 0 18px 35px #0005, 0 0 24px #b6ff0009;
}
.feature-card p { color: #b0bba6; }
.feature-icon,
.feature-icon.peach,
.feature-icon.sage,
.feature-icon.gray,
.feature-icon.soft-peach {
  color: #c7f490;
  background: #2b3a22;
  box-shadow: inset 0 1px #d1f5a52b, 0 4px 14px #0002;
}
.feature-icon.gray,
.feature-icon.soft-peach { color: #cbd8bf; background: #2b352d; }
.feature-arrow { color: var(--lime); }
.section-orbit { border-color: #26351b; }
.creation {
  background: radial-gradient(ellipse at 85% 50%, #b6ff0007, transparent 60%), #101713;
  border-block: 1px solid #253022;
}
.check-list li { color: #c1cbb8; }
.check-list .icon { stroke: #b9ec7d; }
.demo-disclaimer { color: #a5b29a; }
.creation-decor { color: #344a24; }
.studio-preview {
  color: var(--night-text);
  background: var(--night-surface);
  border-color: #44563a;
  box-shadow: 0 25px 55px -20px #0009, 0 0 45px #b6ff0005;
}
.studio-preview-top { background: #1a251c; border-color: #34412d; }
.studio-brand .icon { color: var(--lime); }
.studio-tabs { background: #131b15; border-color: #34412d; }
.studio-tabs button { color: #a8b49c; }
.studio-tabs button:hover,
.studio-tabs button.selected { color: #d7f5ae; }
.input-label { color: #afbea0; }
.fake-textarea { color: #c5d0ba; background: #0e1610; border-color: #35452e; }
.style-chips span { color: #acbaa0; background: #242f20; }
.style-chips .selected { color: #d4f7a4; background: #30451d; border-color: #5e7c39; }
.result-caption { color: #b4c2a7; }
.studio-bottom { border-color: #34412d; color: #a6b39a; }
.community {
  background: radial-gradient(ellipse at 20% 45%, #a0cc0006, transparent 55%), #0c110e;
}
.art-card {
  color: var(--night-text);
  background: #1b251d;
  border-color: #263225;
  box-shadow: 0 13px 30px #0005;
}
.art-card:hover { border-color: #506637; box-shadow: 0 20px 35px #0007; }
.art-card-caption > span:last-child { color: #c5ef8c; }
.inspiration-tags > span { color: #bdcbb0; background: #23301f; }
.help { background: #101612; border-top: 1px solid #263321; }
.faq-list details { background: #18211a; border-color: #34402e; box-shadow: 0 6px 24px #0002; }
.faq-list summary:hover { background: #202e1c; }
.faq-list summary:focus-visible { outline-offset: -4px; border-radius: 10px; }
.faq-list summary .icon { color: #bdd79a; }
.faq-list details[open] { border-color: #5b7b38; background: #1c291a; }
.faq-list details[open] summary { color: #ddf4c0; }
.faq-list details p { color: #b8c5ad; }
.faq-decor { color: #293c1e; }
.footer { background: #090d0b; border-color: #2c3826; }
.footer-center small,
.footer-right { color: #acb79f; }
.footer-right small { color: #9aa68e; }
.footer-right a:hover { color: var(--lime); }
.back-top { background: #1a261a; color: #d3ecb0; border-color: #4b6336; box-shadow: 0 5px 20px #0005; }

/* Dialogs, form states and generated result panels use the shared surfaces. */
dialog { color: var(--night-text); background: #141c16; border-color: #4a5d3d; box-shadow: 0 25px 100px #0009; }
dialog::backdrop { background: #030704b8; }
.dialog-header .icon-button { background: #2a3725; }
.dialog-header .icon-button:hover { background: #394e2c; }
.dialog-intro { color: #b3c0a6; }
#demo-form select,
#demo-form textarea { color: #e5eddd; background: #0d150f; border-color: #45583a; outline-color: var(--lime); }
#demo-form textarea::placeholder { color: #9baa8f; }
.demo-styles span { color: #b8c7ab; background: #22301e; border-color: #3a4c30; }
.demo-styles input:checked + span { color: #e1ffc0; background: #324d1e; border-color: #9ecb35; }
.demo-styles input:focus-visible + span { outline-color: var(--lime); }
.demo-output { background: #0d150f; border: 1px solid #34462c; }
.demo-result-placeholder > .icon { color: #b9ed73; }
.demo-result-placeholder > span,
.demo-result-info p { color: #bbcbb0; }
.demo-result-info .text-button { border-color: #637f45; }
.demo-output-note { color: #a4b397; }
.tool-option { background: #18231a; border-color: #35462d; }
.tool-option > .icon,
.mac-symbol { color: #bdceaa; }
.tool-option p { color: #adbea0; }
.tool-option.available { background: #26371d; border-color: #546f37; }
.tool-option.available > .icon { color: var(--lime); }
.coming-soon { color: #b0bea3; background: #2a3624; }
.gallery-filters button { color: #bdcdb1; background: #293823; }
.gallery-filters button:hover { background: #3a4c2c; }
.gallery-filters button.selected { background: var(--lime); color: var(--charcoal); }
.gallery-item { background: #1b271b; border-color: #3c5032; }
.gallery-item p { color: #b5c6a7; }
.gallery-item .text-button { border-color: #69834a; }
.toast { background: #25331f; border: 1px solid #657f45; color: #edffdc; box-shadow: 0 8px 30px #0006; }

@media (max-width: 700px) {
  .download-banner-art { opacity: .8; }
}