.diagram-tour{--tour-bg:#0b1419;--tour-pad:var(--page-inset);--tour-text-w:clamp(300px, 32vw, 500px);--tour-gap:clamp(96px, 7vw, 128px);--tour-fade-end:24px;--safe-l:max(48px, var(--page-inset));--safe-t:40px;--safe-b:88px;--safe-r:calc(var(--tour-pad) + var(--tour-text-w) + var(--tour-gap));--fade-r:calc(var(--tour-pad) + var(--tour-text-w) + var(--tour-fade-end));--rail-bottom:24px;--tour-len:max(440px, 85svh - var(--header-h) * .5);--tour-fade-x: linear-gradient(to right, transparent 0, #0000004d calc(var(--safe-l) * .38), #000000b8 calc(var(--safe-l) * .7), #000 var(--safe-l), #000 calc(100% - var(--safe-r)), #000000b8 calc(100% - var(--safe-r) + (var(--safe-r) - var(--fade-r)) * .3), #0000004d calc(100% - var(--safe-r) + (var(--safe-r) - var(--fade-r)) * .62), transparent calc(100% - var(--fade-r)));--tour-heading-size:82px;--tour-heading-top:28px;--tour-heading-gap:24px;--tour-heading-w:calc(var(--tour-text-w) + var(--tour-gap) - var(--tour-fade-end));--tour-expanded-cap:calc(100svh - var(--header-h) - var(--tour-heading-top) - var(--tour-heading-h,0px) - 8px - var(--tour-panel-inset));--tour-panel-inset:var(--page-gutter);isolation:isolate;padding-block:96px 0;position:relative}.tour-head{padding:0 var(--page-gutter) 40px;max-width:var(--page-frame-max);margin-inline:auto}.tour-head h2{font-size:clamp(44px,5vw,76px)}@media (width>=851px) and (height<=850px){.diagram-tour{--tour-heading-size:74px;--tour-heading-top:20px;--tour-heading-gap:16px;--tour-panel-inset:min(var(--page-gutter), 40px)}}@media (width>=851px) and (width<=1100px){.diagram-tour{--tour-heading-size:66px}}@media (width>=851px) and (height<=700px){.diagram-tour{--tour-heading-size:58px;--tour-heading-top:16px;--tour-heading-gap:12px;--tour-panel-inset:24px}}[data-tour-mode=pinned] .tour-head h2[data-tour-heading=overlay]{z-index:4;top:calc(var(--header-h) + var(--tour-heading-top));right:var(--tour-pad);max-width:var(--tour-heading-w);font-size:var(--tour-heading-size);text-align:right;pointer-events:none;margin:0;line-height:.96;position:fixed}.tour-body{grid-template-columns:minmax(0, 1fr) var(--tour-text-w);padding-right:var(--tour-pad);display:grid;position:relative}.tour-stage-col{top:var(--header-h);height:calc(100svh - var(--header-h));margin-right:calc(-1 * var(--tour-pad));transform-origin:50% 0;grid-area:1/1/auto/-1;align-self:start;position:sticky;overflow:clip}.tour-stage{contain:layout paint;mask-image:var(--tour-fade-x), linear-gradient(to bottom, transparent 0, #000 calc(var(--safe-t) - 4px), #000 calc(100% - var(--safe-b)), #0006 calc(100% - var(--safe-b) + 24px), transparent calc(100% - var(--rail-bottom) - 36px));background:0 0;margin:0;position:absolute;inset:0;overflow:hidden;mask-composite:intersect}.tour-safe{pointer-events:none;visibility:hidden;left:var(--safe-l);top:var(--safe-t);right:var(--safe-r);bottom:var(--safe-b);position:absolute}.tour-svg{width:100%;height:100%;display:block;position:absolute;inset:0}.tour-svg[hidden],svg[hidden]{display:none!important}.tour-img{transform-origin:0 0;will-change:transform;mix-blend-mode:lighten;max-width:none;position:absolute;top:0;left:0;mask-image:linear-gradient(90deg,#0000,#000 3% 97%,#0000),linear-gradient(#0000,#000 5% 95%,#0000);mask-composite:intersect}.tour-stage[data-mode=svg] .tour-img,.tour-stage:not([data-mode=svg]) .tour-svg{display:none}.tour-placeholder{width:auto;height:auto;left:var(--safe-l);top:var(--safe-t);right:var(--safe-r);bottom:var(--safe-b);position:absolute}.tour-edge{z-index:2;pointer-events:none;border:1px solid var(--line);border-radius:inherit;opacity:0;position:absolute;inset:0}.tour-svg .tour-trace{pointer-events:none;will-change:opacity}.tour-rail{z-index:1;left:var(--safe-l);right:var(--safe-r);bottom:var(--rail-bottom);pointer-events:none;justify-content:center;display:flex;position:absolute}.tour-rail ol{pointer-events:auto;gap:0;margin:0;padding:0;list-style:none;display:flex}.tour-rail a{border-radius:12px;justify-content:center;align-items:center;min-width:24px;height:24px;padding:0 8px;text-decoration:none;display:flex}.tour-rail a:before{content:"";background:color-mix(in srgb, var(--paper) 30%, transparent);width:8px;height:8px;transition:width .45s var(--ease), background-color .45s var(--ease);border-radius:4px;display:block}.tour-rail a:hover:before{background:color-mix(in srgb, var(--paper) 62%, transparent)}.tour-rail a[aria-current=step]:before{background:var(--teal-light);width:20px}.tour-rail a:focus-visible{outline:2px solid var(--teal-light);outline-offset:0}.tour-text{z-index:2;grid-area:1/2;position:relative}.tour-reading{display:contents}.tour-glass,.tour-track,.tour-more{display:none}.tour-steps{margin:0;padding:0;list-style:none}.tour-step{min-height:calc(80svh - var(--header-h) * .2);scroll-margin-top:var(--header-h);outline:none;align-items:center;display:flex}.tour-step:not(:first-child){scroll-margin-top:calc(var(--header-h) * .6 + 10svh)}.tour-step:first-child{min-height:calc(100svh - var(--header-h))}.tour-step:last-child{min-height:calc(115svh - var(--header-h));scroll-margin-top:calc(var(--header-h) - 7.5svh)}.tour-panel{width:100%;padding:28px}.tour-step:focus-visible .tour-panel{outline:2px solid var(--teal-light);outline-offset:6px}.tour-panel h3{margin-bottom:20px;font-size:34px}.tour-panel [data-tour-para]{color:#d0d9db;font-size:15px}.tour-panel [data-tour-para]+[data-tour-para]{margin-top:12px}@media (width>=851px) and (height<=850px){.tour-panel{padding:22px 24px}.tour-panel h3{margin-bottom:16px;font-size:31px}}@media (width>=851px) and (height<=700px){.diagram-tour{--tour-text-w:clamp(300px, 38vw, 500px)}.tour-panel h3{margin-bottom:12px;font-size:28px}.tour-panel [data-tour-para]{font-size:14px;line-height:1.55}.tour-panel [data-tour-para]+[data-tour-para]{margin-top:8px}}@media (prefers-reduced-motion:no-preference){[data-tour-mode=pinned] .tour-text{top:var(--header-h);height:calc(100svh - var(--header-h));--tour-text-top:calc(var(--tour-heading-top) + var(--tour-heading-h,0px));padding-block:var(--tour-text-top) var(--tour-panel-inset);grid-area:1/2;align-content:center;align-self:start;display:grid;position:sticky}[data-tour-mode=pinned] .tour-glass{grid-area:1/1;align-self:center;display:block}[data-tour-mode=pinned] .tour-steps{max-height:calc(100svh - var(--header-h) - var(--tour-text-top) - var(--tour-panel-inset) - 2 * var(--tour-heading-gap));scrollbar-width:thin;scrollbar-color:var(--teal) var(--ink);grid-area:1/1;align-self:center;display:grid;position:relative;overflow:hidden}[data-tour-mode=pinned][data-tour-clipped=true] .tour-steps{mask-image:linear-gradient(#000 calc(100% - min(120px,40%)),#00000059 calc(100% - min(56px,20%)),#0000 calc(100% - 12px))}[data-tour-mode=pinned] .tour-more{z-index:2;min-height:44px;color:var(--paper);backdrop-filter:blur(6px);font-family:var(--body);cursor:pointer;background:#0f1c21cc;border:1px solid #fff5;border-radius:3px;grid-area:1/1;place-self:end;align-items:center;margin:0 24px 16px 0;padding:0 16px;font-size:13px;font-weight:600;display:inline-flex}@media (hover:hover){[data-tour-mode=pinned] .tour-more:hover{background:var(--paper);color:var(--ink)}}[data-tour-mode=pinned] .tour-steps .tour-step{grid-area:1/1;min-height:0;padding:0;display:block;overflow:clip}[data-tour-mode=pinned] .tour-panel>*{will-change:transform, opacity}[data-tour-mode=pinned] .tour-step[aria-hidden=true]{pointer-events:none}[data-tour-mode=pinned] .tour-panel.glass{box-shadow:none;backdrop-filter:none;background:0 0;border-color:#0000}[data-tour-mode=pinned] .tour-step:focus-visible .tour-panel{outline:none}[data-tour-mode=pinned] .tour-track{grid-area:1/1/auto/-1;display:block}[data-tour-mode=pinned] .tour-beat{height:var(--tour-len)}[data-tour-mode=pinned] .tour-beat:last-child{height:calc(100svh - var(--header-h) + var(--tour-len) * .6)}}@media (width>=851px) and (height<=560px){.diagram-tour{--tour-text-w:clamp(300px, 30vw, 440px);--tour-gap:clamp(80px, 6.5vw, 120px);--safe-t:16px;--safe-b:40px;--rail-bottom:8px;--tour-heading-size:44px;--tour-heading-top:8px;--tour-heading-gap:12px;--tour-panel-inset:16px}.tour-stage{mask-image:var(--tour-fade-x), linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 40px), transparent calc(100% - 32px))}.tour-step{min-height:calc(80svh - var(--header-h) * .2)}.tour-panel{padding:16px 24px}.tour-panel h3{margin-bottom:10px;font-size:26px}.tour-panel [data-tour-para]{font-size:14px;line-height:1.55}.tour-panel [data-tour-para]+[data-tour-para]{margin-top:8px}}@media (width<=850px){.diagram-tour{--page-gutter:25px;--tour-stage-h:min(60vw, 42svh);--tour-rail-h:44px;--tour-col-h:calc(var(--tour-stage-h) + var(--tour-rail-h));--safe-l:12px;--safe-r:12px;--safe-t:10px;--safe-b:10px;--tour-heading-size:28.8px;--tour-panel-inset:12px;--tour-heading-top:8px;--tour-heading-w:calc(100vw - 2 * var(--page-gutter));padding-block:64px 0}.tour-head{padding:0 25px 24px}.tour-body{padding:0;display:block}.tour-stage-col{z-index:3;height:var(--tour-col-h);border-bottom:1px solid var(--line);transform-origin:50% 100%;background:0 0;margin:0}.tour-stage{bottom:var(--tour-rail-h);mask-image:linear-gradient(90deg,#0000 0,#000 12px calc(100% - 12px),#0000 100%),linear-gradient(#0000 0,#000 8px calc(100% - 8px),#0000 100%)}.tour-rail{height:var(--tour-rail-h);align-items:center;bottom:0;left:0;right:0}.tour-rail a{border-radius:22px;min-width:32px;height:44px}.tour-text{padding:0 var(--page-gutter)}.tour-step,.tour-step:first-child,.tour-step:not(:first-child),.tour-step:last-child{min-height:calc(100svh - var(--header-h) - var(--tour-col-h));scroll-margin-top:calc(var(--header-h) + var(--tour-col-h));align-items:flex-start;padding-top:16px}.tour-step:last-child{min-height:calc(100svh - var(--header-h) - var(--tour-col-h) + 10svh)}.tour-panel{padding:12px 14px}.tour-panel h3{margin-bottom:10px;font-size:25.2px}.tour-panel [data-tour-para]{font-size:13.5px}.tour-panel [data-tour-para]+[data-tour-para]{margin-top:8px}[data-tour-mode=pinned] .tour-more{font-size:11.7px}}@media (prefers-reduced-motion:no-preference) and (width<=850px){.diagram-tour[data-tour-mode=pinned]{--tour-band:calc(var(--tour-heading-h,0px) + 2 * var(--tour-heading-top));--tour-panel-anchor:1;--tour-phone-panel:min(44svh, 380px);--tour-rail-h:32px;--tour-col-h:calc(100svh - var(--header-h));--safe-l:10px;--safe-r:10px;--safe-t:calc(var(--tour-band) + 4px);--safe-b:calc(var(--tour-phone-panel) + var(--tour-rail-h) + 8px)}[data-tour-mode=pinned] .tour-body{grid-template-columns:minmax(0,1fr);display:grid}[data-tour-mode=pinned] .tour-stage-col{height:var(--tour-col-h);transform-origin:50% 0;border-bottom:0;grid-area:1/1;margin:0}[data-tour-mode=pinned] .tour-stage{mask-image:linear-gradient(to bottom, #00000059 0, #000 var(--tour-band));top:0;bottom:0}[data-tour-mode=pinned] .tour-rail{height:var(--tour-rail-h);z-index:5;bottom:0}[data-tour-mode=pinned] .tour-rail a{height:var(--tour-rail-h)}[data-tour-mode=pinned] .tour-text{z-index:4;top:var(--header-h);height:var(--tour-col-h);padding:0 10px calc(var(--tour-rail-h) + 4px);pointer-events:none;grid-area:1/1;align-content:end;margin-top:0}[data-tour-mode=pinned] .tour-text :is(.tour-glass,.tour-steps,.tour-more,.tour-reading){pointer-events:auto}[data-tour-mode=pinned] .tour-glass{align-self:end}[data-tour-mode=pinned] .tour-steps{max-height:calc(var(--tour-phone-panel) - 8px);align-self:end}[data-tour-mode=pinned] .tour-track{grid-column:1}.diagram-tour[data-tour-mode=pinned][data-tour-expanded=true] .tour-text{top:var(--header-h);height:var(--tour-col-h);padding:8px 10px calc(var(--tour-rail-h) + 4px);align-content:stretch}.diagram-tour[data-tour-mode=pinned][data-tour-expanded=true] .tour-reading{align-self:stretch;height:100%;max-height:none}.diagram-tour[data-tour-mode=pinned][data-tour-expanded=true] .tour-glass{align-self:stretch;height:100%!important}}@media (prefers-reduced-motion:reduce),(scripting:none){.tour-body{padding-left:var(--page-inset);column-gap:3.5vw}.tour-stage-col{flex-direction:column;grid-column:1;gap:12px;height:auto;margin:0;padding-block:24px;display:flex;position:relative;top:auto;overflow:visible}.tour-stage{aspect-ratio:16/9;position:relative;inset:auto;mask-image:none}.tour-img{width:100%!important;height:100%!important;transform:none!important}.tour-placeholder{inset:8%}.tour-edge{display:none}.tour-rail{position:static}.tour-step,.tour-step:first-child,.tour-step:not(:first-child),.tour-step:last-child{min-height:0;scroll-margin-top:var(--header-h);padding-block:16px;opacity:1!important}.tour-svg .tour-trace{display:none}}@media (prefers-reduced-motion:reduce) and (width<=850px),(scripting:none) and (width<=850px){.tour-body{padding:0 var(--page-gutter)}.tour-stage-col{height:auto;padding:8px 0 0}.tour-stage{bottom:auto}.tour-rail{height:auto}.tour-text{padding:0}.tour-step,.tour-step:first-child,.tour-step:not(:first-child),.tour-step:last-child{min-height:0;scroll-margin-top:var(--header-h)}}.tour-backdrop{z-index:-1;pointer-events:none;position:absolute;inset:0}.tour-backdrop>.grid-background{inset:auto;top:var(--header-h);width:100%;height:calc(100svh - var(--header-h));max-height:100svh;position:sticky}@media (prefers-reduced-motion:no-preference){[data-tour-mode=pinned][data-tour-expanded=true] .tour-text{z-index:5;top:var(--header-h);height:calc(100svh - var(--header-h));padding-top:calc(var(--tour-heading-top) + var(--tour-heading-h,0px) + 8px);padding-bottom:var(--tour-panel-inset);margin-top:0}[data-tour-mode=pinned][data-tour-expanded=true] .tour-reading{height:var(--tour-expanded-height);max-height:var(--tour-expanded-cap);grid-area:1/1;grid-template-rows:44px minmax(0,1fr);align-self:center;min-height:0;display:grid;overflow:hidden}[data-tour-mode=pinned][data-tour-expanded=true] .tour-steps{overscroll-behavior:contain;grid-area:2/1;align-self:stretch;min-height:0;max-height:none;overflow-y:auto;mask-image:none}[data-tour-mode=pinned][data-tour-expanded=true] .tour-steps .tour-step:not([aria-hidden=true]){align-self:start;height:auto;max-height:none;overflow:visible}[data-tour-mode=pinned][data-tour-expanded=true] .tour-step[aria-hidden=true]{display:none}[data-tour-mode=pinned][data-tour-expanded=true] .tour-more{background:var(--ink);width:100%;color:var(--teal-light);border:0;border-radius:0;grid-area:1/1;justify-content:flex-start;place-self:stretch stretch;margin:0;padding:0 14px}[data-tour-mode=pinned] .tour-more:focus-visible{outline:2px solid var(--teal-light);outline-offset:-4px}[data-tour-mode=pinned] .tour-steps::-webkit-scrollbar{width:8px}[data-tour-mode=pinned] .tour-steps::-webkit-scrollbar-track{background:var(--ink)}[data-tour-mode=pinned] .tour-steps::-webkit-scrollbar-thumb{background:var(--teal);border:2px solid var(--ink);border-radius:4px}}
