:root {
  --ink:#202b30;
  --muted:#657071;
  --paper:#f4f1e8;
  --gold:#d9b36c;
  --rule:#d8d6cc;
  --night:#171d21;
  --cyan:#54d4e4
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:95px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:17px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
a {
  color:inherit
}
button {
  font:inherit;
  cursor:pointer
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid #16778b;
  outline-offset:5px
}
[hidden] {
  display:none!important
}
.skip {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:100;
  padding:10px;
  background:white
}
.skip:focus {
  top:10px
}
.top {
  height:90px;
  background:var(--night);
  color:#eeeade;
  padding:0 5.5%;
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid #ffffff14
}
.brand {
  display:flex;
  align-items:center;
  text-decoration:none;
  font:bold 27px Georgia,serif;
  letter-spacing:-1px
}
.brand img {
  margin-right:9px;
  border-radius:50%
}
.brand span {
  color:var(--gold)
}
.edition {
  font-size:10px;
  letter-spacing:2px;
  margin-left:25px;
  color:#a4abad
}
.top-download {
  margin-left:auto;
  text-decoration:none;
  font-size:13px
}
.top-download span {
  color:var(--gold);
  margin-left:12px
}
.hero {
  background:var(--night);
  color:#eeeade;
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:6%;
  padding:85px 5.5% 100px;
  position:relative;
  overflow:hidden
}
.hero:before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 80% 40%,#b9944a11,transparent 60%);
  pointer-events:none
}
.hero>div {
  position:relative
}
.eyebrow {
  font-size:10px;
  font-weight:700;
  letter-spacing:2px;
  margin:0 0 22px;
  color:#997536
}
.hero .eyebrow {
  color:var(--gold)
}
h1,h2,h3 {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  line-height:1.08;
  margin:0
}
h1 {
  font-size:clamp(44px,4.8vw,77px);
  letter-spacing:-2.8px
}
h1 em {
  font-weight:400;
  color:var(--gold)
}
.intro {
  max-width:440px;
  color:#bec4c3;
  font-size:18px;
  line-height:1.65;
  margin:30px 0
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  text-decoration:none;
  padding:13px 22px;
  font-size:13px;
  font-weight:600;
  border-radius:2px
}
.gold {
  background:var(--gold);
  color:#1b2326
}
.button:hover {
  background:#eacb92
}
.text-link {
  display:block;
  font-size:12px;
  color:#bec4c3;
  margin-top:18px;
  text-underline-offset:4px
}
.hero-visual {
  align-self:center;
  padding-top:20px
}
.image-label {
  font-size:9px;
  letter-spacing:1.6px;
  color:#929d9f;
  margin:0 0 18px;
  display:flex;
  align-items:center;
  gap:8px
}
.live-dot {
  width:6px;
  height:6px;
  background:var(--gold);
  border-radius:50%;
  display:inline-block
}
.shot {
  display:block;
  border:0;
  padding:0;
  width:100%;
  background:transparent;
  text-align:left;
  position:relative;
  line-height:0
}
.shot img {
  display:block;
  width:100%;
  height:auto;
  border-radius:3px
}
.shot:after {
  content:'↗ Enlarge';
  position:absolute;
  bottom:10px;
  right:10px;
  background:#182126e8;
  color:white;
  font-size:10px;
  letter-spacing:.4px;
  padding:8px 10px;
  line-height:1.2;
  border:1px solid #ffffff32;
  opacity:0;
  transition:opacity .15s
}
.shot:hover:after,.shot:focus-visible:after {
  opacity:1
}
.hero-shot {
  box-shadow:0 25px 65px #0006;
  border:1px solid #d9b36c42
}
.hero-caption {
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#929d9f;
  font-size:11px;
  line-height:1.7;
  margin-top:25px
}
.hero-caption strong {
  color:#dce0dc;
  font-weight:400
}
.caption-index {
  font-size:9px;
  letter-spacing:1px;
  text-align:right
}
.guide-layout {
  max-width:1350px;
  margin:auto;
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:8%;
  padding:0 5%
}
.toc {
  position:sticky;
  top:35px;
  align-self:start;
  padding:65px 0
}
.toc>p {
  font-size:9px;
  letter-spacing:2px;
  font-weight:700;
  margin:0 0 20px;
  color:var(--muted)
}
.toc nav {
  display:flex;
  flex-direction:column
}
.toc nav a {
  display:flex;
  gap:15px;
  padding:9px 0;
  text-decoration:none;
  font-size:10px;
  color:#8e938d;
  border-bottom:1px solid #e4e1d7
}
.toc nav span {
  color:var(--ink);
  font-size:13px
}
.toc nav a.active span,.toc nav a:hover span {
  color:#916a28
}
.toc nav a.active {
  font-weight:700
}
.toc-note {
  font-size:10px;
  color:var(--muted);
  line-height:1.8;
  margin-top:30px
}
.toc-note strong {
  font-weight:500
}
.chapter {
  padding:75px 0;
  border-bottom:1px solid var(--rule);
  scroll-margin-top:0
}
.section-heading {
  display:flex;
  gap:25px;
  align-items:flex-start
}
.number {
  font:italic 22px Georgia;
  color:#a58a58;
  padding-top:4px
}
.section-heading .eyebrow {
  margin-bottom:16px
}
h2 {
  font-size:clamp(34px,3.3vw,49px);
  letter-spacing:-1.4px
}
h3 {
  font-size:25px;
  letter-spacing:-.4px;
  margin:32px 0 15px
}
.lead {
  font-size:19px;
  line-height:1.65;
  margin:25px 0 33px;
  color:#4d5b5e;
  max-width:680px
}
p {
  margin:17px 0
}
.three-notes {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
  padding:10px 0 22px
}
.three-notes b {
  font-size:11px;
  letter-spacing:.4px;
  color:#997536
}
.three-notes p {
  font-size:13px;
  line-height:1.7;
  margin:8px 0
}
.legend {
  display:flex;
  flex-wrap:wrap;
  gap:12px 23px;
  font-size:12px;
  padding:15px 0;
  border-block:1px solid var(--rule)
}
.legend span {
  display:flex;
  align-items:center;
  gap:8px
}
.legend i {
  display:block;
  width:12px;
  height:12px;
  border-radius:2px
}
.purple {
  background:#a622ad
}
.yellow {
  background:#d9a72d
}
.cyan {
  background:#38bed0
}
.blue {
  background:#568cd6
}
.more {
  border-block:1px solid var(--rule);
  margin-top:25px;
  padding:17px 0;
  font-size:14px
}
.more+.more {
  border-top:0
}
.more summary {
  cursor:pointer;
  font-weight:600;
  padding-right:20px
}
.more p {
  font-size:14px
}
.more .shot {
  margin:20px 0
}
.compact-example {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:center;
  margin-top:42px
}
.compact-example .eyebrow {
  font-size:9px;
  letter-spacing:1.3px
}
.compact-example h3 {
  margin-top:0
}
.compact-example p {
  font-size:14px
}
.tooltip-shot {
  max-width:310px;
  justify-self:center;
  box-shadow:0 10px 25px #171d2122
}
.two-notes {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:35px
}
.two-notes h3 {
  font-size:23px
}
.two-notes p {
  font-size:14px
}
.muted {
  color:var(--muted);
  font-size:12px
}
.tabs {
  display:flex;
  gap:0;
  border-bottom:1px solid #bdc2bc;
  margin-bottom:22px
}
.tabs button {
  border:0;
  background:transparent;
  padding:12px 18px;
  font-size:13px;
  color:var(--muted);
  border-bottom:3px solid transparent
}
.tabs button[aria-selected=true] {
  border-bottom-color:#9a712a;
  color:var(--ink);
  font-weight:600
}
.tabs button:hover {
  background:#e9e5da
}
.figcaption,figcaption {
  font-size:11px;
  line-height:1.7;
  color:var(--muted);
  margin:12px 0 0;
  border-left:2px solid #b59861;
  padding-left:12px
}
figure {
  margin:30px 0
}
.steps {
  list-style:none;
  counter-reset:step;
  padding:0;
  margin:30px 0
}
.steps li {
  counter-increment:step;
  position:relative;
  padding:0 0 23px 42px;
  font-size:14px;
  line-height:1.7
}
.steps li:before {
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:0;
  color:#967333;
  font:italic 19px Georgia
}
.steps strong {
  display:block;
  font-weight:650
}
.inline-tip {
  font-size:13px;
  padding:19px 22px;
  border-left:3px solid #bd9857;
  background:#ebe7db;
  line-height:1.8;
  margin:28px 0
}
.inline-tip b {
  display:block
}
.note-example {
  grid-template-columns:1.05fr 1fr
}
.origin {
  border-top:1px solid var(--rule);
  margin-top:48px;
  padding-top:36px
}
.origin p {
  font:22px/1.6 Georgia,serif
}
.origin p:last-child {
  font:14px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--muted)
}
.origin .eyebrow {
  font:700 10px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:2px;
  color:#997536
}
.download-main {
  margin:0 0 15px
}
code,.command {
  font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace
}
.paths {
  padding:15px 0;
  display:flex;
  flex-direction:column;
  gap:7px
}
.paths span {
  font-size:9px;
  letter-spacing:1px;
  color:var(--muted);
  margin-top:8px
}
.paths code {
  display:block;
  padding:10px;
  background:#e9e6db;
  overflow-wrap:anywhere
}
.command {
  background:#e7e4d9;
  border:1px solid #d4d0c1;
  border-radius:3px;
  padding:4px 7px;
  color:#37484f;
  white-space:nowrap
}
.command span {
  margin-left:8px;
  color:#777
}
.command:hover {
  background:#dad5c4
}
.commands>div {
  display:flex;
  align-items:center;
  gap:20px;
  border-bottom:1px solid var(--rule);
  padding:10px 0;
  font-size:12px
}
.commands .command {
  min-width:145px;
  text-align:left
}
.chapters .chapter:last-child {
  border-bottom:0
}
footer {
  background:var(--night);
  color:#a2acae;
  padding:45px 5.5%;
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:12px 25px;
  font-size:12px
}
footer p {
  margin:0;
  align-self:center
}
footer small {
  font-size:10px
}
footer>a:last-child {
  text-decoration:none;
  text-align:right;
  color:var(--gold)
}
dialog {
  border:1px solid #647077;
  background:#11181c;
  color:#dde3e4;
  max-width:96vw;
  max-height:96vh;
  width:fit-content;
  padding:55px 18px 12px;
  overflow:auto;
  border-radius:4px
}
dialog::backdrop {
  background:#070d11eb
}
dialog>img {
  max-width:min(1400px,90vw);
  max-height:78vh;
  width:auto;
  height:auto;
  display:block;
  margin:auto
}
dialog>p {
  font-size:12px;
  text-align:center;
  max-width:900px;
  margin:12px auto
}
.close-lightbox {
  position:absolute;
  right:15px;
  top:10px;
  background:transparent;
  border:1px solid #69777b;
  border-radius:3px;
  color:#eee;
  padding:5px 14px;
  font-size:12px
}
.toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  background:#203038;
  color:#fff;
  padding:9px 20px;
  font-size:12px;
  border-radius:4px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
  z-index:200
}
.toast.visible {
  opacity:1
}
@media(min-width:1600px) {
  .hero {
  padding-inline:max(5.5%,calc((100vw - 1500px)/2))
}

}
@media(max-width:1000px) {
  .guide-layout {
  grid-template-columns:170px minmax(0,1fr);
  gap:5%
}
.hero {
  gap:4%;
  padding-top:65px;
  padding-bottom:65px
}
.edition {
  display:none
}
.three-notes {
  gap:15px
}
.toc nav a {
  gap:10px
}
.compact-example {
  gap:22px
}
.hero-caption {
  font-size:10px
}
.caption-index {
  display:none
}

}
@media(max-width:720px) {
  body {
  font-size:15px
}
.top {
  height:68px;
  padding-inline:6%
}
.brand {
  font-size:23px
}
.brand img {
  width:30px;
  height:30px
}
.top-download {
  font-size:11px
}
.top-download span {
  margin-left:5px
}
.hero {
  grid-template-columns:1fr;
  padding:50px 6% 45px;
  gap:35px
}
h1 {
  font-size:52px;
  letter-spacing:-2px
}
.hero-copy .intro {
  font-size:16px;
  max-width:470px
}
.hero-visual {
  padding:0
}
.hero-caption {
  margin-top:17px
}
.hero-shot:after {
  opacity:1;
  font-size:9px;
  padding:4px;
  bottom:5px;
  right:5px
}
.guide-layout {
  display:block;
  padding:0 6%
}
.toc {
  position:static;
  padding:24px 0 0
}
.toc>p,.toc-note {
  display:none
}
.toc nav {
  display:flex;
  flex-direction:row;
  gap:7px;
  overflow:auto;
  padding-bottom:10px
}
.toc nav a {
  flex-shrink:0;
  border:1px solid #d5d1c4;
  padding:5px 10px;
  gap:5px;
  font-size:9px
}
.toc nav span {
  font-size:10px
}
.chapter {
  padding:45px 0
}
.section-heading {
  gap:17px
}
.number {
  font-size:18px
}
h2 {
  font-size:38px
}
.lead {
  font-size:17px;
  margin:22px 0
}
.three-notes {
  grid-template-columns:1fr;
  gap:12px
}
.three-notes div {
  border-left:2px solid #c9bc9b;
  padding-left:13px
}
.three-notes p {
  margin:3px 0
}
.compact-example {
  grid-template-columns:1fr;
  gap:18px;
  margin-top:30px
}
.compact-example>div {
  order:-1
}
.tooltip-shot {
  max-width:360px;
  width:90%
}
.note-example .shot {
  max-width:480px;
  justify-self:center
}
.two-notes {
  grid-template-columns:1fr;
  gap:0
}
.two-notes h3 {
  margin-top:22px
}
.two-notes p {
  margin:10px 0
}
.tabs button {
  padding:10px 12px;
  font-size:12px
}
.shot:after {
  opacity:1;
  font-size:9px;
  padding:5px;
  bottom:5px;
  right:5px
}
.commands>div {
  gap:12px;
  align-items:flex-start
}
.commands .command {
  min-width:130px;
  font-size:11px
}
.commands>div>span {
  font-size:11px
}
footer {
  grid-template-columns:1fr;
  gap:17px;
  padding:35px 6%
}
footer>a:last-child {
  text-align:left
}
dialog {
  padding:50px 7px 8px;
  max-width:98vw
}
dialog>img {
  max-width:92vw;
  max-height:none
}
.section-heading .eyebrow {
  font-size:9px
}
.paths code {
  font-size:10px
}
.legend {
  gap:10px 18px;
  font-size:11px
}
.origin p {
  font-size:20px
}

}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
* {
  transition:none!important
}

}


.actual-size {
  position:absolute;
  left:15px;
  top:10px;
  background:transparent;
  border:1px solid #69777b;
  border-radius:3px;
  color:#eee;
  padding:5px 14px;
  font-size:12px
}
dialog.actual {
  width:96vw;
  height:94vh
}
dialog.actual>img {
  max-width:none;
  max-height:none;
  width:auto;
  height:auto;
  margin:0
}
dialog.actual>p {
  text-align:left;
  margin-left:0
}
.creator {
  border-left: 2px solid #b59861;
  padding-left: 22px;
  margin-top: 30px;
}
.origin .creator p:not(.eyebrow) {
  font: 14px/1.8 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--muted);
}