/* The docs: the product's pages on the left, the page in the middle, its own parts on the right */
.docs{display:grid;grid-template-columns:230px minmax(0,1fr) 210px;gap:48px;padding-top:40px;padding-bottom:90px;align-items:start}
.sidebar,.toc{position:sticky;top:88px;max-height:calc(100vh - 110px);overflow:auto;font-size:14.5px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.sidebar .docs-home{display:block;font:600 15px var(--display);color:var(--text);margin-bottom:14px}
.sidebar h4,.toc h4{margin:18px 0 6px;font:700 11.5px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.sidebar ul,.toc ul{list-style:none;margin:0;padding:0}
.sidebar a,.toc a{display:block;padding:5px 10px;border-radius:8px;color:var(--text2)}
.sidebar a:hover,.toc a:hover{color:var(--text);background:rgba(255,255,255,.04)}
.sidebar a[aria-current]{color:#fff;background:rgba(47,107,255,.16);box-shadow:inset 2px 0 0 var(--acc)}
.toc a{padding:3px 10px;font-size:13.5px}
.toc a.on{color:#fff}

.doc{max-width:780px;font-size:16.5px;line-height:1.7;color:var(--text2)}
.doc h1{font:700 42px/1.1 var(--display);letter-spacing:-.02em;color:var(--text);margin:0 0 14px}
.doc h2{font:700 26px/1.25 var(--display);color:var(--text);margin:52px 0 12px;scroll-margin-top:84px}
.doc h3{font:600 18px/1.3 var(--display);color:var(--text);margin:28px 0 8px}
.doc p{margin:0 0 14px}
.doc .lead{font-size:19px;color:var(--text2)}
.doc b,.doc strong{color:var(--text)}
.doc a{text-decoration:underline;text-decoration-color:rgba(76,141,255,.4);text-underline-offset:3px}
.doc ul,.doc ol{padding-left:22px;margin:0 0 16px}
.doc li{margin:4px 0}
.doc code{font:14px var(--mono);background:rgba(255,255,255,.07);border-radius:5px;padding:1px 6px;color:#cfe0ff}
.doc pre{background:#11131a;border:1px solid var(--stroke);border-radius:12px;padding:14px 16px;overflow:auto}
.doc pre code{background:none;padding:0}
.doc kbd{font:13px var(--mono);padding:1px 7px;border-radius:6px;border:1px solid var(--stroke2);border-bottom-width:2px;background:rgba(255,255,255,.05);color:var(--text)}
.doc table{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:15px}
.doc th,.doc td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--stroke);vertical-align:top}
.doc th{color:var(--text);font-weight:600;background:rgba(255,255,255,.03)}
.doc img{border-radius:12px;border:1px solid var(--stroke2);margin:10px 0 18px}
.doc blockquote{margin:0 0 16px;padding:2px 18px;border-left:3px solid var(--stroke2)}
.doc .note,.doc aside.note{padding:12px 16px;border-radius:12px;background:rgba(76,141,255,.08);border:1px solid rgba(76,141,255,.3);margin:0 0 18px}
.doc aside.note p:last-child{margin:0}
.doc .muted{color:var(--text3)}
.doc .hero{margin-bottom:10px}
.doc .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 18px}
.doc .card{border:1px solid var(--stroke);border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.025)}
.doc .card h3{margin:0 0 6px;font-size:16px}
.doc .card p{margin:0;font-size:14.5px}

/* An article's head: where it is, what it costs, how long it is, how the app opens it */
.crumbs{font-size:13.5px;color:var(--text3);margin-bottom:10px}
.crumbs a{color:var(--text3);text-decoration:none!important} .crumbs a:hover{color:var(--text)}
.doc .lead:empty{display:none}
.meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 22px;font-size:13px;color:var(--text3)}
.meta .chip{padding:3px 9px;border-radius:7px;border:1px solid var(--stroke)}
.pill{display:inline-block;font:700 10px var(--ui);letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:5px;background:rgba(255,138,31,.16);color:#ffb36b;margin-left:6px;vertical-align:2px}
.meta .pill{margin:0;vertical-align:0}
.pill.free{background:rgba(108,197,140,.16);color:#8fdcab}
.fromapp{padding:10px 14px;border-radius:12px;border:1px solid rgba(76,141,255,.3);background:rgba(76,141,255,.07);font-size:14px;margin:0 0 26px}
.fromapp b{color:var(--text)}

/* A tour of a window: its real picture, a number on every part, the part lit and told about */
.tour{margin:8px 0 26px}
.tour .stage{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--stroke2);box-shadow:0 24px 60px rgba(0,0,0,.45);user-select:none;line-height:0}
.tour .stage img{width:100%;height:auto;border:0;border-radius:0;margin:0}
.spot{position:absolute;translate:-50% -50%;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:var(--acc);color:#fff;font:700 11px/20px var(--ui);text-align:center;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 4px 12px rgba(0,0,0,.5);cursor:pointer;transition:scale .15s,background .15s;z-index:2}
/* Beside its part, a few pixels off the edge the build chose (data-side), so the part itself stays in sight */
.spot.at-below{translate:-50% 4px}.spot.at-above{translate:-50% calc(-100% - 4px)}.spot.at-right{translate:4px -50%}.spot.at-left{translate:calc(-100% - 4px) -50%}
.spot:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(76,141,255,.7);animation:ping 2.4s ease-out infinite;animation-delay:var(--d,0s)}
@keyframes ping{0%{transform:scale(.7);opacity:1}80%,100%{transform:scale(1.6);opacity:0}}
.spot:hover,.spot.on,.spot:focus-visible{scale:1.15;background:var(--orange);outline:none}
.spot.on:after,.tour.seen .spot:after{display:none}
/* Where and how round the part is lit is set by the page (docs.js: outline) */
.zone{position:absolute;border:2px solid var(--orange);border-radius:0;background:rgba(255,138,31,.10);box-shadow:0 0 0 9999px rgba(0,0,0,.42);opacity:0;transition:opacity .25s;pointer-events:none;z-index:1}
.zone.on{opacity:1}
.callout{position:absolute;z-index:3;max-width:300px;padding:12px 14px;border-radius:12px;background:rgba(16,18,26,.96);border:1px solid rgba(255,138,31,.55);box-shadow:0 14px 40px rgba(0,0,0,.6);font-size:13.5px;line-height:1.55;color:var(--text2);opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none}
.callout.on{opacity:1;transform:none}
.callout b:first-child{display:block;color:#fff;font:600 14.5px var(--display);margin-bottom:3px}
.callout kbd{font-size:11.5px;padding:0 5px}
.tourbar{font-size:13px;color:var(--text3);margin:12px 0 14px;display:flex;gap:10px;align-items:center}
.tourbar button{font:600 12.5px var(--ui);color:var(--text2);background:rgba(255,255,255,.05);border:1px solid var(--stroke2);border-radius:8px;padding:4px 10px;cursor:pointer}
.tourbar button:hover{color:#fff;border-color:var(--acc)}
.tour ol{counter-reset:part;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 22px}
.tour li{counter-increment:part;display:flex;gap:10px;padding:7px 9px;margin:0 -9px;border-radius:10px;cursor:pointer;font-size:14.5px;line-height:1.5;transition:background .15s}
.tour li:before{content:counter(part);flex:none;width:22px;height:22px;border-radius:50%;background:var(--acc);color:#fff;font:700 11.5px/22px var(--ui);text-align:center;margin-top:1px}
.tour li:hover,.tour li.on{background:rgba(255,138,31,.10)}
.tour li.on:before{background:var(--orange)}
.tour li > span{min-width:0}

/* How-to cards with a picture, a picture with a caption, steps */
.howto{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:10px 0 24px}
.howto.two{grid-template-columns:1fr 1fr}
.howto .h{border:1px solid var(--stroke);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.025)}
.howto .h img{width:100%;aspect-ratio:16/10;object-fit:cover;border:0;border-radius:0;margin:0}
.howto .h div{padding:10px 12px 12px;font-size:14px;line-height:1.55}
.howto .h b:first-child{display:block;color:var(--text);font-size:14.5px;margin-bottom:2px}
.doc figure.shot{margin:10px 0 22px}
.doc figure.shot img{margin:0;width:100%;height:auto}
.doc figure.shot video{display:block;margin:0;width:100%;height:auto;border-radius:12px;border:1px solid var(--stroke2)}
.doc figure.shot figcaption{font-size:13.5px;color:var(--text3);margin-top:8px}
.side{display:grid;grid-template-columns:200px minmax(0,1fr);gap:26px;align-items:start;margin:8px 0 20px}
.side figure.shot{margin:0}
.side > div > h2:first-child{margin-top:0}
.side.wide{grid-template-columns:340px minmax(0,1fr)}
.steps{counter-reset:step;list-style:none;padding:0!important}
.steps > li{counter-increment:step;position:relative;padding-left:40px;margin:0 0 12px}
.steps > li:before{content:counter(step);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--acc2);color:var(--acc2);font:700 13px/23px var(--ui);text-align:center}

/* Keys, and what they are for */
.keysel{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 10px}
.keysel button{font:600 12.5px var(--ui);color:var(--text3);background:none;border:1px solid var(--stroke);border-radius:8px;padding:4px 10px;cursor:pointer}
.keysel button.on{color:#fff;border-color:var(--acc);background:rgba(47,107,255,.15)}
.doc table.keys td:first-child{white-space:nowrap;width:1%;padding-right:22px}
.doc table.keys tr[hidden]{display:none}
.doc table.keys tr.group th{padding-top:22px;background:none;font:700 12px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}

/* Before and after */
.nextprev{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:48px}
.nextprev a{border:1px solid var(--stroke);border-radius:14px;padding:12px 16px;text-decoration:none!important;color:var(--text2)}
.nextprev a:hover{border-color:var(--acc)}
.nextprev small{display:block;color:var(--text3);font-size:12px}
.nextprev b{color:var(--text)}
.nextprev a:nth-child(2){text-align:right;grid-column:2}

/* Search: in the sidebar of every page, and large on the docs' home */
.dsearch{position:relative;margin:0 0 14px}
.dsearch input{width:100%;height:38px;border-radius:10px;border:1px solid var(--stroke2);background:rgba(255,255,255,.04);color:var(--text);font:14px var(--ui);padding:0 34px;outline:none}
.dsearch input::-webkit-search-cancel-button{display:none}
.dsearch input:focus{border-color:rgba(76,141,255,.6);box-shadow:0 0 0 3px rgba(47,107,255,.15)}
.dsearch svg{position:absolute;left:11px;top:11px;width:16px;height:16px;color:var(--text3);pointer-events:none}
.dsearch kbd{position:absolute;right:9px;top:9px;font:11px/18px var(--mono);padding:0 6px;border-radius:5px;border:1px solid var(--stroke2);color:var(--text3);pointer-events:none}
.dsearch input:focus ~ kbd{display:none}
.results{position:absolute;left:0;top:calc(100% + 6px);z-index:30;width:min(560px,92vw);max-height:70vh;overflow:auto;border:1px solid var(--stroke2);border-radius:14px;background:#10121a;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.results a{display:block;padding:10px 14px;color:var(--text2);border-top:1px solid rgba(255,255,255,.05);font-size:14px;line-height:1.45}
.results a:first-child{border-top:0}
.results a:hover,.results a.on{background:rgba(47,107,255,.14);color:#fff}
.results a b{color:var(--text);font-weight:600}
.results a small{display:block;color:var(--text3);font-size:12px;margin-top:1px}
.results a span{display:block;font-size:13px;color:var(--text3);margin-top:3px}
.results mark{background:rgba(255,138,31,.25);color:#fff;border-radius:3px;padding:0 1px}
.results .none{padding:12px 14px;font-size:14px;color:var(--text3)}

/* The docs' home: the search, and every part of the docs as a card */
.dhome{padding-top:56px;padding-bottom:100px}
.dhead{display:flex;gap:28px;align-items:center;margin-bottom:30px}
.dhead img{width:88px;height:88px;filter:drop-shadow(0 14px 34px rgba(76,141,255,.4))}
.dhead h1{font:700 48px/1.05 var(--display);letter-spacing:-.02em;margin:0 0 8px}
.dhead p{margin:0;color:var(--text2);font-size:18px;max-width:720px}
.dhome .dsearch{max-width:720px}
.dhome .dsearch input{height:52px;border-radius:14px;font-size:16px;padding:0 18px 0 46px;border-color:rgba(76,141,255,.45);box-shadow:0 0 0 4px rgba(47,107,255,.1)}
.dhome .dsearch svg{left:16px;top:16px;width:20px;height:20px}
.dhome .dsearch kbd{right:14px;top:15px}
.dhome .results{width:100%}
.popular{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 44px}
.popular span{font-size:13px;color:var(--text3);margin-right:4px;align-self:center}
.popular a{font-size:13.5px;padding:6px 12px;border-radius:9px;border:1px solid var(--stroke);color:var(--text2);background:rgba(255,255,255,.03)}
.popular a:hover{border-color:var(--acc);color:#fff}
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.area{border:1px solid var(--stroke);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));padding:20px 20px 16px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s;scroll-margin-top:90px}
.area:hover,.area:target{border-color:rgba(76,141,255,.5)}
.area .ah{display:flex;gap:12px;align-items:center}
.area .ah img{width:40px;height:40px;border-radius:10px}
.area .ah .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(76,194,255,.12);color:var(--cyan);font-size:19px}
.area h3{margin:0;font:700 19px var(--display)}
.area p{margin:0;font-size:14px;color:var(--text3)}
.area ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:2px}
.area li a{display:block;padding:5px 8px;margin:0 -8px;border-radius:8px;font-size:14.5px;color:var(--text2)}
.area li a:hover{background:rgba(255,255,255,.05);color:#fff}

@media (max-width:1000px){.areas,.howto{grid-template-columns:1fr 1fr}.tour ol{grid-template-columns:1fr}}
@media (max-width:640px){
  .areas,.howto,.howto.two{grid-template-columns:1fr}
  .side{grid-template-columns:1fr}.side figure.shot{max-width:220px}
  .dhead{flex-direction:column;align-items:flex-start}.dhead h1{font-size:34px}
  .callout{display:none}
  .spot{width:16px;height:16px;font-size:9.5px;line-height:16px}
  .nextprev{grid-template-columns:1fr}.nextprev a:nth-child(2){grid-column:1}
}

@media (max-width:1100px){.docs{grid-template-columns:210px minmax(0,1fr)}.toc{display:none}}
@media (max-width:760px){
  .docs{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:20px}
  .sidebar{position:static;max-height:none;border-bottom:1px solid var(--stroke);padding-bottom:12px}
  .doc h1{font-size:32px}
  .doc .cards{grid-template-columns:1fr}
  .doc table{display:block;overflow-x:auto}
}

/* a page of the docs not written in this language yet: shown in English, said so */
.untranslated{margin:10px 0 18px;padding:9px 14px;border-radius:10px;border:1px solid rgba(76,141,255,.3);background:rgba(47,107,255,.09);font-size:14px;color:var(--text2)}
.dhead .untranslated{margin:12px 0 0}

/* A console: its tab, then what is typed and what cobaltphoto writes, in the colours the command line uses (Ink) */
.doc .term{margin:10px 0 22px;border:1px solid var(--stroke2);border-radius:12px;overflow:hidden;background:#0c0c0c}
.doc .term-tab{display:flex;align-items:center;gap:8px;padding:7px 12px 0;background:#1f1f1f;font:12px var(--ui);color:var(--text3)}
.doc .term-tab span{display:flex;align-items:center;gap:8px;padding:5px 14px 6px;border-radius:7px 7px 0 0;background:#0c0c0c;color:var(--text2)}
.doc .term-tab i{width:12px;height:12px;border-radius:50%;background:conic-gradient(#5fd38a 0 54%,#3a3a3a 54% 100%)}
.doc .term pre{margin:0;border:0;border-radius:0;background:none;padding:12px 14px 14px;font:12px/1.5 var(--mono);color:#cccccc;white-space:pre;overflow-x:auto}
.doc .term .p{color:#6b7080}.doc .term .c{color:#fff}.doc .term .h{color:#4c8dff;font-weight:600}.doc .term .k{color:#c6a0ff}
.doc .term .o{color:#5fd3e8}.doc .term .s{color:#e8b77a}.doc .term .d{color:#8b90a0}.doc .term .ok,.doc .term .free{color:#5fd38a}
.doc .term .no{color:#ff6b6b}.doc .term .pro{color:#f2c94c}.doc .term .pb{color:#4c8dff}.doc .term .pr{color:#3a3f4b}
.doc .term .nw{white-space:nowrap}
/* Recipes: what it is for, then the console */
.doc .recipe{margin:18px 0 0}
.doc .recipe>p{margin:0 0 6px;color:var(--text)}
.doc .recipe .term{margin-top:0}
/* A recipe is what to type, not columns of output: its long lines wrap, as a console wraps them */
.doc .recipe .term pre{white-space:pre-wrap;overflow-wrap:anywhere}