:root { color-scheme: dark; --bg:#0d1218; --panel:#151c24; --edge:#29313b; --text:#edf1f5; --muted:#a5b0be; --blue:#78baff; }
* { box-sizing: border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; font-size:16px; line-height:1.5; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid var(--blue); outline-offset:5px; border-radius:3px; }
img { max-width:100%; display:block; }
.wrap { max-width:1180px; padding:0 30px; margin:auto; }
.topbar { height:94px; border-bottom:1px solid var(--edge); display:flex; align-items:center; }
.topbar .wrap { width:100%; display:flex; align-items:center; justify-content:space-between; gap:22px; }
.brand { display:inline-flex; align-items:center; min-width:0; }
.brand img { width:45px; height:45px; object-fit:contain; }
.navigation { display:flex; align-items:center; gap:32px; }
.navigation a { color:#c1cad5; font-size:14px; transition:color .15s ease; }
.navigation a[aria-current='page'], .navigation a:hover { color:var(--text); }
.navigation a[aria-current='page'] { box-shadow:0 2px var(--blue); padding-bottom:4px; }
main { min-height:calc(100vh - 178px); }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); align-items:center; gap:68px; padding-top:92px; padding-bottom:112px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(39px,5.4vw,65px); line-height:1.09; letter-spacing:-.03em; font-weight:700; margin-bottom:24px; }
.hero p { font-size:19px; color:var(--muted); max-width:370px; margin:0 0 34px; line-height:1.65; }
.primary-link { display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:13px 19px; border-radius:5px; color:#0c1722; font-weight:650; font-size:14px; background:var(--blue); transition:background .15s ease; }
.primary-link:hover { background:#a2d0ff; }
.arrow { display:inline-block; font-size:19px; line-height:1; font-weight:400; }
.hero-visual { display:block; min-width:0; }
.hero-visual .picture { background:#141b22; border:1px solid #34404b; padding:7px; border-radius:7px; overflow:hidden; }
.hero-visual img { width:100%; aspect-ratio:16 / 10; object-fit:cover; border-radius:3px; }
.figure-caption { display:flex; align-items:center; justify-content:space-between; color:#bfc9d5; font-size:13px; margin-top:12px; }
.figure-caption span:last-child { color:var(--blue); }
.section-head { margin:75px 0 34px; }
.section-head h1 { margin:0 0 10px; }
.section-head p { font-size:16px; color:var(--muted); margin:0; }
.section-rule { border:0; border-top:1px solid var(--edge); margin:0 0 35px; }
.script-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:34px;row-gap:52px; margin-bottom:62px;}
.script { min-width:0; }
.script a.image-link { display:block; overflow:hidden; padding:7px; background:var(--panel); border:1px solid var(--edge); border-radius:6px; transition:border-color .15s ease; }
.script a.image-link:hover { border-color:#4d7ca6; }
.script a.image-link img {width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover;border-radius:3px; }
.script-info {display:flex;justify-content:space-between;align-items:start; gap:12px; padding:17px 1px 0;}
.script h2 { font-size:24px; line-height:1.18; letter-spacing:-.025em; font-weight:600; margin:0 0 5px; }
.script p { color:var(--muted); font-size:14px; margin:0; max-width:440px; }
.script-info .repo-link { font-size:13px; white-space:nowrap; color:var(--blue); padding-top:6px; }
.script-info .repo-link:hover, .text-link:hover { text-decoration:underline; text-underline-offset:4px; }
.script-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:25px 0; border-top:1px solid var(--edge); margin-bottom:90px; }
.script-row h2 {margin:0 0 4px;font-size:23px;font-weight:600;letter-spacing:-.02em;}
.script-row p {margin:0;color:var(--muted);font-size:14px;}
.text-link {color:var(--blue);font-size:14px;white-space:nowrap;}
.footer { border-top:1px solid var(--edge); }
.footer .wrap { min-height:84px; display:flex;align-items:center;justify-content:space-between;gap:20px; }
.footer p { margin:0; color:#8795a4; font-size:13px; }
.footer a {color:var(--muted);font-size:13px;}
.footer a:hover { color:var(--text); }
@media (max-width:850px) { .hero { grid-template-columns:1fr; gap:40px; padding-top:70px; padding-bottom:75px; } .hero p{max-width:520px;} .script-grid {gap:36px 22px;} }
@media (max-width:600px) { .wrap { padding:0 18px; } .topbar {height:76px;} .brand img {width:36px;height:36px;} .navigation {gap:15px;} .navigation a{font-size:12px;} .hero {padding-top:62px;} h1{font-size:43px;} .hero p{font-size:17px;} .section-head{margin-top:58px;} .script-grid {grid-template-columns:1fr;gap:37px;} .script-row {margin-bottom:65px;} .footer .wrap {min-height:88px;} }
@media (prefers-reduced-motion:reduce) { html {scroll-behavior:auto;} *, *::before, *::after { transition:none!important; } }

/* Homepage branding */
.hero-home {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 178px);
  padding: 70px 0 100px;
  text-align: center;
}
.hero-home .hero-copy { width: min(100%, 640px); }
.hero-home .hero-logo {
  position: relative;
  width: min(100%, 520px);
  margin: 0 auto 4px;
  line-height: 0;
}
.hero-home .hero-logo img { width: 100%; height: auto; }
/* Repaint only the small DEVELOPMENTS lettering using the same source image. */
.hero-home .hero-logo-white-text {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
  clip-path: polygon(32% 65%, 100% 65%, 100% 100%, 32% 100%);
  pointer-events: none;
}
.hero-home p { max-width: none; margin: 0 0 28px; font-size: 17px; }
@media (max-width: 600px) {
  .hero-home { min-height: calc(100vh - 164px); padding: 55px 0 78px; }
  .hero-home p { font-size: 15px; }
}

/* Script availability */
.free-label { display:inline-block; margin-left:8px; vertical-align:middle; font-size:11px; font-weight:700; letter-spacing:.07em; line-height:1.3; color:var(--blue); }

/* Clearer, less rounded headline typography */
h1, h2 { font-family: Arial, Helvetica, sans-serif; }
.section-head h1 { max-width: 930px; font-size: clamp(33px, 4.2vw, 50px); line-height: 1.14; }

/* Stacked repository and video links for scripts with a showcase. */
.script-links { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; gap:5px; padding-top:6px; }
.script-links a { color:var(--blue); font-size:13px; line-height:1.4; white-space:nowrap; }
.script-links a:hover { text-decoration:underline; text-underline-offset:4px; }