/* ============================================================ MooseTraxx — /install Page-scoped. Extends styles.css: every token, .btn, .nav and .footer used here comes from that sheet and is not restated. Loaded second so the handful of overrides below win. Self-contained by design. The comp's sheet declared a dependency on signup.css for `.comp-bar` and "shared primitives"; the only one it actually used was .comp-bar, which is review scaffolding and does not ship. No page stylesheet is cross-loaded and nothing was copied over. ============================================================ */ .ins{position:relative;padding:128px 0 96px;min-height:100vh;background:radial-gradient(1000px 560px at 50% -8%,var(--tint-blue),transparent 62%),linear-gradient(180deg,#FDFCFA,var(--bg));overflow:hidden} .ins::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(28,26,22,.05) 1px,transparent 1px);background-size:30px 30px;-webkit-mask-image:radial-gradient(110% 70% at 50% 0%,#000 18%,transparent 66%);mask-image:radial-gradient(110% 70% at 50% 0%,#000 18%,transparent 66%);opacity:.7} .ins .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center} /* 680px, wider than signup's 640: this page carries instructional prose. */ .ins-col{width:100%;max-width:680px;display:flex;flex-direction:column;align-items:stretch} /* ---------- variants ---------- */ /* All three ship in the document and one is revealed by the os-* class install.js puts on . Gating on rather than on a class the script adds to the section afterwards is what removes the flash: the script runs from , so the class is already in place the first time these rules are resolved and the wrong variant is never painted. */ .ins-state{display:none} .os-mac .ins-state[data-os=mac], .os-win .ins-state[data-os=win], .os-mobile .ins-state[data-os=mobile]{display:block} /* ---------- account confirmed ---------- */ /* The only use of --green on the page. The MooseScore ramp is otherwise live-data only. */ .ins-ok{display:flex;align-items:center;justify-content:center;gap:11px;text-align:center;margin-bottom:26px} .ins-ok__tick{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)} .ins-ok__t{font-family:var(--font-heading);font-size:19px;font-weight:700;letter-spacing:-.02em} /* ---------- shared card ---------- */ .ins-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:40px 44px 34px} .ins-card+.ins-card{margin-top:22px} /* Recessive relative to the download card — same geometry, lighter shadow. */ .ins-card--quiet{box-shadow:var(--shadow-sm)} .ins-h{font-family:var(--font-heading);font-size:27px;font-weight:700;letter-spacing:-.028em;line-height:1.1;text-align:center} .ins-h2{font-family:var(--font-heading);font-size:20px;font-weight:700;letter-spacing:-.022em} .ins-sub{margin-top:11px;font-size:15px;line-height:1.55;color:var(--text-muted);text-align:center;text-wrap:pretty} /* ---------- download block ---------- */ .ins-file{margin:22px auto 0;display:flex;align-items:center;justify-content:center;gap:11px;max-width:100%;padding:13px 18px;border-radius:var(--r-md);background:var(--surface-soft);border:1px solid var(--border)} .ins-file .arc{position:relative;flex:none;width:22px;height:22px;color:var(--blue-on-surface)} .ins-file .arc svg{display:block} .ins-file .name{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ins-dl{margin:20px auto 0;max-width:380px;display:grid;gap:12px;text-align:center} .ins-dl .btn{width:100%;height:52px;font-size:16px} .ins-dl__q{font-size:13.5px;color:var(--text-faint)} /* Support fallback. Not comped — the README lists it as production-needed, for the install that fails in a way none of the steps below covers. */ .ins-help{font-size:13.5px;line-height:1.5;color:var(--text-faint)} .ins-help a{font-weight:600} .ins-help a:hover{text-decoration:underline} .ins-alt{margin-top:18px;text-align:center;font-size:13.5px;color:var(--text-muted)} .ins-alt a{font-weight:600} .ins-alt a:hover{text-decoration:underline} .ins-req{margin-top:22px;padding-top:18px;border-top:1px solid var(--border-soft);display:flex;justify-content:center} .ins-req__t{font-size:13.5px;line-height:1.5;color:var(--text-faint);text-align:center;text-wrap:pretty} /* ---------- steps ---------- */ /* An
    : the order is the instruction, so it belongs in the markup and not only in the counter. The counter still draws the visible numeral — list-style is off. */ .ins-steps{margin-top:24px;display:grid;gap:22px;counter-reset:s;list-style:none} .ins-step{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start} .ins-step__n{counter-increment:s;width:28px;height:28px;margin-top:-2px;border-radius:50%;display:grid;place-items:center;border:1.5px solid color-mix(in srgb,var(--blue) 45%,var(--border));color:var(--blue-on-surface);font-family:var(--font-heading);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1} .ins-step__n::before{content:counter(s)} .ins-step__t{font-size:16.5px;font-weight:600;letter-spacing:-.012em;line-height:1.45} .ins-step__d{margin-top:7px;font-size:14.5px;line-height:1.6;color:var(--text-muted);text-wrap:pretty} .ins-step__d b{color:var(--text);font-weight:600} /* clickable-path chips inside copy */ .ins-click{display:inline-block;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--text);background:var(--bg-2);border:1px solid var(--border);border-radius:6px;padding:1px 7px;white-space:nowrap} .ins-arrowto{color:var(--text-faint);padding:0 3px} /* ---------- callouts inside a step ---------- */ .ins-call{margin-top:13px;padding:15px 17px;border-radius:var(--r-sm);background:var(--bg-2);border:1px solid var(--border-soft);font-size:14px;line-height:1.6;color:var(--text-muted);text-wrap:pretty} .ins-call__t{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--text);letter-spacing:-.005em} .ins-call__t svg{flex:none;color:var(--text-faint)} .ins-call p{margin-top:8px} .ins-call b{color:var(--text);font-weight:600} .ins-call--loud{background:color-mix(in srgb,var(--blue) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--blue) 26%,var(--border));color:var(--text-muted)} .ins-call--loud .ins-call__t{color:var(--blue-ink)} .ins-call--loud .ins-call__t svg{color:var(--blue-on-surface)} /* ---------- mobile variant ---------- */ .ins-mob{max-width:520px;margin-inline:auto;text-align:center} .ins-mob .ins-card{padding:44px 36px 36px} .ins-mob__icon{width:52px;height:52px;border-radius:15px;margin:0 auto 20px;display:grid;place-items:center;background:color-mix(in srgb,var(--blue) 12%,transparent);color:var(--blue-on-surface)} .ins-mob__body{margin-top:14px;font-size:15px;line-height:1.6;color:var(--text-muted);text-wrap:pretty} .ins-mob__body b{color:var(--text);font-weight:700} @media (max-width:680px){ .ins-card{padding-inline:30px} .ins-ok{flex-wrap:wrap;gap:8px} } @media (max-width:560px){ .ins{padding:104px 0 72px} .ins-card{padding:28px 22px 24px;border-radius:var(--r-md)} .ins-h{font-size:23px} .ins-step{grid-template-columns:26px 1fr;gap:11px} .ins-step__n{width:26px;height:26px;font-size:12px} .ins-file .name{font-size:12px} }