/* Session's documentation reading styles, measured from the rendered reference.
   Roboto is self-hosted under the SIL Open Font License in assets/fonts/. */
@font-face {
  font-family:Roboto;
  src:url('../fonts/roboto-latin.woff2') format('woff2');
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}
:root {
  color-scheme:dark;
  --ground:#1d1d1d;
  --panel:#242625;
  --deep:#181a19;
  --line:#373a38;
  --ink:#fefffe;
  --bright:#fefffe;
  --muted:#adaead;
  --accent:#00f782;
  --font:Roboto,Arial,sans-serif;
  --header-height:64px;
}
* { box-sizing:border-box; }
html { scroll-padding-top:96px; }
body { margin:0; background:var(--ground); color:var(--ink); font:16px/26px var(--font); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:3px; }
button,input { font:inherit; }
button { cursor:pointer; color:inherit; }
button,a,input,summary { -webkit-tap-highlight-color:transparent; }
button:hover,a:hover { color:var(--bright); }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; top:-100px; left:20px; z-index:100; background:var(--accent); color:var(--deep); padding:10px 20px; }
.skip-link:focus { top:12px; }
img { max-width:100%; height:auto; }
svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; flex-shrink:0; }
kbd { font:11px/18px var(--font); border:1px solid var(--line); border-radius:4px; padding:0 4px; white-space:nowrap; }
.docs-header { height:var(--header-height); position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:24px; padding:0 32px; background:var(--ground); border-bottom:1px solid #ffffff05; }
.brand { display:flex; align-items:center; gap:20px; text-decoration:none; order:0; }
.brand img { width:128px; height:auto; }
.brand>span { font-size:16px; color:var(--muted); border-left:1px solid var(--line); padding-left:20px; }
.search-launch { order:2; display:flex; align-items:center; gap:10px; width:224px; padding:8px 12px; background:transparent; border:1px solid #3b403c; border-radius:12px; color:var(--muted); font-size:14px; line-height:20px; text-align:left; }
.search-launch:hover { border-color:#606761; }
.search-launch kbd { margin-left:auto; }
.back-site { order:1; margin-left:auto; white-space:nowrap; text-decoration:none; font-size:14px; color:#bcc2bd; }
.back-site span { margin-left:6px; }
.docs-layout { display:grid; grid-template-columns:288px minmax(0,1fr) 256px; max-width:1600px; padding:0 32px; margin:0 auto; }
.sidebar { position:sticky; top:var(--header-height); height:calc(100dvh - var(--header-height)); align-self:start; }
.navigation>summary { display:none; }
.nav-content { height:calc(100dvh - var(--header-height)); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--line) transparent; padding:24px 8px 16px 0; }
.nav-group { margin:0 0 24px; }
.nav-group>p { margin:0 0 8px; padding:6px 12px; font-size:14px; line-height:20px; font-weight:600; color:var(--bright); }
.nav-group a { display:block; padding:6px 12px; line-height:20px; text-decoration:none; color:var(--muted); font-size:14px; border-radius:6px; margin:2px 0; }
.nav-group a:hover { color:var(--bright); background:#ffffff06; }
.nav-group a[aria-current] { color:var(--accent); font-weight:600; }
.sidebar-foot { display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); padding:16px 12px 0; font-size:12px; color:var(--muted); }
.status-dot { width:5px; height:5px; border-radius:50%; background:var(--accent); }
.beta-label { margin-left:auto; border:1px solid var(--line); border-radius:4px; padding:0 5px; font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
main { min-width:0; padding:32px 16px 0 48px; }
.article-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; }
.breadcrumb { display:flex; flex-wrap:wrap; gap:8px; font-size:12px; line-height:20px; color:var(--muted); margin:0; }
.breadcrumb a { text-decoration:none; }
.breadcrumb>span { color:#69726b; }
.copy-link { flex-shrink:0; font-size:14px; line-height:20px; border:1px solid #3b403c; border-radius:8px; background:none; padding:4px 10px; }
.article-header { margin-bottom:24px; }
h1 { font-size:36px; line-height:45px; font-weight:700; letter-spacing:-.9px; color:var(--bright); margin:0 0 16px; }
.article-lead { font-size:16px; line-height:26px; margin:0; color:#bcc2bd; }
.article-body p { margin:20px 0; }
.article-body>p:first-child { margin-top:0; }
.article-body strong { color:var(--bright); font-weight:700; }
.article-body h2 { font-size:24px; line-height:32px; letter-spacing:-.3px; font-weight:600; color:var(--bright); margin:38px 0 20px; scroll-margin-top:0; }
.article-body h3 { font-size:20px; line-height:28px; font-weight:600; color:var(--bright); margin:28px 0 16px; }
.heading-link { font-size:18px; opacity:0; padding:0 8px; text-decoration:none!important; color:var(--muted)!important; }
.article-body h2:hover .heading-link,.heading-link:focus { opacity:1; }
.article-body a { color:var(--accent); text-decoration-color:var(--accent); }
.article-body a:hover { color:#73ffb6; }
.article-body ul,.article-body ol { padding-left:28px; margin:20px 0; }
.article-body li { padding-left:0; margin:6px 0; line-height:24px; }
.article-body li::marker { color:#bcc2bd; }
.article-body code { font:14px/22px ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--ink); background:#ffffff08; border:1px solid var(--line); border-radius:4px; padding:1px 4px; overflow-wrap:anywhere; }
.article-body pre { background:var(--deep); border:1px solid var(--line); border-radius:8px; padding:16px 20px; overflow-x:auto; margin:24px 0; line-height:24px; }
.article-body pre code { padding:0; border:0; background:none; font-size:14px; white-space:pre; overflow-wrap:normal; }
.table-wrap { overflow-x:auto; margin:24px 0; }
.article-body table { border-collapse:collapse; width:100%; font-size:14px; line-height:22px; text-align:left; }
.article-body th { font-weight:600; color:var(--bright); }
.article-body td,.article-body th { padding:10px 12px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); vertical-align:top; min-width:125px; }
.article-body td:last-child,.article-body th:last-child { border-right:0; }
.article-body tr:last-child td { border-bottom:0; }
.callout { background:#ffffff04; border:1px solid var(--line); border-radius:8px; padding:16px 20px; margin:24px 0; font-size:16px; line-height:26px; }
.callout p:first-child { margin-top:0; }
.callout p:last-child { margin-bottom:0; }
.callout .callout-label { font-weight:600; color:var(--bright); margin-bottom:8px; font-size:16px; }
.doc-cards { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; margin:24px 0; }
.doc-card { position:relative; border-bottom:1px solid var(--line); padding:16px 12px; text-decoration:none; display:flex; flex-direction:column; }
.doc-card:nth-child(odd) { border-right:1px solid var(--line); }
.doc-card:nth-last-child(-n+2) { border-bottom:0; }
.doc-card:hover { background:#ffffff04; }
.doc-card .card-kicker { display:none; }
.doc-card strong { font-size:16px; line-height:24px; font-weight:500; padding-right:20px; color:var(--accent); }
.doc-card p { font-size:14px; line-height:22px; color:var(--muted); margin:8px 0 0; }
.doc-card .card-arrow { position:absolute; right:12px; top:16px; color:var(--accent); }
.flow { display:flex; gap:12px; align-items:center; margin:24px 0; padding:20px; border:1px solid var(--line); border-radius:8px; }
.flow div { flex:1; text-align:center; font-size:14px; line-height:22px; color:#bcc2bd; }
.flow strong { display:block; font-size:16px; }
.flow>span { color:var(--muted); }
.section-note { color:var(--muted); font-size:14px; }
.outline { position:sticky; top:var(--header-height); align-self:start; padding:32px 0 16px 32px; max-height:calc(100dvh - var(--header-height)); overflow:auto; font-size:14px; line-height:20px; color:#bcc2bd; }
.outline nav>p { font-size:12px; line-height:16px; font-weight:500; color:#bcc2bd; text-transform:uppercase; margin:0 0 12px 12px; }
.outline nav a { display:block; padding:8px 12px; text-decoration:none; color:#bcc2bd; }
.outline nav a:hover { color:var(--bright); }
.outline nav a[aria-current] { color:var(--accent); }
.outline-top { display:inline-block; text-decoration:none; color:var(--muted); margin:24px 0 0 12px; font-size:12px; }
.mobile-outline { display:none; }
.page-navigation { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin-top:48px; }
.page-navigation a { position:relative; border:1px solid var(--line); border-radius:8px; padding:16px; text-decoration:none; font-size:16px; }
.page-navigation a:hover { border-color:#69726b; }
.page-navigation span { display:block; font-size:12px; line-height:20px; color:var(--muted); margin-bottom:4px; }
.page-navigation strong { font-weight:500; color:var(--bright); display:block; margin-right:20px; line-height:24px; overflow-wrap:anywhere; }
.page-navigation b { position:absolute; right:14px; top:32px; color:var(--muted); }
.page-next { grid-column:2; }
.article-footer { display:flex; justify-content:space-between; gap:20px; padding:24px 0 32px; margin-top:24px; font-size:14px; line-height:20px; color:#bcc2bd; }
.article-footer a { text-decoration:none; }
.search-dialog { color:var(--ink); background:var(--ground); border:1px solid var(--line); border-radius:12px; padding:24px; width:560px; max-width:calc(100% - 32px); max-height:calc(100dvh - 48px); box-shadow:0 30px 100px #0009; }
.search-dialog::backdrop { background:#000a; }
.dialog-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.dialog-header h2 { font-size:20px; line-height:28px; font-weight:600; color:var(--bright); margin:0; }
.dialog-header button { border:0; background:none; padding:5px 10px; }
.search-dialog input { width:100%; border:1px solid var(--line); border-radius:8px; background:var(--deep); padding:12px; font-size:16px; }
.search-dialog input::placeholder { color:var(--muted); }
.search-dialog>p { font-size:14px; line-height:22px; color:#bcc2bd; margin:16px 0; }
.search-dialog nav a { display:flex; justify-content:space-between; padding:12px 4px; border-top:1px solid var(--line); font-size:16px; text-decoration:none; }
.search-dialog nav span { color:var(--muted); }
.media-placeholder { margin:24px 0; }
.media-frame { min-height:235px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:32px; background:var(--panel); border:1px dashed #555d56; border-radius:8px; position:relative; }
.media-type { font-size:12px; line-height:20px; color:var(--muted); display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.media-type::before { content:''; display:block; width:13px; height:10px; border:1px solid #bcc2bd; border-radius:2px; }
.media-placeholder[data-media="animation"] .media-type::before { width:0; height:0; border-radius:0; border-width:5px 0 5px 8px; border-color:transparent transparent transparent #bcc2bd; }
.media-frame>strong { font-size:16px; line-height:24px; font-weight:500; max-width:390px; }
.media-frame>p { font-size:14px; line-height:22px; color:#bcc2bd; max-width:370px; margin:8px 0 0; }
.media-placeholder figcaption { font-size:14px; line-height:22px; color:var(--muted); padding:8px 0 0; }
.redirect-page { max-width:768px; margin:64px auto; padding:24px; }
.redirect-page h1 { font-size:36px; }
.redirect-page a { color:var(--accent); }
@media(min-width:1024px) {
  .navigation:not([open])>.nav-content { display:block; }
}
@media(max-width:1279px) {
  .docs-layout { grid-template-columns:256px minmax(0,1fr); padding:0 24px; }
  .outline { display:none; }
  main { padding:32px 0 0 32px; }
  .mobile-outline { display:block; border:1px solid var(--line); border-radius:8px; padding:10px 14px; margin-bottom:24px; font-size:14px; line-height:20px; }
  .mobile-outline summary { cursor:pointer; color:#bcc2bd; }
  .mobile-outline nav { padding:10px 0; }
  .mobile-outline a { display:block; padding:6px 0; text-decoration:none; }
}
@media(max-width:1023px) {
  .docs-header { padding:0 24px; gap:20px; }
  .brand { gap:12px; }
  .brand>span { padding-left:12px; font-size:14px; }
  .search-launch { width:200px; }
  .docs-layout { display:block; padding:0; }
  .sidebar { position:relative; top:0; height:auto; border-bottom:1px solid var(--line); }
  .navigation>summary { display:flex; justify-content:space-between; align-items:center; list-style:none; cursor:pointer; padding:12px 24px; font-size:14px; line-height:20px; color:#bcc2bd; }
  .navigation>summary::-webkit-details-marker { display:none; }
  .navigation[open]>summary { border-bottom:1px solid var(--line); }
  .nav-content { height:auto; max-height:65dvh; padding:16px 12px; }
  .nav-group { margin-bottom:20px; }
  .sidebar-foot { display:none; }
  main { max-width:816px; margin:auto; padding:24px 24px 0; }
  h1 { font-size:32px; line-height:40px; letter-spacing:-.8px; }
}
@media(max-width:600px) {
  .back-site { display:none; }
  .search-launch { margin-left:auto; width:auto; padding:8px; }
  .search-launch span,.search-launch kbd { display:none; }
  .doc-cards { grid-template-columns:minmax(0,1fr); }
  .doc-card:nth-child(odd) { border-right:0; }
  .doc-card:nth-last-child(2) { border-bottom:1px solid var(--line); }
  .article-tools { align-items:flex-start; }
  .breadcrumb { max-width:65%; }
  .copy-link { font-size:12px; }
  .flow { flex-direction:column; padding:20px; gap:12px; }
  .flow>span { transform:rotate(90deg); }
  .page-navigation { grid-template-columns:minmax(0,1fr); gap:12px; }
  .page-next { grid-column:auto; }
  .article-footer { flex-wrap:wrap; gap:12px; }
  .search-dialog { padding:20px; }
}
@media(prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto!important; transition:none!important; }
}
@media print {
  body { background:white; color:#222; }
  .docs-header,.sidebar,.outline,.article-tools,.mobile-outline,.page-navigation,.article-footer,.heading-link,.search-dialog { display:none; }
  main { padding:0; max-width:none; }
  .docs-layout { display:block; padding:0; }
  .article-body strong,h1,.article-body h2,.article-body h3 { color:#111; }
  .article-body a { color:#333; }
  .article-header,.callout,.table-wrap,.flow { break-inside:avoid; }
  .article-lead { color:#444; }
}