/* JUSTYAE — graphite background, white type, emerald accents. */
:root {
  color-scheme: dark;
  --paper: #111410;
  --dark: #0c100d;
  --ink: #f3f6f1;
  --muted: #a4afa3;
  --line: #2b352b;
  --lime: #53d999;
  --surface: #191f18;
}
body, .header, .hero-art { background: var(--paper); color: var(--ink); }
.header nav a:hover, .feature-grid a:hover, footer a:hover { color: var(--lime); }
.brand-logo img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
.brand-tagline { color: #b4c0b3; }
.nav-cta, .play { border-color: #40513e; }
.nav-cta:hover { background: var(--surface); border-color: var(--lime); }
.hero h1 em, em, h2 span, .contact em { color: var(--lime); }
.intro, .texture-copy>p:not(.eyebrow), .art-label small { color: var(--muted); }
.eyebrow { color: #c1d1bd; }
.eyebrow i, .art-top i { background: var(--lime); }
.primary, .contact .dark { background: var(--lime); color: #102217; }
.primary:hover, .contact .dark:hover { background: #79e8b1; }
.hero-art>img { filter: none; }
.art-top, .art-bottom { color: #bac7b4; }
.art-label { color: #fff; text-shadow: 0 1px 8px #111410; }
.art-bottom b, .cross, .capability-strip b, .workflow li>span { color: var(--lime); }
.number, .disclaimer, .library-note, footer p, footer>a:last-child { color: #a2af9d; }
.feature-grid img { background: #e8eee2; border-radius: 9px; padding: 5px; }
.texture { background: #151c15; border-block: 1px solid var(--line); }
.texture-options button { border-color: #344332; color: var(--ink); }
.texture-options button:hover { background: #1c2a1e; }
.texture-options button.active { background: #203727; border-color: #53d999; }
.texture-visual { background: #0d150f; border: 1px solid #2a3d2c; }
.texture-head, .texture-caption { color: #a8c2ac; }
.tabs button { color: #becaba; }
.tabs button:hover { background: #243024; }
.tabs button.active { background: var(--lime); color: #102217; }
.search { background: #181f17; }
.search input { color: var(--ink); }
.search input::placeholder { color: #a1b09b; opacity: 1; }
.search>span { color: #a7bba0; }
.command-card { background: var(--surface); color: var(--ink); border-color: #303d2e; }
.command-card:hover { background: #202e20; border-color: var(--lime); }
.command-card img { background: #e8eee2; padding: 4px; border-radius: 7px; }
.command-card small { color: #aabb9f; }
.contact { background: #18291c; border: 1px solid #35583c; }
.contact-note { color: #a2b99e; }
dialog { background: #1a231a; color: var(--ink); border: 1px solid #3c5039; }
dialog::backdrop { background: #050905cc; }
dialog img { background: #e8eee2; padding: 5px; border-radius: 9px; }
button:focus-visible, a:focus-visible, input:focus-visible { outline-color: var(--lime); }
::selection { background: #53d999; color: #102217; }
@media(max-width:760px) {
  .header nav { background: var(--paper); }
  .hero h1 em { color: var(--lime); }
}

/* Supplied green emblem with a crisp white wordmark. Original PNG is retained. */
.header .brand-logo,.footer-brand .brand-logo{width:120px;height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;overflow:visible}
.brand-symbol{display:block;position:relative;width:80px;height:37px;overflow:hidden;flex:none}
.brand-logo .brand-symbol img{position:absolute;width:200px;height:200px;max-width:none;left:-7px;top:-76px;filter:none;mix-blend-mode:screen}
.brand-wordmark{display:block;color:#fff;font-family:Manrope,Arial,sans-serif;font-size:16px;line-height:1.2;font-weight:750;letter-spacing:4px;padding-left:4px}
@media(max-width:760px){.header .brand-logo{width:110px;height:78px}.brand-wordmark{font-size:15px;letter-spacing:3.5px}}

/* Full supplied horizontal logo, including its original white lettering. */
.header .brand-horizontal,.footer-brand .brand-horizontal{display:block;width:220px;height:auto;aspect-ratio:1896 / 355;overflow:hidden;flex-shrink:0}
.brand-horizontal svg{display:block;width:100%;height:100%;overflow:hidden}
@media(max-width:1100px){.header .brand-horizontal{width:180px}.header .brand-tagline{display:none}}
@media(max-width:760px){.header .brand-horizontal{width:180px}.footer-brand .brand-horizontal{width:190px}}