@vanillaskyai/video 0.8.5 → 0.8.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/dist/react.js +27 -17
- package/docs/reference/design-system.html +4 -3
- package/package.json +1 -1
- package/starters/video-chat/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,10 @@ VanillaSky follows semantic versioning. This changelog begins with the 0.1 beta.
|
|
|
4
4
|
|
|
5
5
|
## Unreleased
|
|
6
6
|
|
|
7
|
+
## 0.8.6
|
|
8
|
+
|
|
9
|
+
- Show poster images on suggestion cards while videos are paused or autoplay is blocked, and use conversation bubbles for the Sessions button.
|
|
10
|
+
|
|
7
11
|
## 0.8.5
|
|
8
12
|
|
|
9
13
|
- Align Settings section headings above their option containers with consistent spacing.
|
package/dist/react.js
CHANGED
|
@@ -3034,6 +3034,10 @@ var stroke = {
|
|
|
3034
3034
|
function Glyph({ children }) {
|
|
3035
3035
|
return /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", ...stroke, children });
|
|
3036
3036
|
}
|
|
3037
|
+
var Sessions = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
|
|
3038
|
+
/* @__PURE__ */ jsx3("path", { d: "M5 3h10a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H8l-5 3V5a2 2 0 0 1 2-2Z" }),
|
|
3039
|
+
/* @__PURE__ */ jsx3("path", { d: "M17 8h2a2 2 0 0 1 2 2v11l-4-3h-6a2 2 0 0 1-2-2v-2" })
|
|
3040
|
+
] });
|
|
3037
3041
|
var Plus = () => /* @__PURE__ */ jsx3(Glyph, { children: /* @__PURE__ */ jsx3("path", { d: "M12 5v14M5 12h14" }) });
|
|
3038
3042
|
var Gear = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
|
|
3039
3043
|
/* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "3" }),
|
|
@@ -3130,6 +3134,7 @@ import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef4
|
|
|
3130
3134
|
import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
3131
3135
|
function Frame({ media, poster, playing }) {
|
|
3132
3136
|
const video = useRef4(null);
|
|
3137
|
+
const [playingUrl, setPlayingUrl] = useState3(null);
|
|
3133
3138
|
useEffect6(() => {
|
|
3134
3139
|
const element = video.current;
|
|
3135
3140
|
if (!element || playing === void 0) return;
|
|
@@ -3138,21 +3143,26 @@ function Frame({ media, poster, playing }) {
|
|
|
3138
3143
|
}, [playing]);
|
|
3139
3144
|
if (!media) return null;
|
|
3140
3145
|
if (media.type === "image") return /* @__PURE__ */ jsx4("img", { className: "frame-media", src: media.url, alt: "" });
|
|
3141
|
-
return /* @__PURE__ */
|
|
3142
|
-
|
|
3143
|
-
|
|
3144
|
-
|
|
3145
|
-
|
|
3146
|
-
|
|
3147
|
-
|
|
3148
|
-
|
|
3149
|
-
|
|
3150
|
-
|
|
3151
|
-
|
|
3152
|
-
|
|
3153
|
-
|
|
3154
|
-
|
|
3155
|
-
|
|
3146
|
+
return /* @__PURE__ */ jsxs4(Fragment2, { children: [
|
|
3147
|
+
/* @__PURE__ */ jsx4(
|
|
3148
|
+
"video",
|
|
3149
|
+
{
|
|
3150
|
+
ref: video,
|
|
3151
|
+
className: "frame-media",
|
|
3152
|
+
src: media.url,
|
|
3153
|
+
poster: poster ? media.posterUrl : void 0,
|
|
3154
|
+
onPlaying: () => setPlayingUrl(media.url),
|
|
3155
|
+
onError: () => setPlayingUrl(null),
|
|
3156
|
+
autoPlay: playing !== false,
|
|
3157
|
+
muted: true,
|
|
3158
|
+
loop: true,
|
|
3159
|
+
playsInline: true,
|
|
3160
|
+
preload: "metadata",
|
|
3161
|
+
"aria-hidden": "true"
|
|
3162
|
+
}
|
|
3163
|
+
),
|
|
3164
|
+
poster && media.posterUrl && playingUrl !== media.url && /* @__PURE__ */ jsx4("img", { className: "frame-media frame-poster", src: media.posterUrl, alt: "" })
|
|
3165
|
+
] });
|
|
3156
3166
|
}
|
|
3157
3167
|
function SuggestionCards({ suggestions, label, onAsk }) {
|
|
3158
3168
|
const railRef = useRef4(null);
|
|
@@ -3187,7 +3197,7 @@ function SuggestionCards({ suggestions, label, onAsk }) {
|
|
|
3187
3197
|
onPointerEnter: () => take(index),
|
|
3188
3198
|
onClick: () => onAsk(card),
|
|
3189
3199
|
children: [
|
|
3190
|
-
/* @__PURE__ */ jsx4(Frame, { media: card.media, playing: index === at }),
|
|
3200
|
+
/* @__PURE__ */ jsx4(Frame, { media: card.media, poster: true, playing: index === at }),
|
|
3191
3201
|
/* @__PURE__ */ jsx4("span", { className: "card-wash", "aria-hidden": "true" }),
|
|
3192
3202
|
/* @__PURE__ */ jsx4("span", { className: "card-prompt", children: card.prompt })
|
|
3193
3203
|
]
|
|
@@ -3696,7 +3706,7 @@ function VideoChat({ options = {}, className, welcomeTitle, generatedVideoLabel,
|
|
|
3696
3706
|
setSettingsOpen(false);
|
|
3697
3707
|
},
|
|
3698
3708
|
children: [
|
|
3699
|
-
/* @__PURE__ */ jsx7(
|
|
3709
|
+
/* @__PURE__ */ jsx7(Sessions, {}),
|
|
3700
3710
|
/* @__PURE__ */ jsx7("span", { className: "nav-label", children: "Sessions" })
|
|
3701
3711
|
]
|
|
3702
3712
|
}
|
|
@@ -62,6 +62,7 @@ body { background: #080b16; }
|
|
|
62
62
|
</head>
|
|
63
63
|
<body>
|
|
64
64
|
<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden" aria-hidden="true"><defs>
|
|
65
|
+
<symbol id="sessions" viewBox="0 0 24 24"><path d="M5 3h10a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H8l-5 3V5a2 2 0 0 1 2-2Z" /><path d="M17 8h2a2 2 0 0 1 2 2v11l-4-3h-6a2 2 0 0 1-2-2v-2" /></symbol>
|
|
65
66
|
<symbol id="plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></symbol>
|
|
66
67
|
<symbol id="history" viewBox="0 0 24 24"><path d="M3 11a9 9 0 1 1 2.6 7M3 4v7h7M12 7v5l3 2" /></symbol>
|
|
67
68
|
<symbol id="sound" viewBox="0 0 24 24">
|
|
@@ -86,10 +87,10 @@ body { background: #080b16; }
|
|
|
86
87
|
<div class="doc-intro"><div class="doc-kicker">The immersive interface · Component reference</div><h1>The picture comes first.<br><span>Conversation stays close.</span></h1><p class="doc-lede">One video canvas. A quiet layer of controls. Every surface, state and detail of the current VanillaSky experience, together in one place.</p></div>
|
|
87
88
|
<nav class="doc-index" aria-label="Reference sections"><a href="#surfaces">Surfaces & navigation</a><a href="#panels">Settings & history</a><a href="#conversation">Conversation</a><a href="#captions">Subtitles</a><a href="#suggestions">Suggestions</a><a href="#foundations">Foundations</a></nav>
|
|
88
89
|
<section class="doc-section" id="surfaces"><div class="section-heading"><span class="number">01</span><h2>Present without competing</h2></div><p class="section-copy">Dark glass, soft edges and restrained lavender. Navigation sits above the picture, with the logo and a quiet cluster of actions.</p>
|
|
89
|
-
<div class="doc-preview"><header class="chrome"><div class="session-brand"><img class="brand-logo" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjE1NSAxMTMgMTY5MCA0MjIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMTU1IDExMyAxNjkwIDQyMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOnVybCgjU1ZHSURfMV8pO30KCS5zdDF7ZmlsbDp1cmwoI1NWR0lEXzAwMDAwMDEzMTc5MjQ3NzkzMzEzNjczNjYwMDAwMDA5NTAyNDY0NTI0MDQ3MTc5Njg2Xyk7fQoJLnN0MntmaWxsOnVybCgjU1ZHSURfMDAwMDAxMTQwNzU2MTAxNzA2MjA3NDYzMDAwMDAwMTMwNzY4NTczMjc1MDMwNTk4NTJfKTt9Cgkuc3Qze2ZpbGw6dXJsKCNTVkdJRF8wMDAwMDAzOTg0Mzk1Mzc4NTIyOTI0Mjg4MDAwMDAwODQwMzMzMzkyMDEyMjcwNTMyOF8pO30KCS5zdDR7ZmlsbDp1cmwoI1NWR0lEXzAwMDAwMDI3NTkyNTEzNTc2NDg3NDgzMzAwMDAwMDE2NzQwODQ2NzM4OTM4NjE5NzkyXyk7fQoJLnN0NXtmaWxsOnVybCgjU1ZHSURfMDAwMDAwNzM2ODI1Njc2NTkxMzUzNzk0NjAwMDAwMDQyOTE4NTk2MTM4MzIzNjcyNDZfKTt9Cgkuc3Q2e2ZpbGw6dXJsKCNTVkdJRF8wMDAwMDA0MzQyOTI4Mzg1Nzk2OTQ0NDE5MDAwMDAwNzg0MjM5Nzg0MTEwMTYxNjAxN18pO30KCS5zdDd7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPGc+Cgk8Zz4KCQk8Zz4KCQkJCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE0NC43Mzg4IiB5MT0iMzYxLjU0MjIiIHgyPSIxMTQ1LjM4NjYiIHkyPSIzMDguNTkwNyIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDY1MCkiPgoJCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0UwNEY4QSIvPgoJCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0VDOUEyQyIvPgoJCQk8L2xpbmVhckdyYWRpZW50PgoJCQk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDMxLjkzLDI5OC42N2MtMC42Mi0wLjYtMS4zNi0xLjExLTIuMTktMS41N2MtMi40Mi0xLjMyLTUuNjQtMS45OC05LjctMS45OAoJCQkJYy0xNi4xMiwwLTMwLjQ0LTEuMDYtNDIuOTctMy4xOWMxMS44My0zMi4yLDE3Ljc2LTYxLjkyLDE3Ljc2LTg5LjE1YzAtMTguOTMtNC40NS0zMy44NC0xMy4zMi00NC43NAoJCQkJYy04Ljg5LTEwLjg3LTIwLjg5LTE2LjMyLTM2LjA1LTE2LjMyYy0xMi4zMiwwLTIzLjUsMy4xOS0zMy41NSw5LjU5Yy0xMC4wOCw2LjQtMTgsMTYuMDQtMjMuOCwyOC45NQoJCQkJYy01LjgxLDEyLjg5LTguNywyOC43LTguNyw0Ny40MWMwLDE4LjcsMy42NiwzNS4yMSwxMSw0OS41NGM3LjM0LDE0LjMyLDE4LjIzLDI1Ljk5LDMyLjY3LDM0Ljk3CgkJCQljLTEyLjA2LDI1LjgyLTI1LjMzLDQ3LjI0LTM5Ljc2LDY0LjI4Yy0xNC40NiwxNy4wNi0yNy44MiwyNS41Ny00MC4xNCwyNS41N2MtMTIuMDYsMC0yMS4xMi05LjQtMjcuMTYtMjguMjMKCQkJCWMtNi4wNC0xOC44Mi05LjA2LTQ2LjMzLTkuMDYtODIuNTZjMC0zNC41NSwzLjU1LTczLjE1LDEwLjY2LTExNS43NmMwLjQ3LTMuNzksMC43LTYuNCwwLjctNy44MWMwLTEzLjUxLTcuODEtMjAuMjUtMjMuNDQtMjAuMjUKCQkJCWMtOS40NywwLTE2LjE1LDIuMTktMjAuMDYsNi41N3MtNi45MywxMi43NC05LjA2LDI1LjA0Yy01LjkzLDMzLjE0LTguODcsNzAuNTQtOC44NywxMTIuMjFjMCw0OC43OCw2LjA0LDg3LjQ5LDE4LjEsMTE2LjEyCgkJCQljMTIuMDgsMjguNjcsMzAuNDIsNDIuOTcsNTUuMDUsNDIuOTdjMjMuOTEsMCw0Ny43Ni0xMS42NCw3MS41Ni0zNC45N2MyMy44LTIzLjMzLDQ0LjA4LTUyLjYxLDYwLjktODcuODkKCQkJCWMxMC42MSwyLjQsMjIuMzMsMy43OSwzNS4xNCw0LjIxYzQuOTMsMC4xNywxMC4wMiwwLjE3LDE1LjI5LDAuMDRjNy44MS0wLjIzLDEzLjU1LTIuNzIsMTcuMjMtNy40NQoJCQkJYzMuNjYtNC43NCw1LjUxLTEwLjE3LDUuNTEtMTYuMzJDNDM1LjY3LDMwNC4xMiw0MzQuNDIsMzAxLjA0LDQzMS45MywyOTguNjd6IE0zMzcuNjUsMjc2LjY2CgkJCQljLTE0LjkxLTExLjEzLTIyLjM4LTI4LjI5LTIyLjM4LTUxLjVjMC0xMy43MiwyLjAyLTI0LjMzLDYuMDQtMzEuNzhjNC4wNC03LjQ1LDkuMjUtMTEuMTksMTUuNjMtMTEuMTkKCQkJCWM0LjQ5LDAsOC4wNiwyLjMsMTAuNjYsNi45M2MyLjYsNC42MiwzLjkxLDExLjg5LDMuOTEsMjEuODNDMzUxLjUsMjI4LjI0LDM0Ni44NywyNTAuMTUsMzM3LjY1LDI3Ni42NnoiLz4KCQkJCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzAwMDAwMDg5NTUyODM1Mzg3NjQwNjA5ODkwMDAwMDA0ODExOTA0NjIyNjQ2MDYyNzMyXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMzcuMjUzNSIgeTE9IjMwOC44OTY2IiB4Mj0iMTEzNy45MDE0IiB5Mj0iMjU1Ljk0NTEiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCA2NTApIj4KCQkJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNFMDRGOEEiLz4KCQkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNFQzlBMkMiLz4KCQkJPC9saW5lYXJHcmFkaWVudD4KCQkJPHBhdGggc3R5bGU9ImZpbGw6dXJsKCNTVkdJRF8wMDAwMDA4OTU1MjgzNTM4NzY0MDYwOTg5MDAwMDAwNDgxMTkwNDYyMjY0NjA2MjczMl8pOyIgZD0iTTc0Ny45LDM3My42MQoJCQkJYy0xLjc3LTIuODUtNC4yMS00LjI3LTcuMjgtNC4yN2MtMy41NSwwLTYuNzQsMS42Ni05LjU5LDQuOTZjLTQuMSw0LjkxLTcuODcsOS4yNy0xMS4zMiwxMy4xM2MtNS43Nyw2LjQ1LTEwLjcsMTEuNDctMTQuNzgsMTUuMQoJCQkJYy02LjUxLDUuODEtMTIuMTMsOC43LTE2Ljg3LDguN2MtNi44NywwLTEwLjMtNC43Mi0xMC4zLTE0LjE5YzAtNi42MiwyLjI2LTIwLjI1LDYuNzYtNDAuODRjNS4yMS0yNC4xNiw3LjgxLTQwLjg0LDcuODEtNTAuMDkKCQkJCWMwLTE1LjM4LTcuNy0yMy4wOC0yMy4wOC0yMy4wOGMtNy44MSwwLTE2LjQsMi43NC0yNS43NCw4LjE3Yy05LjM2LDUuNDUtMTguODksMTQuNTctMjguNTksMjcuMzUKCQkJCWMtOS43MiwxMi43OC0xOC40OCwyOS4zNi0yNi4yOSw0OS43MWMwLjk0LTEwLjQsMi4xMy0xOS4xNywzLjU1LTI2LjI3YzEuNDMtNy4xLDMuMzItMTUuMzgsNS43LTI0Ljg1CgkJCQljMy41NS0xMy4yNyw1LjMyLTIxLjc4LDUuMzItMjUuNTdjMC0zLjMyLTAuOTYtNS41Ny0yLjg1LTYuNzZjLTEuODktMS4xNy01LjIxLTEuNzctOS45NS0xLjc3Yy04Ljc2LDAtMTUuNTcsMS42LTIwLjQyLDQuNzkKCQkJCWMtNC44NSwzLjIxLTguMzQsOC4yMy0xMC40NywxNS4xYy04LjM0LDI2LjM4LTEyLjcsNTQuMTYtMTMuMSw4My4zNGMtMC4wMiwxLjQ1LTAuMDQsMi45MS0wLjA0LDQuMzhjMCwxNiwxLjA4LDI4LjY3LDMuMjYsMzcuOTcKCQkJCWMwLjY0LDIuNzksMS40LDUuMywyLjI1LDcuNDljMy42Niw5LjQ3LDkuOTgsMTQuMTksMTguOTgsMTQuMTljNy4zNCwwLDEyLjc0LTEuOTQsMTYuMTctNS44NWMzLjQyLTMuOTEsNi40NC0xMS40Miw5LjA0LTIyLjU1CgkJCQljMy41Ny0xNC40NCw4LjIzLTI4LjE4LDE0LjA0LTQxLjJjNS43OS0xMy4wMiwxMS40Ny0yMy41LDE3LjA0LTMxLjQyYzUuNTctNy45Myw5Ljg5LTExLjkxLDEyLjk2LTExLjkxCgkJCQljMi42LDAsMy45MSwxLjkxLDMuOTEsNS42OGMwLDUuNy0xLjU1LDE1Ljk4LTQuNjIsMzAuOTFjLTMuMzIsMTcuMDQtNC45NiwyOC44Ny00Ljk2LDM1LjVjMCwxMy4yNywzLjA4LDIzLjM4LDkuMjMsMzAuMzYKCQkJCWM2LjE1LDYuOTgsMTUuMjcsMTAuNDcsMjcuMzUsMTAuNDdjMTQuOTEsMCwyOC4yMy00LjAyLDM5Ljk1LTEyLjA2YzUuMTctMy41NywxMC4xOS03LjU1LDE1LjA4LTExLjk2CgkJCQljNi4xNS01LjYyLDEyLjA4LTExLjkzLDE3Ljc4LTE4Ljk1YzQuNDktNS4xOSw2Ljc0LTEyLjUzLDYuNzQtMjJDNzUwLjU2LDM4MC4zNCw3NDkuNjcsMzc2LjQ0LDc0Ny45LDM3My42MXoiLz4KCQkJCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzAwMDAwMDM2OTY2Mjg4NDUyMDI4MTAzOTgwMDAwMDA2MTQ5NTUyMTE1MTU0NzIxOTQ4XyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMzkuNzQyOCIgeTE9IjM1NS45MzgyIiB4Mj0iMTE0MC4zOTA3IiB5Mj0iMzAyLjk4NjciIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCA2NTApIj4KCQkJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNFMDRGOEEiLz4KCQkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNFQzlBMkMiLz4KCQkJPC9saW5lYXJHcmFkaWVudD4KCQkJPHBhdGggc3R5bGU9ImZpbGw6dXJsKCNTVkdJRF8wMDAwMDAzNjk2NjI4ODQ1MjAyODEwMzk4MDAwMDAwNjE0OTU1MjExNTE1NDcyMTk0OF8pOyIgZD0iTTgzMy40OCwzNzMuNjEKCQkJCWMtMS43Ny0yLjg1LTQuMjEtNC4yNy03LjI4LTQuMjdjLTMuNTUsMC02Ljc2LDEuNjYtOS41OSw0Ljk2Yy0yLjEzLDIuNTctNC4xNyw0Ljk4LTYuMTMsNy4yN2MtNy44NSw5LjEzLTE0LjMyLDE2LjA4LTE5LjQ0LDIwLjgKCQkJCWMtNi40LDUuOTMtMTEuNzIsOC44Ny0xNS45OCw4Ljg3Yy00LjQ5LDAtNy43LTEuODktOS41OS01LjY4Yy0xLjg5LTMuNzctMi44My05LjIzLTIuODMtMTYuMzJjMC05LjI1LDIuODMtMjYuODcsOC41MS01Mi45MgoJCQkJYzQuNDktMjEuNTMsNi43Ni0zNS4yNyw2Ljc2LTQxLjJjMC04LjA0LTYuMDQtMTIuMDgtMTguMTItMTIuMDhjLTcuODEsMC0xMy40OSwxLjQzLTE3LjA0LDQuMjdjLTMuNTUsMi44NS02LjQsOC4wNi04LjUzLDE1LjYzCgkJCQljLTQuMjcsMTQuNDQtNy43NiwzMC4wMS0xMC40Nyw0Ni43MWMtMi40NSwxNS4wNi0zLjc5LDI3LjY1LTQuMDQsMzcuOGMtMC4wMiwxLjA5LTAuMDQsMi4xNy0wLjA0LDMuMjEKCQkJCWMwLDE0LjA0LDIuMTMsMjUuOTEsNi4zOCwzNS42M2MxLjE5LDIuNzQsMi41Nyw1LjMsNC4xLDcuN2M2Ljk4LDEwLjg5LDE4LjE1LDE2LjMyLDMzLjU1LDE2LjMyYzE3Ljg3LDAsMzYuOTEtMTEuMDIsNTcuMTYtMzMuMQoJCQkJYzIuODEtMy4wOCw1LjY2LTYuMzYsOC41My05Ljg3YzQuNTEtNS4xOSw2Ljc2LTEyLjUzLDYuNzYtMjJDODM2LjE0LDM4MC4zNCw4MzUuMjYsMzc2LjQ0LDgzMy40OCwzNzMuNjF6IE03OTIuMTIsMjEwLjYxCgkJCQljLTUuNDUtNC4yNy0xMi41Ny02LjQtMjEuMzItNi40Yy05LjcsMC0xNy44MiwyLjc3LTI0LjMzLDguMzRjLTYuNTEsNS41Ny05Ljc2LDEyLjQ5LTkuNzYsMjAuNzhjMCw4LjI4LDIuNDksMTQuNzQsNy40NSwxOS4zNAoJCQkJYzQuOTgsNC42MiwxMi40NCw2LjkzLDIyLjM4LDYuOTNjMTAuMTcsMCwxOC4zNC0yLjc3LDI0LjUtOC4zNGM2LjE1LTUuNTUsOS4yMy0xMy4wOCw5LjIzLTIyLjU1CgkJCQlDODAwLjI3LDIyMC45LDc5Ny41NSwyMTQuODYsNzkyLjEyLDIxMC42MXoiLz4KCQkJCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzAwMDAwMTY5NTQ0MDU3OTMxOTgyMTQwNjIwMDAwMDAzNjMwOTA4MjUzMDQ2NjA0NDcxXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxNDIuNDM4MiIgeTE9IjQwNi44NzQ3IiB4Mj0iMTE0My4wODYxIiB5Mj0iMzUzLjkyMzIiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCA2NTApIj4KCQkJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNFMDRGOEEiLz4KCQkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNFQzlBMkMiLz4KCQkJPC9saW5lYXJHcmFkaWVudD4KCQkJPHBhdGggc3R5bGU9ImZpbGw6dXJsKCNTVkdJRF8wMDAwMDE2OTU0NDA1NzkzMTk4MjE0MDYyMDAwMDAwMzYzMDkwODI1MzA0NjYwNDQ3MV8pOyIgZD0iTTk0Ny40NywzNzMuNjEKCQkJCWMtMS43Ny0yLjg1LTQuMjEtNC4yNy03LjI4LTQuMjdjLTMuNTUsMC02Ljc0LDEuNjYtOS41OSw0Ljk2Yy0yLjExLDIuNTMtNC4xNyw0LjkxLTYuMTUsNy4xMwoJCQkJYy04LjYyLDkuNzktMTUuOTMsMTYuOTUtMjEuODksMjEuNDZjLTcuMzQsNS41Ny0xNS44Nyw4LjM0LTI1LjU3LDguMzRjLTYuMTcsMC0xMS4xMy0yLjA2LTE0LjkzLTYuMjEKCQkJCWMtMy43OS00LjEzLTYuNTEtMTEuMDYtOC4xNy0yMC43OGMyNi43Ni0zNi40NCw0Ny45NS03My4yNiw2My41OC0xMTAuNDRjMTUuNjMtMzcuMTYsMjMuNDQtNjkuODQsMjMuNDQtOTguMDIKCQkJCWMwLTE5LjY1LTMuMjYtMzQuNzQtOS43OC00NS4yN2MtNi41MS0xMC41My0xNS40NC0xNS44LTI2LjgtMTUuOGMtMjAuMTQsMC0zNy40OCwxMy4yNS01Mi4wMywzOS43NgoJCQkJYy0xNC41NywyNi41MS0yNS41Nyw1OC4yNC0zMy4wMyw5NS4xN2MtNy40NSwzNi45My0xMS4xOSw2OS44NC0xMS4xOSw5OC43NGMwLDExLjk1LDAuNzksMjMsMi40LDMzLjE4CgkJCQljMi4wNiwxMy40LDUuNTMsMjUuMjcsMTAuMzgsMzUuNjNjMC43NCwxLjYsMS41MSwzLjE3LDIuMzIsNC43YzEwLjA2LDE4Ljk1LDI1LjUsMjguNCw0Ni4zNSwyOC40CgkJCQljMTUuMTQsMCwyOC42OS00LjAyLDQwLjY1LTEyLjA2YzguNjgtNS44NSwxNi44OS0xMi44NywyNC42NS0yMS4xYzIuOTEtMy4wOSw1Ljc3LTYuMzgsOC41Ny05LjgxYzQuNDktNS4xOSw2Ljc0LTEyLjUzLDYuNzQtMjIKCQkJCUM5NTAuMTMsMzgwLjM0LDk0OS4yNCwzNzYuNDQsOTQ3LjQ3LDM3My42MXogTTg1OS45MiwyNTIuNTFjNS4yMS0yOS4xMiwxMS4yNS01My41LDE4LjEyLTczLjE1CgkJCQljNi44Ny0xOS42NiwxMy4wMi0yOS40OCwxOC40OC0yOS40OGM2LjYyLDAsOS45NSw5LDkuOTUsMjYuOTljMCwyMi45Ny00Ljk4LDQ4LjM1LTE0LjkzLDc2LjE3cy0yMy4zMyw1NS41OC00MC4xMiw4My4yOAoJCQkJQzg1MS44OCwzMDkuNTUsODU0LjcxLDI4MS42Miw4NTkuOTIsMjUyLjUxeiIvPgoJCQkKCQkJCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMDAwMDAwOTYwMzk0OTc1NDgzNzkyMzk0NjAwMDAwMTc2ODAwODc0NTg3MzgyMjU1NjVfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE0Mi43NTY1IiB5MT0iNDEyLjg4ODMiIHgyPSIxMTQzLjQwNDMiIHkyPSIzNTkuOTM2OCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDY1MCkiPgoJCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0UwNEY4QSIvPgoJCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0VDOUEyQyIvPgoJCQk8L2xpbmVhckdyYWRpZW50PgoJCQk8cGF0aCBzdHlsZT0iZmlsbDp1cmwoI1NWR0lEXzAwMDAwMDk2MDM5NDk3NTQ4Mzc5MjM5NDYwMDAwMDE3NjgwMDg3NDU4NzM4MjI1NTY1Xyk7IiBkPSJNMTA2MS40NSwzNzMuNjEKCQkJCWMtMS43Ny0yLjg1LTQuMjEtNC4yNy03LjI3LTQuMjdjLTMuNTcsMC02Ljc2LDEuNjYtOS42MSw0Ljk2Yy03LjE3LDguNTMtMTMuNTUsMTUuNDctMTkuMTIsMjAuODMKCQkJCWMtMy4yNSwzLjEzLTYuMjMsNS43Mi04LjkzLDcuNzZjLTcuMzQsNS41Ny0xNS44Nyw4LjM0LTI1LjU3LDguMzRjLTYuMTUsMC0xMS4xMy0yLjA2LTE0LjkxLTYuMjEKCQkJCWMtMy43OS00LjEzLTYuNTMtMTEuMDYtOC4xNy0yMC43OGMyNi43NC0zNi40NCw0Ny45My03My4yNiw2My41Ni0xMTAuNDRjMTUuNjMtMzcuMTYsMjMuNDQtNjkuODQsMjMuNDQtOTguMDIKCQkJCWMwLTE5LjY1LTMuMjUtMzQuNzQtOS43Ni00NS4yN2MtNi41My0xMC41My0xNS40Ni0xNS44LTI2LjgyLTE1LjhjLTIwLjEyLDAtMzcuNDYsMTMuMjUtNTIuMDMsMzkuNzYKCQkJCWMtMTQuNTUsMjYuNTEtMjUuNTcsNTguMjQtMzMuMDMsOTUuMTdjLTcuNDUsMzYuOTMtMTEuMTksNjkuODQtMTEuMTksOTguNzRjMCwxMS44OSwwLjc5LDIyLjkxLDIuMzgsMzMuMDQKCQkJCWMyLjA2LDEzLjQyLDUuNTMsMjUuMzMsMTAuMzgsMzUuNzFjMC43NCwxLjYyLDEuNTMsMy4yMSwyLjM0LDQuNzZjMTAuMDYsMTguOTUsMjUuNTEsMjguNCw0Ni4zNSwyOC40CgkJCQljMTUuMTUsMCwyOC43LTQuMDIsNDAuNjUtMTIuMDZjMy43OS0yLjU3LDcuNTEtNS4zNCwxMS4xMi04LjM2YzcuNzgtNi40NSwxNS4xNC0xMy45NywyMi4xLTIyLjU1YzQuNDktNS4xOSw2Ljc0LTEyLjUzLDYuNzQtMjIKCQkJCUMxMDY0LjExLDM4MC4zNCwxMDYzLjIzLDM3Ni40NCwxMDYxLjQ1LDM3My42MXogTTk3My45MywyNTIuNTFjNS4xOS0yOS4xMiwxMS4yMy01My41LDE4LjEtNzMuMTUKCQkJCWM2Ljg3LTE5LjY2LDEzLjAyLTI5LjQ4LDE4LjQ4LTI5LjQ4YzYuNjIsMCw5Ljk1LDksOS45NSwyNi45OWMwLDIyLjk3LTQuOTgsNDguMzUtMTQuOTEsNzYuMTcKCQkJCWMtOS45NSwyNy44Mi0yMy4zMyw1NS41OC00MC4xNCw4My4yOEM5NjUuODcsMzA5LjU1LDk2OC43MiwyODEuNjIsOTczLjkzLDI1Mi41MXoiLz4KCQkJCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzAwMDAwMDQ0ODY0NDU5ODE4NDk5ODM0NDgwMDAwMDE0NzUwODc5MzcyMTAyNDYzMzk3XyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMzguNTg5NCIgeTE9IjMzNC4xNDA1IiB4Mj0iMTEzOS4yMzcyIiB5Mj0iMjgxLjE4OSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDY1MCkiPgoJCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0UwNEY4QSIvPgoJCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0VDOUEyQyIvPgoJCQk8L2xpbmVhckdyYWRpZW50PgoJCQk8cGF0aCBzdHlsZT0iZmlsbDp1cmwoI1NWR0lEXzAwMDAwMDQ0ODY0NDU5ODE4NDk5ODM0NDgwMDAwMDE0NzUwODc5MzcyMTAyNDYzMzk3Xyk7IiBkPSJNMTIwMi41MiwzODIuNzQKCQkJCWMtNC40Myw1Ljc2LTEwLjMsMTIuNTctMTcuMjMsMTguN2MwLDAtMTEuMTIsOS44NS0yMS4zOCw5Ljc5Yy0yLjMsMC00LjA5LTAuOTEtNC4wOS0wLjkxYy0xLjA2LTAuNTMtMi0xLjI4LTIuODMtMi4yOAoJCQkJYy0xLjc3LTIuMTMtMi42Ni00Ljk2LTIuNjYtOC41M2MwLTEwLjY0LDIuNzItMjkuNTksOC4xNy01Ni44YzQuMDYtMjAuMjcsNy40NC0zMC4xMSw1LjMyLTM1LjUyCgkJCQljLTcuMjYtMTguNTctMzcuNDUtMjcuMDctNjAuNy0yMy43N2MtMTUuNTgsMi4yMS0yNi40Myw5LjMtMzMuNTgsMTQuMzZjLTE0LjU3LDEwLjMtMjYuMjMsMjMuOTEtMzQuOTksNDAuODQKCQkJCXMtMTMuMTMsMzQuODgtMTMuMTMsNTMuOGMwLDAuOTEsMC4wMiwxLjgxLDAuMDYsMi43MmMwLjM2LDEzLjc4LDMuNjIsMjUuMzYsOS44MSwzNC43NGMxLDEuNTUsMi4wOSwzLjAyLDMuMjYsNC40NQoJCQkJYzguNzYsMTAuNjQsMjAuNDgsMTUuOTcsMzUuMTYsMTUuOTdjMTguNywwLDM0LjIxLTkuOTUsNDYuNTItMjkuODJjMy4zMiw5LjIzLDguMjMsMTYuNTEsMTQuNzQsMjEuODMKCQkJCWM2LjUxLDUuMzIsMTMuNjgsNy45OCwyMS40OSw3Ljk4YzEwLjE3LDAsMjAuNy00LjEzLDMxLjYxLTEyLjQyYzguNC02LjM4LDE2LjQyLTEzLjg5LDI0LjEtMjIuNTMKCQkJCUMxMjA1LjYyLDQwMy4xNiwxMjAzLjI4LDM5MS4yMywxMjAyLjUyLDM4Mi43NHogTTExMTEuNzEsMzgwLjdjLTIuMTMsMTAuMTktNS41NywxOC4zNC0xMC4zLDI0LjUxCgkJCQljLTQuNzQsNi4xNS05LjcsOS4yMy0xNC45MSw5LjIzYy01LjIxLDAtOS4zLTEuNzctMTIuMjUtNS4zMmMtMi45Ni0zLjU3LTQuNDUtOS00LjQ1LTE2LjM0YzAtMTMuMjcsMi40OS0yNS44LDcuNDUtMzcuNjUKCQkJCWM0Ljk4LTExLjgzLDExLjY2LTIxLjM2LDIwLjA4LTI4LjU5YzguNC03LjIxLDE3LjU3LTEwLjk1LDI3LjUxLTExLjE3TDExMTEuNzEsMzgwLjd6Ii8+CgkJCQoJCQkJPGxpbmVhckdyYWRpZW50IGlkPSJTVkdJRF8wMDAwMDAxMzg4NDE0OTU1MTMwMDcxMDUxMDAwMDAwOTQ1NjEzMzk1NjE1Mjg5NDYxMl8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTMyLjA3ODgiIHkxPSIyOTkuOTE3OCIgeDI9IjExMzIuNzI2NyIgeTI9IjI0Ni45NjY0IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDAgNjUwKSI+CgkJCQk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojRTA0RjhBIi8+CgkJCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRUM5QTJDIi8+CgkJCTwvbGluZWFyR3JhZGllbnQ+CgkJCTxwYXRoIHN0eWxlPSJmaWxsOnVybCgjU1ZHSURfMDAwMDAwMTM4ODQxNDk1NTEzMDA3MTA1MTAwMDAwMDk0NTYxMzM5NTYxNTI4OTQ2MTJfKTsiIGQ9Ik01NDkuMjksMzgyLjc0CgkJCQljLTQuNDMsNS43Ni0xMC4zLDEyLjU3LTE3LjIzLDE4LjdjMCwwLTExLjEyLDkuODUtMjEuMzgsOS43OWMtMi4zLDAtNC4wOS0wLjkxLTQuMDktMC45MWMtMS4wNi0wLjUzLTItMS4yOC0yLjgzLTIuMjgKCQkJCWMtMS43Ny0yLjEzLTIuNjYtNC45Ni0yLjY2LTguNTNjMC0xMC42NCwyLjcyLTI5LjU5LDguMTctNTYuOGM0LjA2LTIwLjI3LDcuNDQtMzAuMTEsNS4zMi0zNS41MgoJCQkJYy03LjI2LTE4LjU3LTM3LjQ1LTI3LjA3LTYwLjctMjMuNzdjLTE1LjU4LDIuMjEtMjYuNDMsOS4zLTMzLjU4LDE0LjM2Yy0xNC41NywxMC4zLTI2LjIzLDIzLjkxLTM0Ljk5LDQwLjg0CgkJCQljLTguNzYsMTYuOTMtMTMuMTMsMzQuODgtMTMuMTMsNTMuOGMwLDAuOTEsMC4wMiwxLjgxLDAuMDYsMi43MmMwLjM2LDEzLjc4LDMuNjIsMjUuMzYsOS44MSwzNC43NGMxLDEuNTUsMi4wOSwzLjAyLDMuMjYsNC40NQoJCQkJYzguNzYsMTAuNjQsMjAuNDgsMTUuOTcsMzUuMTYsMTUuOTdjMTguNywwLDM0LjIxLTkuOTUsNDYuNTItMjkuODJjMy4zMiw5LjIzLDguMjMsMTYuNTEsMTQuNzQsMjEuODMKCQkJCWM2LjUxLDUuMzIsMTMuNjgsNy45OCwyMS40OSw3Ljk4YzEwLjE3LDAsMjAuNy00LjEzLDMxLjYxLTEyLjQyYzguNC02LjM4LDE2LjQyLTEzLjg5LDI0LjEtMjIuNTMKCQkJCUM1NTIuMzksNDAzLjE2LDU1MC4wNSwzOTEuMjMsNTQ5LjI5LDM4Mi43NHogTTQ1OC40OCwzODAuN2MtMi4xMywxMC4xOS01LjU3LDE4LjM0LTEwLjMsMjQuNTFjLTQuNzQsNi4xNS05LjcsOS4yMy0xNC45MSw5LjIzCgkJCQlzLTkuMy0xLjc3LTEyLjI1LTUuMzJjLTIuOTYtMy41Ny00LjQ1LTktNC40NS0xNi4zNGMwLTEzLjI3LDIuNDktMjUuOCw3LjQ1LTM3LjY1YzQuOTgtMTEuODMsMTEuNjYtMjEuMzYsMjAuMDgtMjguNTkKCQkJCWM4LjQtNy4yMSwxNy41Ny0xMC45NSwyNy41MS0xMS4xN0w0NTguNDgsMzgwLjd6Ii8+CgkJPC9nPgoJPC9nPgoJPGc+CgkJPHBhdGggY2xhc3M9InN0NyIgZD0iTTEyODguNTksMjMwLjcyYzMuNjQtMi45MSw3LjktNS4xLDEyLjc2LTYuNTZjNC44Ni0xLjQ2LDkuOTktMi4xOSwxNS4zMi0yLjE5YzguNTMsMCwxNS44OCwxLjE1LDIyLjA5LDMuNDUKCQkJYzYuMiwyLjMzLDExLjg0LDUuNDMsMTYuOTcsOS4zYzUuMSwzLjksOS43Nyw4LjQ2LDE0LjAzLDEzLjY4YzQuMjUsNS4yNCw4LjY5LDEwLjksMTMuMzIsMTYuOTdsMzcuMjItMzIuODMKCQkJYy03LjMxLTguNTEtMTQuNTktMTYuMDUtMjEuOS0yMi42M2MtNy4yOC02LjU2LTE1LjA5LTEyLjE1LTIzLjMzLTE2Ljc4Yy04LjI3LTQuNjEtMTcuMTEtOC4xMy0yNi40Ni0xMC41NwoJCQljLTkuMzgtMi40Mi0xOS44OC0zLjY0LTMxLjU2LTMuNjRjLTExLjkxLDAtMjMuNTksMS42OS0zNS4wNCw1LjFjLTExLjQyLDMuNDEtMjEuNjQsOC4zOS0zMC42NCwxNC45NwoJCQljLTksNi41Ni0xNi4yNCwxNC44My0yMS43MSwyNC43OWMtNS40NSw5Ljk5LTguMiwyMS41Mi04LjIsMzQuNjZjMCwxMy42MywzLjQxLDI1LjA1LDEwLjIyLDM0LjMxCgkJCWM2LjgxLDkuMjMsMTUuMzcsMTcuMDgsMjUuNzEsMjMuNTJjMTAuMzQsNi40NiwyMS41NSwxMS45MSwzMy41OCwxNi40MmMxMi4wMyw0LjQ5LDIzLjIyLDguOTMsMzMuNTUsMTMuMzIKCQkJYzEwLjM0LDQuMzcsMTguOTIsOS4wNSwyNS43MywxNC4wM2M2Ljc5LDUsMTAuMjIsMTEuMjYsMTAuMjIsMTguOGMwLDUuNTktMS40MSwxMC4zOS00LjIxLDE0LjRjLTIuOCw0LjAyLTYuMjcsNy4zNS0xMC4zOSwxMC4wMwoJCQljLTQuMTYsMi42OC04Ljc2LDQuNy0xMy44Niw2LjAyYy01LjEyLDEuMzQtMTAuMSwyLjAyLTE0Ljk3LDIuMDJjLTksMC0xNy4wOC0xLjI5LTI0LjI3LTMuODNjLTEuMzYtMC40OS0xMC41NS0zLjY5LTE5LjUtMTAuMjIKCQkJYy0xOS42OS0xNC4zOC0yNi45Ny0zNi42My0yOS4xMS00NC4xM2MtMTAuOTcsOS40LTIxLjkyLDE4LjgtMzIuOSwyOC4yYzEuMzYsOS44NSw1LjQsMjYuNjcsMTguNTksNDAuNzQKCQkJYzguMjcsOC44MSwxNy41MywxMy42LDI0LjYzLDE3LjUxYzguNjUsNC43NSwxNy45Myw4LjI3LDI3LjkyLDEwLjU3YzkuOTYsMi4zLDIxLjE1LDMuNDgsMzMuNTUsMy40OAoJCQljMTAuNzEsMCwyMS45LTEuNzIsMzMuNTgtNS4xMmMxMS42OC0zLjM4LDIyLjM3LTguMzksMzIuMS0xNC45NGM5LjczLTYuNTgsMTcuNzYtMTQuNjYsMjQuMDgtMjQuMjcKCQkJYzYuMzItOS41OSw5LjQ3LTIwLjYxLDkuNDctMzMuMDFjMC0xMy42MS0zLjQxLTI1LjA1LTEwLjItMzQuMjhjLTYuODEtOS4yNi0xNS4zOS0xNy4wNC0yNS43My0yMy4zNgoJCQljLTEwLjM0LTYuMzItMjEuNDgtMTEuNjgtMzMuMzctMTYuMDVjLTExLjk0LTQuMzctMjMuMDUtOC42OS0zMy4zOS0xMi45NWMtMTAuMzQtNC4yNS0xOC45Mi04Ljk1LTI1LjczLTE0LjA1CgkJCWMtNi44MS01LjEtMTAuMi0xMS40Mi0xMC4yLTE4Ljk2YzAtNS41OSwxLjA4LTEwLjYsMy4yNy0xNC45N0MxMjgyLjAxLDIzNy4zLDEyODQuOTUsMjMzLjY1LDEyODguNTksMjMwLjcyeiIvPgoJCTxwYXRoIGNsYXNzPSJzdDciIGQ9Ik0xNzg3LjY1LDI1NC44bC01My4yNywxMTkuM2wtNTMuNjItMTE5LjNoLTM1LjM5aC0yMC44aC00NS4yM2wtNzguMDYsNjIuMzljMCwwLTAuODItMTQ2LjU1LTEuMTUtMTU0LjE3CgkJCWMtOC43Miw3LjYxLTE3LjQxLDE1LjIzLTI2LjEzLDIyLjg0Yy04LjY3LDcuNTktMTcuMzIsMTUuMTYtMjUuOTksMjIuNzJ2MzAuNTJ2MjA3Ljk1aDUzLjI3VjM3NC4xbDEyLjM4LTEwLjIybDYzLjQ5LDgzLjE4aDYxLjI4CgkJCWwtODUuNzItMTE1LjI4bDc3LjQ3LTY0LjM2bDc1LjczLDE3MC41MmwtNDEuNTksOTQuODZoNTUuNDVsMTIzLjMxLTI3OEwxNzg3LjY1LDI1NC44TDE3ODcuNjUsMjU0Ljh6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==" alt="VanillaSky"></div><div class="group"><button class="pill" type="button" data-go="history-demo"><svg data-icon="history"></svg><span class="nav-label">Sessions</span></button></div><div class="group"><button class="round" type="button" id="voice-demo" aria-label="Turn voice off" aria-pressed="true"><svg data-icon="sound"></svg></button><button class="round" type="button" data-go="settings-demo" aria-label="Settings"><svg data-icon="settings"></svg></button></div></header></div>
|
|
90
|
+
<div class="doc-preview"><header class="chrome"><div class="session-brand"><img class="brand-logo" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjE1NSAxMTMgMTY5MCA0MjIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMTU1IDExMyAxNjkwIDQyMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOnVybCgjU1ZHSURfMV8pO30KCS5zdDF7ZmlsbDp1cmwoI1NWR0lEXzAwMDAwMDEzMTc5MjQ3NzkzMzEzNjczNjYwMDAwMDA5NTAyNDY0NTI0MDQ3MTc5Njg2Xyk7fQoJLnN0MntmaWxsOnVybCgjU1ZHSURfMDAwMDAxMTQwNzU2MTAxNzA2MjA3NDYzMDAwMDAwMTMwNzY4NTczMjc1MDMwNTk4NTJfKTt9Cgkuc3Qze2ZpbGw6dXJsKCNTVkdJRF8wMDAwMDAzOTg0Mzk1Mzc4NTIyOTI0Mjg4MDAwMDAwODQwMzMzMzkyMDEyMjcwNTMyOF8pO30KCS5zdDR7ZmlsbDp1cmwoI1NWR0lEXzAwMDAwMDI3NTkyNTEzNTc2NDg3NDgzMzAwMDAwMDE2NzQwODQ2NzM4OTM4NjE5NzkyXyk7fQoJLnN0NXtmaWxsOnVybCgjU1ZHSURfMDAwMDAwNzM2ODI1Njc2NTkxMzUzNzk0NjAwMDAwMDQyOTE4NTk2MTM4MzIzNjcyNDZfKTt9Cgkuc3Q2e2ZpbGw6dXJsKCNTVkdJRF8wMDAwMDA0MzQyOTI4Mzg1Nzk2OTQ0NDE5MDAwMDAwNzg0MjM5Nzg0MTEwMTYxNjAxN18pO30KCS5zdDd7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPGc+Cgk8Zz4KCQk8Zz4KCQkJCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE0NC43Mzg4IiB5MT0iMzYxLjU0MjIiIHgyPSIxMTQ1LjM4NjYiIHkyPSIzMDguNTkwNyIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDY1MCkiPgoJCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0UwNEY4QSIvPgoJCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0VDOUEyQyIvPgoJCQk8L2xpbmVhckdyYWRpZW50PgoJCQk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDMxLjkzLDI5OC42N2MtMC42Mi0wLjYtMS4zNi0xLjExLTIuMTktMS41N2MtMi40Mi0xLjMyLTUuNjQtMS45OC05LjctMS45OAoJCQkJYy0xNi4xMiwwLTMwLjQ0LTEuMDYtNDIuOTctMy4xOWMxMS44My0zMi4yLDE3Ljc2LTYxLjkyLDE3Ljc2LTg5LjE1YzAtMTguOTMtNC40NS0zMy44NC0xMy4zMi00NC43NAoJCQkJYy04Ljg5LTEwLjg3LTIwLjg5LTE2LjMyLTM2LjA1LTE2LjMyYy0xMi4zMiwwLTIzLjUsMy4xOS0zMy41NSw5LjU5Yy0xMC4wOCw2LjQtMTgsMTYuMDQtMjMuOCwyOC45NQoJCQkJYy01LjgxLDEyLjg5LTguNywyOC43LTguNyw0Ny40MWMwLDE4LjcsMy42NiwzNS4yMSwxMSw0OS41NGM3LjM0LDE0LjMyLDE4LjIzLDI1Ljk5LDMyLjY3LDM0Ljk3CgkJCQljLTEyLjA2LDI1LjgyLTI1LjMzLDQ3LjI0LTM5Ljc2LDY0LjI4Yy0xNC40NiwxNy4wNi0yNy44MiwyNS41Ny00MC4xNCwyNS41N2MtMTIuMDYsMC0yMS4xMi05LjQtMjcuMTYtMjguMjMKCQkJCWMtNi4wNC0xOC44Mi05LjA2LTQ2LjMzLTkuMDYtODIuNTZjMC0zNC41NSwzLjU1LTczLjE1LDEwLjY2LTExNS43NmMwLjQ3LTMuNzksMC43LTYuNCwwLjctNy44MWMwLTEzLjUxLTcuODEtMjAuMjUtMjMuNDQtMjAuMjUKCQkJCWMtOS40NywwLTE2LjE1LDIuMTktMjAuMDYsNi41N3MtNi45MywxMi43NC05LjA2LDI1LjA0Yy01LjkzLDMzLjE0LTguODcsNzAuNTQtOC44NywxMTIuMjFjMCw0OC43OCw2LjA0LDg3LjQ5LDE4LjEsMTE2LjEyCgkJCQljMTIuMDgsMjguNjcsMzAuNDIsNDIuOTcsNTUuMDUsNDIuOTdjMjMuOTEsMCw0Ny43Ni0xMS42NCw3MS41Ni0zNC45N2MyMy44LTIzLjMzLDQ0LjA4LTUyLjYxLDYwLjktODcuODkKCQkJCWMxMC42MSwyLjQsMjIuMzMsMy43OSwzNS4xNCw0LjIxYzQuOTMsMC4xNywxMC4wMiwwLjE3LDE1LjI5LDAuMDRjNy44MS0wLjIzLDEzLjU1LTIuNzIsMTcuMjMtNy40NQoJCQkJYzMuNjYtNC43NCw1LjUxLTEwLjE3LDUuNTEtMTYuMzJDNDM1LjY3LDMwNC4xMiw0MzQuNDIsMzAxLjA0LDQzMS45MywyOTguNjd6IE0zMzcuNjUsMjc2LjY2CgkJCQljLTE0LjkxLTExLjEzLTIyLjM4LTI4LjI5LTIyLjM4LTUxLjVjMC0xMy43MiwyLjAyLTI0LjMzLDYuMDQtMzEuNzhjNC4wNC03LjQ1LDkuMjUtMTEuMTksMTUuNjMtMTEuMTkKCQkJCWM0LjQ5LDAsOC4wNiwyLjMsMTAuNjYsNi45M2MyLjYsNC42MiwzLjkxLDExLjg5LDMuOTEsMjEuODNDMzUxLjUsMjI4LjI0LDM0Ni44NywyNTAuMTUsMzM3LjY1LDI3Ni42NnoiLz4KCQkJCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzAwMDAwMDg5NTUyODM1Mzg3NjQwNjA5ODkwMDAwMDA0ODExOTA0NjIyNjQ2MDYyNzMyXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMzcuMjUzNSIgeTE9IjMwOC44OTY2IiB4Mj0iMTEzNy45MDE0IiB5Mj0iMjU1Ljk0NTEiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCA2NTApIj4KCQkJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNFMDRGOEEiLz4KCQkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNFQzlBMkMiLz4KCQkJPC9saW5lYXJHcmFkaWVudD4KCQkJPHBhdGggc3R5bGU9ImZpbGw6dXJsKCNTVkdJRF8wMDAwMDA4OTU1MjgzNTM4NzY0MDYwOTg5MDAwMDAwNDgxMTkwNDYyMjY0NjA2MjczMl8pOyIgZD0iTTc0Ny45LDM3My42MQoJCQkJYy0xLjc3LTIuODUtNC4yMS00LjI3LTcuMjgtNC4yN2MtMy41NSwwLTYuNzQsMS42Ni05LjU5LDQuOTZjLTQuMSw0LjkxLTcuODcsOS4yNy0xMS4zMiwxMy4xM2MtNS43Nyw2LjQ1LTEwLjcsMTEuNDctMTQuNzgsMTUuMQoJCQkJYy02LjUxLDUuODEtMTIuMTMsOC43LTE2Ljg3LDguN2MtNi44NywwLTEwLjMtNC43Mi0xMC4zLTE0LjE5YzAtNi42MiwyLjI2LTIwLjI1LDYuNzYtNDAuODRjNS4yMS0yNC4xNiw3LjgxLTQwLjg0LDcuODEtNTAuMDkKCQkJCWMwLTE1LjM4LTcuNy0yMy4wOC0yMy4wOC0yMy4wOGMtNy44MSwwLTE2LjQsMi43NC0yNS43NCw4LjE3Yy05LjM2LDUuNDUtMTguODksMTQuNTctMjguNTksMjcuMzUKCQkJCWMtOS43MiwxMi43OC0xOC40OCwyOS4zNi0yNi4yOSw0OS43MWMwLjk0LTEwLjQsMi4xMy0xOS4xNywzLjU1LTI2LjI3YzEuNDMtNy4xLDMuMzItMTUuMzgsNS43LTI0Ljg1CgkJCQljMy41NS0xMy4yNyw1LjMyLTIxLjc4LDUuMzItMjUuNTdjMC0zLjMyLTAuOTYtNS41Ny0yLjg1LTYuNzZjLTEuODktMS4xNy01LjIxLTEuNzctOS45NS0xLjc3Yy04Ljc2LDAtMTUuNTcsMS42LTIwLjQyLDQuNzkKCQkJCWMtNC44NSwzLjIxLTguMzQsOC4yMy0xMC40NywxNS4xYy04LjM0LDI2LjM4LTEyLjcsNTQuMTYtMTMuMSw4My4zNGMtMC4wMiwxLjQ1LTAuMDQsMi45MS0wLjA0LDQuMzhjMCwxNiwxLjA4LDI4LjY3LDMuMjYsMzcuOTcKCQkJCWMwLjY0LDIuNzksMS40LDUuMywyLjI1LDcuNDljMy42Niw5LjQ3LDkuOTgsMTQuMTksMTguOTgsMTQuMTljNy4zNCwwLDEyLjc0LTEuOTQsMTYuMTctNS44NWMzLjQyLTMuOTEsNi40NC0xMS40Miw5LjA0LTIyLjU1CgkJCQljMy41Ny0xNC40NCw4LjIzLTI4LjE4LDE0LjA0LTQxLjJjNS43OS0xMy4wMiwxMS40Ny0yMy41LDE3LjA0LTMxLjQyYzUuNTctNy45Myw5Ljg5LTExLjkxLDEyLjk2LTExLjkxCgkJCQljMi42LDAsMy45MSwxLjkxLDMuOTEsNS42OGMwLDUuNy0xLjU1LDE1Ljk4LTQuNjIsMzAuOTFjLTMuMzIsMTcuMDQtNC45NiwyOC44Ny00Ljk2LDM1LjVjMCwxMy4yNywzLjA4LDIzLjM4LDkuMjMsMzAuMzYKCQkJCWM2LjE1LDYuOTgsMTUuMjcsMTAuNDcsMjcuMzUsMTAuNDdjMTQuOTEsMCwyOC4yMy00LjAyLDM5Ljk1LTEyLjA2YzUuMTctMy41NywxMC4xOS03LjU1LDE1LjA4LTExLjk2CgkJCQljNi4xNS01LjYyLDEyLjA4LTExLjkzLDE3Ljc4LTE4Ljk1YzQuNDktNS4xOSw2Ljc0LTEyLjUzLDYuNzQtMjJDNzUwLjU2LDM4MC4zNCw3NDkuNjcsMzc2LjQ0LDc0Ny45LDM3My42MXoiLz4KCQkJCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzAwMDAwMDM2OTY2Mjg4NDUyMDI4MTAzOTgwMDAwMDA2MTQ5NTUyMTE1MTU0NzIxOTQ4XyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMzkuNzQyOCIgeTE9IjM1NS45MzgyIiB4Mj0iMTE0MC4zOTA3IiB5Mj0iMzAyLjk4NjciIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCA2NTApIj4KCQkJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNFMDRGOEEiLz4KCQkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNFQzlBMkMiLz4KCQkJPC9saW5lYXJHcmFkaWVudD4KCQkJPHBhdGggc3R5bGU9ImZpbGw6dXJsKCNTVkdJRF8wMDAwMDAzNjk2NjI4ODQ1MjAyODEwMzk4MDAwMDAwNjE0OTU1MjExNTE1NDcyMTk0OF8pOyIgZD0iTTgzMy40OCwzNzMuNjEKCQkJCWMtMS43Ny0yLjg1LTQuMjEtNC4yNy03LjI4LTQuMjdjLTMuNTUsMC02Ljc2LDEuNjYtOS41OSw0Ljk2Yy0yLjEzLDIuNTctNC4xNyw0Ljk4LTYuMTMsNy4yN2MtNy44NSw5LjEzLTE0LjMyLDE2LjA4LTE5LjQ0LDIwLjgKCQkJCWMtNi40LDUuOTMtMTEuNzIsOC44Ny0xNS45OCw4Ljg3Yy00LjQ5LDAtNy43LTEuODktOS41OS01LjY4Yy0xLjg5LTMuNzctMi44My05LjIzLTIuODMtMTYuMzJjMC05LjI1LDIuODMtMjYuODcsOC41MS01Mi45MgoJCQkJYzQuNDktMjEuNTMsNi43Ni0zNS4yNyw2Ljc2LTQxLjJjMC04LjA0LTYuMDQtMTIuMDgtMTguMTItMTIuMDhjLTcuODEsMC0xMy40OSwxLjQzLTE3LjA0LDQuMjdjLTMuNTUsMi44NS02LjQsOC4wNi04LjUzLDE1LjYzCgkJCQljLTQuMjcsMTQuNDQtNy43NiwzMC4wMS0xMC40Nyw0Ni43MWMtMi40NSwxNS4wNi0zLjc5LDI3LjY1LTQuMDQsMzcuOGMtMC4wMiwxLjA5LTAuMDQsMi4xNy0wLjA0LDMuMjEKCQkJCWMwLDE0LjA0LDIuMTMsMjUuOTEsNi4zOCwzNS42M2MxLjE5LDIuNzQsMi41Nyw1LjMsNC4xLDcuN2M2Ljk4LDEwLjg5LDE4LjE1LDE2LjMyLDMzLjU1LDE2LjMyYzE3Ljg3LDAsMzYuOTEtMTEuMDIsNTcuMTYtMzMuMQoJCQkJYzIuODEtMy4wOCw1LjY2LTYuMzYsOC41My05Ljg3YzQuNTEtNS4xOSw2Ljc2LTEyLjUzLDYuNzYtMjJDODM2LjE0LDM4MC4zNCw4MzUuMjYsMzc2LjQ0LDgzMy40OCwzNzMuNjF6IE03OTIuMTIsMjEwLjYxCgkJCQljLTUuNDUtNC4yNy0xMi41Ny02LjQtMjEuMzItNi40Yy05LjcsMC0xNy44MiwyLjc3LTI0LjMzLDguMzRjLTYuNTEsNS41Ny05Ljc2LDEyLjQ5LTkuNzYsMjAuNzhjMCw4LjI4LDIuNDksMTQuNzQsNy40NSwxOS4zNAoJCQkJYzQuOTgsNC42MiwxMi40NCw2LjkzLDIyLjM4LDYuOTNjMTAuMTcsMCwxOC4zNC0yLjc3LDI0LjUtOC4zNGM2LjE1LTUuNTUsOS4yMy0xMy4wOCw5LjIzLTIyLjU1CgkJCQlDODAwLjI3LDIyMC45LDc5Ny41NSwyMTQuODYsNzkyLjEyLDIxMC42MXoiLz4KCQkJCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzAwMDAwMTY5NTQ0MDU3OTMxOTgyMTQwNjIwMDAwMDAzNjMwOTA4MjUzMDQ2NjA0NDcxXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxNDIuNDM4MiIgeTE9IjQwNi44NzQ3IiB4Mj0iMTE0My4wODYxIiB5Mj0iMzUzLjkyMzIiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCA2NTApIj4KCQkJCTxzdG9wICBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNFMDRGOEEiLz4KCQkJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNFQzlBMkMiLz4KCQkJPC9saW5lYXJHcmFkaWVudD4KCQkJPHBhdGggc3R5bGU9ImZpbGw6dXJsKCNTVkdJRF8wMDAwMDE2OTU0NDA1NzkzMTk4MjE0MDYyMDAwMDAwMzYzMDkwODI1MzA0NjYwNDQ3MV8pOyIgZD0iTTk0Ny40NywzNzMuNjEKCQkJCWMtMS43Ny0yLjg1LTQuMjEtNC4yNy03LjI4LTQuMjdjLTMuNTUsMC02Ljc0LDEuNjYtOS41OSw0Ljk2Yy0yLjExLDIuNTMtNC4xNyw0LjkxLTYuMTUsNy4xMwoJCQkJYy04LjYyLDkuNzktMTUuOTMsMTYuOTUtMjEuODksMjEuNDZjLTcuMzQsNS41Ny0xNS44Nyw4LjM0LTI1LjU3LDguMzRjLTYuMTcsMC0xMS4xMy0yLjA2LTE0LjkzLTYuMjEKCQkJCWMtMy43OS00LjEzLTYuNTEtMTEuMDYtOC4xNy0yMC43OGMyNi43Ni0zNi40NCw0Ny45NS03My4yNiw2My41OC0xMTAuNDRjMTUuNjMtMzcuMTYsMjMuNDQtNjkuODQsMjMuNDQtOTguMDIKCQkJCWMwLTE5LjY1LTMuMjYtMzQuNzQtOS43OC00NS4yN2MtNi41MS0xMC41My0xNS40NC0xNS44LTI2LjgtMTUuOGMtMjAuMTQsMC0zNy40OCwxMy4yNS01Mi4wMywzOS43NgoJCQkJYy0xNC41NywyNi41MS0yNS41Nyw1OC4yNC0zMy4wMyw5NS4xN2MtNy40NSwzNi45My0xMS4xOSw2OS44NC0xMS4xOSw5OC43NGMwLDExLjk1LDAuNzksMjMsMi40LDMzLjE4CgkJCQljMi4wNiwxMy40LDUuNTMsMjUuMjcsMTAuMzgsMzUuNjNjMC43NCwxLjYsMS41MSwzLjE3LDIuMzIsNC43YzEwLjA2LDE4Ljk1LDI1LjUsMjguNCw0Ni4zNSwyOC40CgkJCQljMTUuMTQsMCwyOC42OS00LjAyLDQwLjY1LTEyLjA2YzguNjgtNS44NSwxNi44OS0xMi44NywyNC42NS0yMS4xYzIuOTEtMy4wOSw1Ljc3LTYuMzgsOC41Ny05LjgxYzQuNDktNS4xOSw2Ljc0LTEyLjUzLDYuNzQtMjIKCQkJCUM5NTAuMTMsMzgwLjM0LDk0OS4yNCwzNzYuNDQsOTQ3LjQ3LDM3My42MXogTTg1OS45MiwyNTIuNTFjNS4yMS0yOS4xMiwxMS4yNS01My41LDE4LjEyLTczLjE1CgkJCQljNi44Ny0xOS42NiwxMy4wMi0yOS40OCwxOC40OC0yOS40OGM2LjYyLDAsOS45NSw5LDkuOTUsMjYuOTljMCwyMi45Ny00Ljk4LDQ4LjM1LTE0LjkzLDc2LjE3cy0yMy4zMyw1NS41OC00MC4xMiw4My4yOAoJCQkJQzg1MS44OCwzMDkuNTUsODU0LjcxLDI4MS42Miw4NTkuOTIsMjUyLjUxeiIvPgoJCQkKCQkJCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfMDAwMDAwOTYwMzk0OTc1NDgzNzkyMzk0NjAwMDAwMTc2ODAwODc0NTg3MzgyMjU1NjVfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE0Mi43NTY1IiB5MT0iNDEyLjg4ODMiIHgyPSIxMTQzLjQwNDMiIHkyPSIzNTkuOTM2OCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDY1MCkiPgoJCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0UwNEY4QSIvPgoJCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0VDOUEyQyIvPgoJCQk8L2xpbmVhckdyYWRpZW50PgoJCQk8cGF0aCBzdHlsZT0iZmlsbDp1cmwoI1NWR0lEXzAwMDAwMDk2MDM5NDk3NTQ4Mzc5MjM5NDYwMDAwMDE3NjgwMDg3NDU4NzM4MjI1NTY1Xyk7IiBkPSJNMTA2MS40NSwzNzMuNjEKCQkJCWMtMS43Ny0yLjg1LTQuMjEtNC4yNy03LjI3LTQuMjdjLTMuNTcsMC02Ljc2LDEuNjYtOS42MSw0Ljk2Yy03LjE3LDguNTMtMTMuNTUsMTUuNDctMTkuMTIsMjAuODMKCQkJCWMtMy4yNSwzLjEzLTYuMjMsNS43Mi04LjkzLDcuNzZjLTcuMzQsNS41Ny0xNS44Nyw4LjM0LTI1LjU3LDguMzRjLTYuMTUsMC0xMS4xMy0yLjA2LTE0LjkxLTYuMjEKCQkJCWMtMy43OS00LjEzLTYuNTMtMTEuMDYtOC4xNy0yMC43OGMyNi43NC0zNi40NCw0Ny45My03My4yNiw2My41Ni0xMTAuNDRjMTUuNjMtMzcuMTYsMjMuNDQtNjkuODQsMjMuNDQtOTguMDIKCQkJCWMwLTE5LjY1LTMuMjUtMzQuNzQtOS43Ni00NS4yN2MtNi41My0xMC41My0xNS40Ni0xNS44LTI2LjgyLTE1LjhjLTIwLjEyLDAtMzcuNDYsMTMuMjUtNTIuMDMsMzkuNzYKCQkJCWMtMTQuNTUsMjYuNTEtMjUuNTcsNTguMjQtMzMuMDMsOTUuMTdjLTcuNDUsMzYuOTMtMTEuMTksNjkuODQtMTEuMTksOTguNzRjMCwxMS44OSwwLjc5LDIyLjkxLDIuMzgsMzMuMDQKCQkJCWMyLjA2LDEzLjQyLDUuNTMsMjUuMzMsMTAuMzgsMzUuNzFjMC43NCwxLjYyLDEuNTMsMy4yMSwyLjM0LDQuNzZjMTAuMDYsMTguOTUsMjUuNTEsMjguNCw0Ni4zNSwyOC40CgkJCQljMTUuMTUsMCwyOC43LTQuMDIsNDAuNjUtMTIuMDZjMy43OS0yLjU3LDcuNTEtNS4zNCwxMS4xMi04LjM2YzcuNzgtNi40NSwxNS4xNC0xMy45NywyMi4xLTIyLjU1YzQuNDktNS4xOSw2Ljc0LTEyLjUzLDYuNzQtMjIKCQkJCUMxMDY0LjExLDM4MC4zNCwxMDYzLjIzLDM3Ni40NCwxMDYxLjQ1LDM3My42MXogTTk3My45MywyNTIuNTFjNS4xOS0yOS4xMiwxMS4yMy01My41LDE4LjEtNzMuMTUKCQkJCWM2Ljg3LTE5LjY2LDEzLjAyLTI5LjQ4LDE4LjQ4LTI5LjQ4YzYuNjIsMCw5Ljk1LDksOS45NSwyNi45OWMwLDIyLjk3LTQuOTgsNDguMzUtMTQuOTEsNzYuMTcKCQkJCWMtOS45NSwyNy44Mi0yMy4zMyw1NS41OC00MC4xNCw4My4yOEM5NjUuODcsMzA5LjU1LDk2OC43MiwyODEuNjIsOTczLjkzLDI1Mi41MXoiLz4KCQkJCgkJCQk8bGluZWFyR3JhZGllbnQgaWQ9IlNWR0lEXzAwMDAwMDQ0ODY0NDU5ODE4NDk5ODM0NDgwMDAwMDE0NzUwODc5MzcyMTAyNDYzMzk3XyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMzguNTg5NCIgeTE9IjMzNC4xNDA1IiB4Mj0iMTEzOS4yMzcyIiB5Mj0iMjgxLjE4OSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDY1MCkiPgoJCQkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0UwNEY4QSIvPgoJCQkJPHN0b3AgIG9mZnNldD0iMSIgc3R5bGU9InN0b3AtY29sb3I6I0VDOUEyQyIvPgoJCQk8L2xpbmVhckdyYWRpZW50PgoJCQk8cGF0aCBzdHlsZT0iZmlsbDp1cmwoI1NWR0lEXzAwMDAwMDQ0ODY0NDU5ODE4NDk5ODM0NDgwMDAwMDE0NzUwODc5MzcyMTAyNDYzMzk3Xyk7IiBkPSJNMTIwMi41MiwzODIuNzQKCQkJCWMtNC40Myw1Ljc2LTEwLjMsMTIuNTctMTcuMjMsMTguN2MwLDAtMTEuMTIsOS44NS0yMS4zOCw5Ljc5Yy0yLjMsMC00LjA5LTAuOTEtNC4wOS0wLjkxYy0xLjA2LTAuNTMtMi0xLjI4LTIuODMtMi4yOAoJCQkJYy0xLjc3LTIuMTMtMi42Ni00Ljk2LTIuNjYtOC41M2MwLTEwLjY0LDIuNzItMjkuNTksOC4xNy01Ni44YzQuMDYtMjAuMjcsNy40NC0zMC4xMSw1LjMyLTM1LjUyCgkJCQljLTcuMjYtMTguNTctMzcuNDUtMjcuMDctNjAuNy0yMy43N2MtMTUuNTgsMi4yMS0yNi40Myw5LjMtMzMuNTgsMTQuMzZjLTE0LjU3LDEwLjMtMjYuMjMsMjMuOTEtMzQuOTksNDAuODQKCQkJCXMtMTMuMTMsMzQuODgtMTMuMTMsNTMuOGMwLDAuOTEsMC4wMiwxLjgxLDAuMDYsMi43MmMwLjM2LDEzLjc4LDMuNjIsMjUuMzYsOS44MSwzNC43NGMxLDEuNTUsMi4wOSwzLjAyLDMuMjYsNC40NQoJCQkJYzguNzYsMTAuNjQsMjAuNDgsMTUuOTcsMzUuMTYsMTUuOTdjMTguNywwLDM0LjIxLTkuOTUsNDYuNTItMjkuODJjMy4zMiw5LjIzLDguMjMsMTYuNTEsMTQuNzQsMjEuODMKCQkJCWM2LjUxLDUuMzIsMTMuNjgsNy45OCwyMS40OSw3Ljk4YzEwLjE3LDAsMjAuNy00LjEzLDMxLjYxLTEyLjQyYzguNC02LjM4LDE2LjQyLTEzLjg5LDI0LjEtMjIuNTMKCQkJCUMxMjA1LjYyLDQwMy4xNiwxMjAzLjI4LDM5MS4yMywxMjAyLjUyLDM4Mi43NHogTTExMTEuNzEsMzgwLjdjLTIuMTMsMTAuMTktNS41NywxOC4zNC0xMC4zLDI0LjUxCgkJCQljLTQuNzQsNi4xNS05LjcsOS4yMy0xNC45MSw5LjIzYy01LjIxLDAtOS4zLTEuNzctMTIuMjUtNS4zMmMtMi45Ni0zLjU3LTQuNDUtOS00LjQ1LTE2LjM0YzAtMTMuMjcsMi40OS0yNS44LDcuNDUtMzcuNjUKCQkJCWM0Ljk4LTExLjgzLDExLjY2LTIxLjM2LDIwLjA4LTI4LjU5YzguNC03LjIxLDE3LjU3LTEwLjk1LDI3LjUxLTExLjE3TDExMTEuNzEsMzgwLjd6Ii8+CgkJCQoJCQkJPGxpbmVhckdyYWRpZW50IGlkPSJTVkdJRF8wMDAwMDAxMzg4NDE0OTU1MTMwMDcxMDUxMDAwMDAwOTQ1NjEzMzk1NjE1Mjg5NDYxMl8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTMyLjA3ODgiIHkxPSIyOTkuOTE3OCIgeDI9IjExMzIuNzI2NyIgeTI9IjI0Ni45NjY0IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDAgNjUwKSI+CgkJCQk8c3RvcCAgb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojRTA0RjhBIi8+CgkJCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRUM5QTJDIi8+CgkJCTwvbGluZWFyR3JhZGllbnQ+CgkJCTxwYXRoIHN0eWxlPSJmaWxsOnVybCgjU1ZHSURfMDAwMDAwMTM4ODQxNDk1NTEzMDA3MTA1MTAwMDAwMDk0NTYxMzM5NTYxNTI4OTQ2MTJfKTsiIGQ9Ik01NDkuMjksMzgyLjc0CgkJCQljLTQuNDMsNS43Ni0xMC4zLDEyLjU3LTE3LjIzLDE4LjdjMCwwLTExLjEyLDkuODUtMjEuMzgsOS43OWMtMi4zLDAtNC4wOS0wLjkxLTQuMDktMC45MWMtMS4wNi0wLjUzLTItMS4yOC0yLjgzLTIuMjgKCQkJCWMtMS43Ny0yLjEzLTIuNjYtNC45Ni0yLjY2LTguNTNjMC0xMC42NCwyLjcyLTI5LjU5LDguMTctNTYuOGM0LjA2LTIwLjI3LDcuNDQtMzAuMTEsNS4zMi0zNS41MgoJCQkJYy03LjI2LTE4LjU3LTM3LjQ1LTI3LjA3LTYwLjctMjMuNzdjLTE1LjU4LDIuMjEtMjYuNDMsOS4zLTMzLjU4LDE0LjM2Yy0xNC41NywxMC4zLTI2LjIzLDIzLjkxLTM0Ljk5LDQwLjg0CgkJCQljLTguNzYsMTYuOTMtMTMuMTMsMzQuODgtMTMuMTMsNTMuOGMwLDAuOTEsMC4wMiwxLjgxLDAuMDYsMi43MmMwLjM2LDEzLjc4LDMuNjIsMjUuMzYsOS44MSwzNC43NGMxLDEuNTUsMi4wOSwzLjAyLDMuMjYsNC40NQoJCQkJYzguNzYsMTAuNjQsMjAuNDgsMTUuOTcsMzUuMTYsMTUuOTdjMTguNywwLDM0LjIxLTkuOTUsNDYuNTItMjkuODJjMy4zMiw5LjIzLDguMjMsMTYuNTEsMTQuNzQsMjEuODMKCQkJCWM2LjUxLDUuMzIsMTMuNjgsNy45OCwyMS40OSw3Ljk4YzEwLjE3LDAsMjAuNy00LjEzLDMxLjYxLTEyLjQyYzguNC02LjM4LDE2LjQyLTEzLjg5LDI0LjEtMjIuNTMKCQkJCUM1NTIuMzksNDAzLjE2LDU1MC4wNSwzOTEuMjMsNTQ5LjI5LDM4Mi43NHogTTQ1OC40OCwzODAuN2MtMi4xMywxMC4xOS01LjU3LDE4LjM0LTEwLjMsMjQuNTFjLTQuNzQsNi4xNS05LjcsOS4yMy0xNC45MSw5LjIzCgkJCQlzLTkuMy0xLjc3LTEyLjI1LTUuMzJjLTIuOTYtMy41Ny00LjQ1LTktNC40NS0xNi4zNGMwLTEzLjI3LDIuNDktMjUuOCw3LjQ1LTM3LjY1YzQuOTgtMTEuODMsMTEuNjYtMjEuMzYsMjAuMDgtMjguNTkKCQkJCWM4LjQtNy4yMSwxNy41Ny0xMC45NSwyNy41MS0xMS4xN0w0NTguNDgsMzgwLjd6Ii8+CgkJPC9nPgoJPC9nPgoJPGc+CgkJPHBhdGggY2xhc3M9InN0NyIgZD0iTTEyODguNTksMjMwLjcyYzMuNjQtMi45MSw3LjktNS4xLDEyLjc2LTYuNTZjNC44Ni0xLjQ2LDkuOTktMi4xOSwxNS4zMi0yLjE5YzguNTMsMCwxNS44OCwxLjE1LDIyLjA5LDMuNDUKCQkJYzYuMiwyLjMzLDExLjg0LDUuNDMsMTYuOTcsOS4zYzUuMSwzLjksOS43Nyw4LjQ2LDE0LjAzLDEzLjY4YzQuMjUsNS4yNCw4LjY5LDEwLjksMTMuMzIsMTYuOTdsMzcuMjItMzIuODMKCQkJYy03LjMxLTguNTEtMTQuNTktMTYuMDUtMjEuOS0yMi42M2MtNy4yOC02LjU2LTE1LjA5LTEyLjE1LTIzLjMzLTE2Ljc4Yy04LjI3LTQuNjEtMTcuMTEtOC4xMy0yNi40Ni0xMC41NwoJCQljLTkuMzgtMi40Mi0xOS44OC0zLjY0LTMxLjU2LTMuNjRjLTExLjkxLDAtMjMuNTksMS42OS0zNS4wNCw1LjFjLTExLjQyLDMuNDEtMjEuNjQsOC4zOS0zMC42NCwxNC45NwoJCQljLTksNi41Ni0xNi4yNCwxNC44My0yMS43MSwyNC43OWMtNS40NSw5Ljk5LTguMiwyMS41Mi04LjIsMzQuNjZjMCwxMy42MywzLjQxLDI1LjA1LDEwLjIyLDM0LjMxCgkJCWM2LjgxLDkuMjMsMTUuMzcsMTcuMDgsMjUuNzEsMjMuNTJjMTAuMzQsNi40NiwyMS41NSwxMS45MSwzMy41OCwxNi40MmMxMi4wMyw0LjQ5LDIzLjIyLDguOTMsMzMuNTUsMTMuMzIKCQkJYzEwLjM0LDQuMzcsMTguOTIsOS4wNSwyNS43MywxNC4wM2M2Ljc5LDUsMTAuMjIsMTEuMjYsMTAuMjIsMTguOGMwLDUuNTktMS40MSwxMC4zOS00LjIxLDE0LjRjLTIuOCw0LjAyLTYuMjcsNy4zNS0xMC4zOSwxMC4wMwoJCQljLTQuMTYsMi42OC04Ljc2LDQuNy0xMy44Niw2LjAyYy01LjEyLDEuMzQtMTAuMSwyLjAyLTE0Ljk3LDIuMDJjLTksMC0xNy4wOC0xLjI5LTI0LjI3LTMuODNjLTEuMzYtMC40OS0xMC41NS0zLjY5LTE5LjUtMTAuMjIKCQkJYy0xOS42OS0xNC4zOC0yNi45Ny0zNi42My0yOS4xMS00NC4xM2MtMTAuOTcsOS40LTIxLjkyLDE4LjgtMzIuOSwyOC4yYzEuMzYsOS44NSw1LjQsMjYuNjcsMTguNTksNDAuNzQKCQkJYzguMjcsOC44MSwxNy41MywxMy42LDI0LjYzLDE3LjUxYzguNjUsNC43NSwxNy45Myw4LjI3LDI3LjkyLDEwLjU3YzkuOTYsMi4zLDIxLjE1LDMuNDgsMzMuNTUsMy40OAoJCQljMTAuNzEsMCwyMS45LTEuNzIsMzMuNTgtNS4xMmMxMS42OC0zLjM4LDIyLjM3LTguMzksMzIuMS0xNC45NGM5LjczLTYuNTgsMTcuNzYtMTQuNjYsMjQuMDgtMjQuMjcKCQkJYzYuMzItOS41OSw5LjQ3LTIwLjYxLDkuNDctMzMuMDFjMC0xMy42MS0zLjQxLTI1LjA1LTEwLjItMzQuMjhjLTYuODEtOS4yNi0xNS4zOS0xNy4wNC0yNS43My0yMy4zNgoJCQljLTEwLjM0LTYuMzItMjEuNDgtMTEuNjgtMzMuMzctMTYuMDVjLTExLjk0LTQuMzctMjMuMDUtOC42OS0zMy4zOS0xMi45NWMtMTAuMzQtNC4yNS0xOC45Mi04Ljk1LTI1LjczLTE0LjA1CgkJCWMtNi44MS01LjEtMTAuMi0xMS40Mi0xMC4yLTE4Ljk2YzAtNS41OSwxLjA4LTEwLjYsMy4yNy0xNC45N0MxMjgyLjAxLDIzNy4zLDEyODQuOTUsMjMzLjY1LDEyODguNTksMjMwLjcyeiIvPgoJCTxwYXRoIGNsYXNzPSJzdDciIGQ9Ik0xNzg3LjY1LDI1NC44bC01My4yNywxMTkuM2wtNTMuNjItMTE5LjNoLTM1LjM5aC0yMC44aC00NS4yM2wtNzguMDYsNjIuMzljMCwwLTAuODItMTQ2LjU1LTEuMTUtMTU0LjE3CgkJCWMtOC43Miw3LjYxLTE3LjQxLDE1LjIzLTI2LjEzLDIyLjg0Yy04LjY3LDcuNTktMTcuMzIsMTUuMTYtMjUuOTksMjIuNzJ2MzAuNTJ2MjA3Ljk1aDUzLjI3VjM3NC4xbDEyLjM4LTEwLjIybDYzLjQ5LDgzLjE4aDYxLjI4CgkJCWwtODUuNzItMTE1LjI4bDc3LjQ3LTY0LjM2bDc1LjczLDE3MC41MmwtNDEuNTksOTQuODZoNTUuNDVsMTIzLjMxLTI3OEwxNzg3LjY1LDI1NC44TDE3ODcuNjUsMjU0Ljh6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==" alt="VanillaSky"></div><div class="group"><button class="pill" type="button" data-go="history-demo"><svg data-icon="sessions"></svg><span class="nav-label">Sessions</span></button></div><div class="group"><button class="round" type="button" id="voice-demo" aria-label="Turn voice off" aria-pressed="true"><svg data-icon="sound"></svg></button><button class="round" type="button" data-go="settings-demo" aria-label="Settings"><svg data-icon="settings"></svg></button></div></header></div>
|
|
90
91
|
<div class="surface-grid"><div class="surface" style="background:var(--vs-media-ground)"><strong>Canvas</strong><code>--vs-media-ground</code></div><div class="surface" style="background:var(--vs-media-glass)"><strong>Glass</strong><code>--vs-media-glass</code></div><div class="surface" style="background:var(--vs-media-hover)"><strong>Hover</strong><code>--vs-media-hover</code></div><div class="surface" style="background:var(--vs-media-selected)"><strong>Selected</strong><code>--vs-media-selected</code></div></div></section>
|
|
91
92
|
<p class="doc-note">The default welcome film is <a href="https://www.pexels.com/video/timelapse-of-clouds-11335959/">Timelapse of Clouds by Dmitry Marchenkov</a>. A poster appears while the muted cloud film loads; custom host welcome searches remain supported.</p>
|
|
92
|
-
<section class="doc-section" id="panels"><div class="section-heading"><span class="number">02</span><h2>A place for the details</h2></div><p class="section-copy">Settings and sessions share the same glass surface. Section headings sit above their choice containers with consistent spacing and alignment. Switches describe the current experience; visuals and style apply to the next question. New session and history live together in Sessions. Generated follow-up cards use one idea in at most eight words and sixty characters; oversized suggestions are omitted instead of clipped. The input returns when playback ends and stays available for a follow-up, without opening the mobile keyboard. Try the controls below.</p><div class="doc-grid">
|
|
93
|
+
<section class="doc-section" id="panels"><div class="section-heading"><span class="number">02</span><h2>A place for the details</h2></div><p class="section-copy">Settings and sessions share the same glass surface. Section headings sit above their choice containers with consistent spacing and alignment. Switches describe the current experience; visuals and style apply to the next question. New session and history live together in Sessions, represented by overlapping conversation bubbles. Generated follow-up cards use one idea in at most eight words and sixty characters; oversized suggestions are omitted instead of clipped. The input returns when playback ends and stays available for a follow-up, without opening the mobile keyboard. Try the controls below.</p><div class="doc-grid">
|
|
93
94
|
<div class="doc-preview popover-demo" id="settings-demo"><div class="sheet-popover settings"><header class="popover-heading"><h2>Settings</h2><button class="round" type="button" data-go="panels" aria-label="Back to section heading"><svg data-icon="close"></svg></button></header><fieldset class="playback-options"><legend>Watching</legend><label class="switch-row"><span><strong>Subtitles</strong><small>Read along with the answer</small></span><input type="checkbox" role="switch" checked id="show-captions"></label><label class="switch-row"><span><strong>Keep controls visible</strong><small>Keep the input bar on screen</small></span><input type="checkbox" role="switch"></label></fieldset><fieldset class="visual-options"><legend>Video creation</legend><div class="visual-choices"><label class="choice-row"><input type="radio" name="visuals" checked><span><strong>Templates only</strong><small>Animated text, diagrams and charts</small></span></label><label class="choice-row"><input type="radio" name="visuals"><span><strong>Full AI video</strong><small>AI-generated footage · billed per clip</small></span></label></div></fieldset><fieldset class="style-options"><legend>Video style</legend><div class="style-choices"><label><input type="radio" name="style" checked><span>Documentary</span></label><label><input type="radio" name="style"><span>Illustrated</span></label><label><input type="radio" name="style"><span>Blueprint</span></label></div></fieldset><p class="settings-note">Creation and style changes apply to your next question.</p>
|
|
94
95
|
<nav class="developer-links" aria-label="Build with VanillaSky">
|
|
95
96
|
<p class="section-label">Build with VanillaSky</p>
|
|
@@ -102,7 +103,7 @@ body { background: #080b16; }
|
|
|
102
103
|
</div></section>
|
|
103
104
|
<section class="doc-section" id="conversation"><div class="section-heading"><span class="number">03</span><h2>One field. Every follow-up.</h2></div><p class="section-copy">Speak or type directly over the picture. Beginning a question pauses playback. Sending starts the next answer; canceling returns to the previous playback state.</p><div class="doc-preview"><div class="demo-toolbar" aria-label="Composer preview states"><button type="button" data-state="ready" aria-pressed="true">Ready</button><button type="button" data-state="listening" aria-pressed="false">Listening</button><button type="button" data-state="thinking" aria-pressed="false">Transcribing</button></div><div class="conversation-composer"><div class="composer-meta"><span id="composer-status" role="status">Interactive preview · no microphone or model call</span></div><form class="composer" id="composer-demo"><button class="ghost transport" type="button" aria-label="Play preview" id="play-demo"><svg data-icon="play"></svg></button><label class="sr-only" for="demo-question">Question</label><textarea id="demo-question" rows="1" placeholder="Ask a follow-up…"></textarea><button class="ghost" type="button" id="mic-demo" aria-label="Preview listening state" aria-pressed="false"><svg data-icon="mic"></svg></button><button class="send" type="submit" aria-label="Preview send" disabled><svg data-icon="send"></svg></button></form></div></div><p class="doc-note">44px targets. 10px between microphone and send. The field grows to 120px and keeps the controls within reach.</p></section>
|
|
104
105
|
<section class="doc-section" id="captions"><div class="section-heading"><span class="number">04</span><h2>Words stay with the picture</h2></div><p class="section-copy">The first subtitle takes the input’s bottom baseline. The complete cue remains readable without truncation. Reveal the input to move subtitles upward; expand for the transcript or restore hidden subtitles in Settings.</p><div class="doc-preview"><div class="demo-toolbar"><button type="button" id="restore-caption">Show subtitles</button><button type="button" id="toggle-transcript">Expand transcript</button></div><div class="line-row" id="caption-demo" data-expanded="false"><div class="caption-actions"><button class="caption-action" type="button" id="expand-action" aria-label="Expand subtitles" aria-expanded="false">Expand <svg data-icon="up"></svg></button><button class="caption-action" type="button" id="hide-action" aria-label="Hide subtitles"><svg data-icon="close"></svg></button></div><p class="line" id="compact-caption">Water absorbs the warm colors of sunlight,<br>leaving more blue light to reach your eyes.</p><div class="expanded-captions" id="transcript-demo" tabindex="0" aria-label="Expanded subtitles" hidden><span class="eyebrow">Full answer</span><p>The ocean’s color begins with sunlight.</p><p>Water absorbs the warm colors of sunlight, leaving more blue light to reach your eyes.</p><p>Depth, particles and the sky change what we see. That is why a shallow lagoon and the open ocean can look so different.</p></div></div></div></section>
|
|
105
|
-
<section class="doc-section" id="suggestions"><div class="section-heading"><span class="number">05</span><h2>A little more curiosity</h2></div><p class="section-copy">A horizontal rail offers the next question. Hover or keyboard focus selects a card. Its outline and lift have room to breathe.</p><div class="doc-preview"><ul class="cards" aria-label="Example suggested questions"><li><button type="button" data-active><span class="card-art"></span><span class="card-wash"></span><span class="card-prompt">What is hiding in the deep ocean?</span></button></li><li><button type="button"><span class="card-art space"></span><span class="card-wash"></span><span class="card-prompt">Why do planets stay in orbit?</span></button></li><li><button type="button"><span class="card-art mind"></span><span class="card-wash"></span><span class="card-prompt">How does a memory begin?</span></button></li></ul></div><p class="doc-note">Reference artwork uses abstract color fields. The live rail uses the answer’s resolved media. Select a card here to place its question in the preview composer.</p></section>
|
|
106
|
+
<section class="doc-section" id="suggestions"><div class="section-heading"><span class="number">05</span><h2>A little more curiosity</h2></div><p class="section-copy">A horizontal rail offers the next question. Video cards show their poster image before playback, including when autoplay is blocked. Hover or keyboard focus selects a card. Its outline and lift have room to breathe.</p><div class="doc-preview"><ul class="cards" aria-label="Example suggested questions"><li><button type="button" data-active><span class="card-art"></span><span class="card-wash"></span><span class="card-prompt">What is hiding in the deep ocean?</span></button></li><li><button type="button"><span class="card-art space"></span><span class="card-wash"></span><span class="card-prompt">Why do planets stay in orbit?</span></button></li><li><button type="button"><span class="card-art mind"></span><span class="card-wash"></span><span class="card-prompt">How does a memory begin?</span></button></li></ul></div><p class="doc-note">Reference artwork uses abstract color fields. The live rail uses the answer’s resolved media. Select a card here to place its question in the preview composer.</p></section>
|
|
106
107
|
<section class="doc-section" id="foundations"><div class="section-heading"><span class="number">06</span><h2>Small decisions, shared everywhere</h2></div><p class="section-copy">System typography, generous touch targets and a compact spacing scale. The video carries the color; the interface carries meaning.</p><div class="doc-preview"><div class="type-row"><span style="font-size:40px;letter-spacing:-.055em;line-height:1.08">An answer worth watching.</span><code>Display · responsive / 1.08</code></div><div class="type-row"><span style="font-size:22px;letter-spacing:-.02em;line-height:1.45">A clear line over a moving picture.</span><code>Subtitles · 17–22px / 1.45</code></div><div class="type-row"><span style="font-size:16px;letter-spacing:-.015em;line-height:1.625">Ask a follow-up…</span><code>Input · 16px / 26px</code></div><div class="type-row"><span style="font-size:13px;color:var(--vs-media-muted)">One answer leads to another.</span><code>Context · 13px</code></div><div class="metrics"><div class="metric"><strong>44<span style="display:inline;font-size:15px"> px</span></strong><span>Minimum primary control target</span></div><div class="metric"><strong>180<span style="display:inline;font-size:15px"> ms</span></strong><span>Navigation and opacity fade</span></div><div class="metric"><strong>280<span style="display:inline;font-size:15px"> ms</span></strong><span>Input and subtitle movement</span></div><div class="metric"><strong>2<span style="display:inline;font-size:15px"> s</span></strong><span>Idle delay after revealing controls</span></div></div></div><p class="doc-note">First subtitles hide the input immediately unless the viewer is editing, listening or using keyboard focus. Reduced motion removes movement and fades. Increased contrast strengthens the surfaces and borders. The input respects bottom safe areas. Subtitle actions fade while inactive and return on hover, touch or keyboard focus. The foreground preserves the scene ratio and readable text. Ambient opening media or a gradient fills the surrounding viewport.</p></section>
|
|
107
108
|
<footer class="doc-footer"><span>VanillaSky · VideoChat immersive interface</span><span>Rendered with the same tokens and component CSS as the experience.</span></footer>
|
|
108
109
|
</div></main>
|
package/package.json
CHANGED