/* /assets/guide.css: the DAW setup guides (/guides/ and /guides/mpe-*), in the same build as /download/
   and /success/: the Midnight ground with the faint 64px grid, an eyebrow over the title, headings
   without the docs' rules, steps as numbered cards, 8px cards, and the landing page's green button.
   Linked last in <head>, after each page's own CSS and /assets/site-light.css, on pages whose body has
   class "gd". Light mode is written out below, under html.msl. */

body.gd{background-color:#11151f;background-image:linear-gradient(180deg,rgba(9,13,24,.7) 0,rgba(9,13,24,.4) 250px,rgba(9,13,24,.14) 420px,rgba(9,13,24,0) 600px),repeating-linear-gradient(0deg,rgba(148,163,184,.042) 0 1px,transparent 1px 64px),repeating-linear-gradient(90deg,rgba(148,163,184,.042) 0 1px,transparent 1px 64px);background-repeat:no-repeat}
body.gd main{max-width:820px;padding:48px 20px 80px}

/* title */
.gd main h1{font-size:clamp(30px,4.2vw,44px);letter-spacing:.04em;line-height:1.15}
.gd main h1::after,.gd main h1::before{display:none}
.gd .ghead{gap:18px;margin:0 0 18px}
.gd .ghead .glogo{width:64px;height:64px;padding:10px;border:1px solid #22314E;border-radius:12px;background:#0e1422}
.gd .geyebrow{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-family:'Share Tech Mono',monospace;font-weight:400;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#e6edf5}
.gd .geyebrow::before{content:"//";color:#43cc1d;letter-spacing:0}
.gd main > .ghead + p,.gd main > h1 + p{font-size:17px;line-height:1.7;color:#bfcbdb;max-width:42em}

/* headings and text */
.gd main h2{font-family:'Aldrich','Jura',sans-serif;font-weight:400;font-size:22px;letter-spacing:.05em;color:#f1f5f9;border-top:0;padding-top:0;margin:56px 0 12px}
.gd main h2::before{content:none}
.gd main h3{font-family:'Jura',sans-serif;font-weight:700;font-size:17px;letter-spacing:.01em;color:#e2e8f0;margin:26px 0 8px}
.gd main > p,.gd main li{font-size:15.5px;line-height:1.7;color:#bfcbdb}
.gd main strong{color:#f1f5f9}

/* steps: a numbered card each */
.gd main > ol{list-style:none;counter-reset:gs;margin:14px 0 18px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.gd main > ol > li{min-width:0;counter-increment:gs;position:relative;margin:0;padding:14px 16px 14px 56px;border:1px solid #22314E;border-radius:8px;background:linear-gradient(180deg,#141b2a,#0d121d)}
.gd main > ol > li::before{content:counter(gs);position:absolute;left:16px;top:13px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#43cc1d,#2c9b0d);color:#fff;font:700 14px/1 'Rajdhani','Jura',sans-serif;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.gd main > ol > li > .callout,.gd main > ol > li > .syntabs{margin-top:12px}

/* bullet lists: a small green square; "Why ..." lists get a check */
.gd main > ul{list-style:none;margin:12px 0 18px;padding:0;display:grid;gap:8px}
.gd main > ul > li{position:relative;margin:0;padding-left:22px}
.gd main > ul > li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:1px;background:#43cc1d}
.gd main > ul.gwhy > li{padding-left:28px}
.gd main > ul.gwhy > li::before{left:5px;top:.42em;width:6px;height:11px;border-radius:0;background:none;border:solid #43cc1d;border-width:0 2.4px 2.4px 0;transform:rotate(45deg)}

/* callouts and code */
.gd .callout{border:1px solid #22314E;border-left:3px solid #43cc1d;border-radius:8px;background:#0e1422;padding:13px 16px;font-size:14.5px;line-height:1.65}
.gd .callout.warn{border-left-color:#fbbf24}
.gd main img{border-radius:8px}
.gd .syntabs{border-radius:8px;overflow:hidden}

/* buttons */
.gd .gbtn{display:inline-flex;align-items:center;gap:7px;font-family:'Rajdhani','Jura',sans-serif;font-weight:700;font-size:15px;letter-spacing:.06em;color:#e2e8f0;border:1px solid #2f3f60;border-radius:6px;padding:10px 16px;text-decoration:none}
.gd .gbtn:hover{border-color:#43cc1d;color:#fff;text-decoration:none}
.gd .pbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Rajdhani','Jura',sans-serif;font-weight:700;font-size:16px;letter-spacing:.06em;color:#fff;background:linear-gradient(180deg,#43cc1d,#2c9b0d);border:1px solid #25820b;border-radius:6px;padding:12px 22px;text-shadow:0 1px 0 rgba(0,0,0,.4);box-shadow:inset 0 1px rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.07);text-decoration:none;white-space:nowrap}
.gd .pbtn:hover{background:linear-gradient(180deg,#49e01f,#31ab0f);color:#fff;text-decoration:none}

/* the other guides, and the trial card that ends each guide */
.gd .gother{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:12px 0 0}
.gd .gother a{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #22314E;border-radius:8px;background:#0e1422;color:#e2e8f0;font-weight:600;font-size:15px;text-decoration:none;transition:border-color .15s ease}
.gd .gother a:hover{border-color:#43cc1d;color:#fff;text-decoration:none}
.gd .gother img{width:28px;height:28px;object-fit:contain;flex:none;border:0;margin:0;border-radius:4px}
.gd .gend{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:56px 0 0;padding:22px 24px;border:1px solid rgba(67,204,29,.45);border-radius:8px;background:linear-gradient(180deg,#151c2b,#0c111c);box-shadow:0 18px 40px -24px rgba(67,204,29,.35)}
.gd .gend b{display:block;font-family:'Aldrich','Jura',sans-serif;font-weight:400;font-size:19px;letter-spacing:.04em;color:#f1f5f9;margin-bottom:4px}
.gd .gend span{font-size:14.5px;color:#a3b2c6}

/* the guides index */
.gd .gsec{margin-top:56px}
.gd .gsec h2{margin-top:0}
.gd .gsub{font-size:15px;color:#93a3b8}
.gd .ghub .gcard,.gd .gvid,.gd .askbox{border-radius:8px}
.gd .askbox{border-left-width:1px;border-left-color:#22314E;background:linear-gradient(180deg,#151c2b,#0c111c)}
.gd .askrow input{border-radius:6px;padding-left:14px}
.gd .askrow button{border-radius:6px}
.gd .askq span{border-radius:8px}
.gd .askq span::before,.gd .asknext::before,.gd .askh .askverb::before{content:none}
.gd .askfoot{font-family:'Jura',sans-serif;font-size:13px;letter-spacing:0;color:#8b9bb0}
.gd .askfoot i{display:none}

@media (max-width:640px){
  body.gd main{padding:32px 16px 60px}
  .gd main > ol > li{padding-left:50px}
  .gd .gend{padding:18px}
}

/* light mode */
html.msl body.gd{background-color:#f3f6f3;background-image:repeating-linear-gradient(0deg,rgba(15,23,42,.035) 0 1px,transparent 1px 64px),repeating-linear-gradient(90deg,rgba(15,23,42,.035) 0 1px,transparent 1px 64px)}
html.msl .gd .geyebrow{color:#111811}
html.msl .gd main h2,html.msl .gd main h1{color:#0b1220;border-top:0}
html.msl .gd main h3,html.msl .gd main strong{color:#1e293b}
html.msl .gd main > p,html.msl .gd main li{color:#3d4a5c}
html.msl .gd .ghead .glogo,html.msl .gd .gother a,html.msl .gd .callout{background:#fff;border-color:#dbe3dc}
html.msl .gd .callout{border-left-color:#16a32a}
html.msl .gd .callout.warn{border-left-color:#d99a0b}
html.msl .gd main > ol > li,html.msl .gd .gend,html.msl .gd .askbox{background:#fff;border-color:#dbe3dc;box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 26px -14px rgba(15,23,42,.2)}
html.msl .gd .gend{border-color:rgba(22,163,42,.55)}
html.msl .gd .gend b,html.msl .gd .gother a{color:#0b1220}
html.msl .gd .gend span,html.msl .gd .gsub,html.msl .gd .askfoot{color:#475569}
html.msl .gd .gbtn{color:#1e293b;border-color:#cbd5d0}
html.msl .gd .pbtn,html.msl .gd .pbtn:hover,html.msl .gd main > ol > li::before{color:#fff}
html.msl .gd main > ul > li::before{background:#16a32a}
html.msl .gd main > ul.gwhy > li::before{background:none;border-color:#16a32a}