/* public pages: contact form page, guides site */
*, *::before, *::after { box-sizing: border-box; }
body.cfpage { margin: 0; min-height: 100vh; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: #F4F6F9; color: #1B2430; }
body.cfpage.dark { background: #0F141B; color: #E6EBF1; }
.cfwrap { max-width: 600px; margin: 0 auto; padding: 40px 16px; }

@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(/site/fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url(/site/fonts/inter-latin-700-normal.woff2) format('woff2'); }
/* guides site: made for readers who are not technical. Big type, big targets, one clear next step. */
:root { --g-bg: #F4F7FB; --g-panel: #fff; --g-text: #16202C; --g-muted: #4B5A6B; --g-border: #D5DDE6; --g-accent: #1565B0; --g-accent-d: #0F4F8C; --g-tint: #E6F0FA; --g-hero: #DCEBF9; --g-onaccent: #fff;
  --g-tip: #E7F5EC; --g-tip-b: #2E8B57; --g-warn: #FFF3D9; --g-warn-b: #D18A00; --g-note: #E6F0FA; --g-note-b: #1565B0; --g-mark: #FFE69A; }
@media (prefers-color-scheme: dark) { :root { --g-bg: #0F141B; --g-panel: #171E27; --g-text: #E8EDF3; --g-muted: #A3B0BF; --g-border: #2C3745; --g-accent: #74B6F4; --g-accent-d: #9ACBF8; --g-tint: #1B2A3A; --g-hero: #14212F; --g-onaccent: #0F141B;
  --g-tip: #14291E; --g-tip-b: #4DB87F; --g-warn: #33270E; --g-warn-b: #E3A92B; --g-note: #16263A; --g-note-b: #74B6F4; --g-mark: #5A4A12; } }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body.gsite { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 18px; background: var(--g-bg); color: var(--g-text); line-height: 1.55; }
.gsite a { color: var(--g-accent); } .gsite :focus-visible { outline: 3px solid var(--g-accent); outline-offset: 2px; border-radius: 6px; }
.gs-skip { position: absolute; left: -9999px; top: 8px; background: var(--g-panel); color: var(--g-text); padding: 10px 16px; border-radius: 8px; z-index: 50; } .gs-skip:focus { left: 8px; }
.gs-in { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .gs-grow { flex: 1; }
.gs-muted { color: var(--g-muted); }

/* header */
.gs-top { background: var(--g-panel); border-bottom: 1px solid var(--g-border); } .gs-top .gs-in { display: flex; align-items: center; gap: 16px; min-height: 92px; padding-top: 12px; padding-bottom: 12px; }
.gs-logo { display: block; flex: 0 1 auto; min-width: 0; } .gs-logo img { height: 32px; width: auto; max-width: 100%; display: block; } .gs-logo .d { display: none; } @media (prefers-color-scheme: dark) { .gs-logo .l { display: none; } .gs-logo .d { display: block; } }
.gs-navs { display: flex; align-items: center; gap: 22px; } .gs-nav { color: var(--g-text); text-decoration: none; font-weight: 600; font-size: 17px; padding: 10px 4px; } .gs-nav:hover { text-decoration: underline; }
.gs-cta { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--g-accent); color: var(--g-onaccent) !important; font: inherit; font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer; } .gs-cta:hover { background: var(--g-accent-d); } .gs-cta.big { min-height: 56px; padding: 0 32px; font-size: 19px; }
.gs-bar { background: var(--g-hero); border-bottom: 1px solid var(--g-border); padding: 18px 0; } .gs-bar .gs-search { max-width: 760px; margin: 0; }

/* search */
.gs-search { position: relative; display: flex; gap: 10px; max-width: 760px; }
.gs-sbox { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 56px; background: var(--g-panel); border: 2px solid var(--g-border); border-radius: 14px; color: var(--g-muted); } .gs-sbox:focus-within { border-color: var(--g-accent); box-shadow: 0 0 0 4px var(--g-tint); }
.gs-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--g-text); font: inherit; font-size: 18px; height: 100%; padding: 0; } .gsite .gs-search input:focus-visible { outline: 0; } .gs-search input::placeholder { color: var(--g-muted); opacity: .9; }
.gs-search button { flex: none; min-width: 112px; height: 56px; padding: 0 26px; border: 0; border-radius: 14px; background: var(--g-accent); color: var(--g-onaccent); font: inherit; font-weight: 700; font-size: 18px; cursor: pointer; } .gs-search button:hover { background: var(--g-accent-d); }
.gs-search.gs-big .gs-sbox { height: 68px; padding: 0 20px; border-radius: 16px; } .gs-search.gs-big input { font-size: 20px; } .gs-search.gs-big button { height: 68px; font-size: 20px; min-width: 132px; border-radius: 16px; }
.gs-sug { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); background: var(--g-panel); border: 1px solid var(--g-border); border-radius: 14px; box-shadow: 0 12px 32px rgba(15, 30, 50, .18); overflow: hidden; text-align: left; } .gs-sug[hidden] { display: none; }
.gs-sug a { display: block; padding: 14px 18px; color: var(--g-text); text-decoration: none; border-top: 1px solid var(--g-border); } .gs-sug a:first-child { border-top: 0; } .gs-sug a small { display: block; color: var(--g-muted); font-size: 14px; } .gs-sug a:hover, .gs-sug a.on { background: var(--g-tint); }

/* home */
.gs-main { flex: 1; padding: 0 0 56px; } .gs-main > .gs-in { padding-top: 28px; }
.gs-hero { background: var(--g-hero); border-bottom: 1px solid var(--g-border); padding: 56px 0 52px; text-align: center; } .gs-home > .gs-in { padding-top: 0; }
.gs-hero h1 { margin: 0 0 10px; font-size: 44px; line-height: 1.15; letter-spacing: -.01em; } .gs-sub { margin: 0 0 26px; font-size: 20px; color: var(--g-muted); }
.gs-hero .gs-search { margin: 0 auto; text-align: left; max-width: 820px; }
.gs-chips { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; align-items: center; color: var(--g-muted); font-size: 16px; } .gs-chips a { padding: 7px 14px; border: 1px solid var(--g-border); border-radius: 999px; background: var(--g-panel); text-decoration: none; font-weight: 600; font-size: 16px; } .gs-chips a:hover { border-color: var(--g-accent); }
.gs-sec { margin-top: 44px; } .gs-sec > h2 { margin: 0 0 16px; font-size: 26px; line-height: 1.25; }
.gs-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.gs-tile { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 24px 24px 20px; background: var(--g-panel); border: 2px solid var(--g-border); border-radius: 16px; text-decoration: none; color: var(--g-text) !important; } .gs-tile:hover { border-color: var(--g-accent); box-shadow: 0 6px 20px rgba(15, 30, 50, .10); }
.gs-tname { font-size: 22px; font-weight: 700; line-height: 1.25; } .gs-tn { color: var(--g-muted); font-size: 16px; } .gs-tgo { margin-top: 10px; display: inline-flex; align-items: center; gap: 4px; color: var(--g-accent); font-weight: 700; font-size: 16px; }

/* lists of guides */
.gs-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .gs-rows.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.gs-row { display: flex; align-items: center; gap: 14px; padding: 18px 22px; min-height: 64px; box-sizing: border-box; height: 100%; background: var(--g-panel); border: 1px solid var(--g-border); border-radius: 14px; text-decoration: none; color: var(--g-text) !important; } .gs-row:hover { border-color: var(--g-accent); box-shadow: 0 4px 14px rgba(15, 30, 50, .08); } .gs-row > .gs-ic { flex: none; color: var(--g-accent); }
.gs-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .gs-rtitle { font-size: 19px; font-weight: 650; line-height: 1.3; color: var(--g-accent); } .gs-rcat { font-size: 14px; color: var(--g-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .gs-rdesc { color: var(--g-muted); font-size: 16px; line-height: 1.5; }
mark { background: var(--g-mark); color: inherit; border-radius: 3px; padding: 0 2px; }
.gs-crumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; font-size: 16px; color: var(--g-muted); } .gs-crumb a { text-decoration: none; font-weight: 600; } .gs-crumb a:hover { text-decoration: underline; }
.gs-main h1 { margin: 0 0 8px; font-size: 36px; line-height: 1.2; letter-spacing: -.01em; } .gs-count { margin: 0 0 18px; font-size: 17px; }
.gs-none { margin-top: 22px; padding: 22px 26px; background: var(--g-panel); border: 1px solid var(--g-border); border-radius: 14px; } .gs-none h2 { margin: 0 0 8px; font-size: 22px; } .gs-none ul { margin: 0; padding-left: 22px; color: var(--g-muted); } .gs-main .gs-search.gs-big { margin-top: 14px; }

/* a guide */
.gs-g { max-width: 1128px; }
.gs-art { background: var(--g-panel); border: 1px solid var(--g-border); border-radius: 18px; padding: 34px 44px 44px; } .gs-art h1 { font-size: 38px; margin-bottom: 14px; }
.gs-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--g-border); color: var(--g-muted); font-size: 16px; }
.gs-tools { display: inline-flex; gap: 8px; } .gs-tools button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid var(--g-border); border-radius: 10px; background: var(--g-panel); color: var(--g-text); font: inherit; font-size: 16px; font-weight: 650; cursor: pointer; } .gs-tools button:hover { border-color: var(--g-accent); }
.gs-lead { color: var(--g-muted); font-size: 20px; margin: 0 0 18px; line-height: 1.5; }
.gs-toc { margin: 4px 0 26px; padding: 18px 24px; background: var(--g-tint); border-radius: 14px; } .gs-toc h2 { margin: 0 0 8px; font-size: 18px; } .gs-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; } .gs-toc li a { display: block; padding: 6px 0; text-decoration: none; font-weight: 600; font-size: 17px; } .gs-toc li a:hover { text-decoration: underline; } .gs-toc li.l3 { padding-left: 18px; } .gs-toc li.l4 { padding-left: 36px; }
.kb-prose { line-height: 1.75; font-size: 19px; overflow-wrap: anywhere; } .gs-big-text .kb-prose { font-size: 22px; } .gs-huge-text .kb-prose { font-size: 25px; }
.kb-prose p { margin: 0 0 1em; } .kb-prose img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--g-border); cursor: zoom-in; margin: 6px 0; } .kb-prose blockquote { margin: 12px 0; padding-left: 14px; border-left: 4px solid var(--g-border); color: var(--g-muted); }
.kb-prose h2, .kb-prose h3, .kb-prose h4 { line-height: 1.3; margin: 1.6em 0 .5em; scroll-margin-top: 16px; } .kb-prose h2 { font-size: 1.5em; } .kb-prose h3 { font-size: 1.3em; } .kb-prose h4 { font-size: 1.12em; }
.kb-prose ol, .kb-prose ul { padding-left: 1.5em; margin: 0 0 1em; } .kb-prose li { margin: .35em 0; } .kb-prose a { color: var(--g-accent); } .kb-prose table { border-collapse: collapse; max-width: 100%; } .kb-prose td, .kb-prose th { border: 1px solid var(--g-border); padding: 8px 12px; }
.kb-s1 { font-size: 15px; } .kb-s3 { font-size: 24px; } .kb-s4 { font-size: 30px; }
.kb-w25 { width: 25%; } .kb-w50 { width: 50%; } .kb-w75 { width: 75%; } .kb-w100 { width: 100%; }
a.dlfile { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; border: 2px solid var(--g-accent); color: var(--g-accent); font-weight: 700; text-decoration: none; } a.dlfile span { font-weight: 400; opacity: .8; }
/* Tip, Warning and Note boxes written in the guide editor */
.callout { margin: 1.2em 0; padding: 16px 20px 16px 22px; border-radius: 12px; border-left: 8px solid var(--g-note-b); background: var(--g-note); line-height: 1.65; } .callout > :last-child { margin-bottom: 0; } .callout > :first-child { margin-top: 0; }
.callout::before { content: "Note"; display: block; font-weight: 800; font-size: .82em; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; color: var(--g-note-b); }
.callout.tip { background: var(--g-tip); border-left-color: var(--g-tip-b); } .callout.tip::before { content: "Tip"; color: var(--g-tip-b); }
.callout.warning { background: var(--g-warn); border-left-color: var(--g-warn-b); } .callout.warning::before { content: "Warning"; color: var(--g-warn-b); }

/* after the guide */
.gs-fb { margin-top: 24px; padding: 26px 30px; background: var(--g-panel); border: 1px solid var(--g-border); border-radius: 16px; text-align: center; } .gs-fb h2 { margin: 0 0 14px; font-size: 24px; }
.gs-fb-btns { display: flex; justify-content: center; gap: 14px; } .gs-fb-btns button { display: inline-flex; align-items: center; gap: 10px; min-width: 130px; min-height: 56px; justify-content: center; border: 2px solid var(--g-border); border-radius: 14px; background: var(--g-panel); color: var(--g-text); font: inherit; font-size: 19px; font-weight: 700; cursor: pointer; } .gs-fb-btns button:hover { border-color: var(--g-accent); background: var(--g-tint); } .gs-fb-btns button.on { border-color: var(--g-accent); background: var(--g-tint); }
.gs-fb-more { margin: 18px auto 0; max-width: 560px; text-align: left; } .gs-fb-more[hidden], .gs-fb-thanks[hidden], .gs-fb-btns[hidden] { display: none; } .gs-fb-more label { display: block; font-weight: 650; margin-bottom: 8px; } .gs-fb-more textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; padding: 12px 14px; border: 2px solid var(--g-border); border-radius: 12px; background: var(--g-bg); color: var(--g-text); resize: vertical; } .gs-fb-more .gs-cta { margin-top: 12px; }
.gs-fb-thanks { margin: 14px 0 0; font-size: 19px; font-weight: 600; }
.gs-help { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 26px 32px; background: var(--g-tint); border: 1px solid var(--g-border); border-radius: 16px; } .gs-help h2 { margin: 0 0 4px; font-size: 24px; } .gs-help p { margin: 0; color: var(--g-muted); font-size: 18px; max-width: 560px; }
.gs-pn { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .gs-pn a { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; background: var(--g-panel); border: 1px solid var(--g-border); border-radius: 14px; text-decoration: none; color: var(--g-accent) !important; font-weight: 650; font-size: 18px; } .gs-pn a:hover { border-color: var(--g-accent); } .gs-pn small { color: var(--g-muted); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; } .gs-pn .n { text-align: right; }
.gs-rel { margin-top: 36px; }

/* picture zoom */
.gs-zoom { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(8, 14, 22, .88); cursor: zoom-out; } .gs-zoom img { max-width: 100%; max-height: 100%; border-radius: 8px; background: #fff; }
.gs-zoom button { position: absolute; top: 14px; right: 14px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 12px; background: #fff; color: #16202C; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }

.gs-foot { border-top: 1px solid var(--g-border); background: var(--g-panel); padding: 24px 0; color: var(--g-muted); font-size: 16px; } .gs-foot .gs-in { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; } .gs-foot span { margin-right: auto; } .gs-foot a { font-weight: 600; }

@media (max-width: 760px) {
  body.gsite { font-size: 17px; } .gs-in { padding: 0 16px; }
  .gs-top .gs-in { min-height: 72px; } .gs-logo img { height: auto; width: min(100%, 170px); } .gs-nav { display: none; } .gs-cta { padding: 0 16px; min-height: 44px; font-size: 16px; }
  .gs-hero { padding: 34px 0 30px; } .gs-hero h1 { font-size: 32px; } .gs-sub { font-size: 18px; margin-bottom: 20px; }
  .gs-search { flex-direction: column; } .gs-search .gs-sbox { flex: none; width: 100%; } .gs-search button, .gs-search.gs-big button { width: 100%; } .gs-search.gs-big .gs-sbox { height: 60px; } .gs-search.gs-big input { font-size: 18px; }
  .gs-tiles { grid-template-columns: 1fr; } .gs-rows.two { grid-template-columns: 1fr; } .gs-sec { margin-top: 34px; }
  .gs-main h1, .gs-art h1 { font-size: 28px; } .gs-art { padding: 22px 18px 30px; border-radius: 14px; } .kb-prose { font-size: 18px; } .gs-lead { font-size: 18px; }
  .gs-help { padding: 22px 20px; } .gs-help .gs-cta { width: 100%; } .gs-pn { grid-template-columns: 1fr; } .gs-pn .n { text-align: left; }
  .gs-fb { padding: 22px 16px; } .gs-fb-btns button { min-width: 0; flex: 1; }
}
@media print {
  body.gsite { background: #fff; color: #000; font-size: 12pt; } .gs-top, .gs-bar, .gs-foot, .gs-fb, .gs-help, .gs-pn, .gs-rel, .gs-tools, .gs-skip, .gs-toc { display: none !important; }
  .gs-art { border: 0; padding: 0; } .kb-prose { font-size: 12pt; } .kb-prose img { border: 1px solid #999; break-inside: avoid; cursor: default; } .gs-main > .gs-in { padding-top: 0; }
}

/* the contact form window */
html.gs-lock { overflow: hidden; }
dialog.gs-dlg { border: 0; padding: 0; background: transparent; max-width: min(600px, calc(100vw - 24px)); width: 100%; max-height: calc(100vh - 24px); overflow: visible; color: inherit; }
dialog.gs-dlg::backdrop { background: rgba(10, 16, 24, .6); }
.gs-dlg-box { max-height: calc(100vh - 90px); overflow-y: auto; border-radius: 16px; }
.gs-dlg-x { position: absolute; top: -14px; right: -6px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--g-panel); color: var(--g-text); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.gs-dlg-foot { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-radius: 12px; background: var(--g-panel); color: var(--g-text); border: 1px solid var(--g-border); font-size: 15px; }
.gs-dlg-foot[hidden] { display: none; }
.gs-dlg-back { font: inherit; font-weight: 650; border: 0; border-radius: 10px; padding: 8px 16px; background: var(--g-accent); color: var(--g-onaccent); cursor: pointer; }
.cfback { display: block; margin: 14px auto 0; text-align: center; font-size: 15px; color: inherit; opacity: .8; }

/* command boxes: plain text with a Copy button */
.kb-prose pre.cmd { position: relative; margin: 1.2em 0; padding: 44px 18px 16px; border-radius: 12px; border: 1px solid var(--g-border); background: var(--g-bg); color: var(--g-text); font: 16px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.kb-prose pre.cmd::before { content: "Command"; position: absolute; left: 18px; top: 14px; font: 800 12px/1 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--g-muted); }
.kb-prose .cmd-copy { position: absolute; right: 10px; top: 8px; min-height: 32px; padding: 0 14px; border: 1px solid var(--g-accent); border-radius: 8px; background: var(--g-accent); color: var(--g-onaccent, #fff); font: 700 14px Inter, system-ui, sans-serif; cursor: pointer; } .kb-prose .cmd-copy:hover { background: var(--g-accent-d); } .kb-prose .cmd-copy.ok { background: var(--g-tip-b); border-color: var(--g-tip-b); color: #fff; }
.cmd-ta { position: fixed; left: -9999px; top: 0; }
@media print { .cmd-copy { display: none; } }