.demo.svelte-2dzc4q{--a:calc(var(--az) * 1deg);--e:calc(var(--el) * 1deg);background:var(--ivory);border-radius:24px;grid-template-columns:minmax(0,1fr);gap:12px;margin:28px 0 36px;padding:6px;display:grid}.tabs.svelte-2dzc4q{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;display:grid}.tabs.svelte-2dzc4q label:where(.svelte-2dzc4q){cursor:pointer;position:relative}.tabs.svelte-2dzc4q input:where(.svelte-2dzc4q){opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.tabs.svelte-2dzc4q span:where(.svelte-2dzc4q){text-align:center;color:var(--muted);transition:background-color .2s var(--ease), color .2s var(--ease);border-radius:999px;padding:10px 8px;font-size:.9375rem;display:block}.tabs.svelte-2dzc4q label:where(.svelte-2dzc4q):hover span:where(.svelte-2dzc4q){color:var(--ink)}.tabs.svelte-2dzc4q input:where(.svelte-2dzc4q):checked+span:where(.svelte-2dzc4q){background:var(--white);box-shadow:var(--ring);color:var(--ink)}.tabs.svelte-2dzc4q input:where(.svelte-2dzc4q):focus-visible+span:where(.svelte-2dzc4q){outline:2px solid var(--ink);outline-offset:2px}.stage.svelte-2dzc4q{background:var(--white);border-radius:20px;display:grid;overflow:hidden}figure.svelte-2dzc4q{opacity:0;visibility:hidden;transition:opacity .45s var(--ease), visibility 0s linear .45s;grid-area:1/1;margin:0}:is(.demo.svelte-2dzc4q:has(input[value=ring]:where(.svelte-2dzc4q):checked) [data-scene=ring]:where(.svelte-2dzc4q),.demo.svelte-2dzc4q:has(input[value=stillLife]:where(.svelte-2dzc4q):checked) [data-scene=stillLife]:where(.svelte-2dzc4q),.demo.svelte-2dzc4q:has(input[value=glass]:where(.svelte-2dzc4q):checked) [data-scene=glass]:where(.svelte-2dzc4q),.demo.svelte-2dzc4q:has(input[value=prism]:where(.svelte-2dzc4q):checked) [data-scene=prism]:where(.svelte-2dzc4q),.demo.svelte-2dzc4q:has(input[value=pool]:where(.svelte-2dzc4q):checked) [data-scene=pool]:where(.svelte-2dzc4q)){opacity:1;visibility:visible;transition:opacity .45s var(--ease)}figure.svelte-2dzc4q img:where(.svelte-2dzc4q){aspect-ratio:16/10;object-fit:cover;width:100%;height:auto;display:block}figcaption.svelte-2dzc4q{color:var(--ink);padding:14px 18px 16px;font-size:.9375rem}.light.svelte-2dzc4q,.launch.svelte-2dzc4q{display:none}.js .light.svelte-2dzc4q{background:var(--white);border-radius:20px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:24px;padding:16px 18px;display:grid}.dial.svelte-2dzc4q{--r:calc(cos(var(--e)) * 38px);background:var(--ivory);width:88px;height:88px;box-shadow:inset 0 0 0 1px var(--line);border-radius:50%;position:relative}.pivot.svelte-2dzc4q,.sun.svelte-2dzc4q{border-radius:50%;position:absolute;top:50%;left:50%;translate:-50% -50%}.pivot.svelte-2dzc4q{background:var(--muted);width:6px;height:6px}.sun.svelte-2dzc4q{width:14px;height:14px;margin-left:calc(cos(var(--a)) * var(--r));margin-top:calc(sin(var(--a)) * var(--r));background:var(--ink);box-shadow:0 0 0 4px var(--white)}.sliders.svelte-2dzc4q{gap:14px;display:grid}.sliders.svelte-2dzc4q label:where(.svelte-2dzc4q){color:var(--muted);gap:6px;font-size:.875rem;display:grid}.sliders.svelte-2dzc4q span:where(.svelte-2dzc4q){justify-content:space-between;display:flex}output.svelte-2dzc4q{font-family:var(--mono);color:var(--ink);font-size:.8125rem}input[type=range].svelte-2dzc4q{width:100%;accent-color:var(--ink);margin:0}.js .launch.svelte-2dzc4q{background:var(--white);min-height:52px;box-shadow:var(--ring);border-radius:999px;align-items:center;gap:8px;padding:0 8px 0 20px;display:flex}.launch.svelte-2dzc4q code:where(.svelte-2dzc4q){white-space:nowrap;min-width:0;color:var(--ink-2);scrollbar-width:none;background:0 0;flex:1;padding:0;font-size:.8125rem;overflow-x:auto}@media (width<=560px){.tabs.svelte-2dzc4q{grid-template-columns:repeat(3,minmax(0,1fr))}.js .light.svelte-2dzc4q{grid-template-columns:minmax(0,1fr);justify-items:center}.sliders.svelte-2dzc4q{width:100%}}.page.svelte-100slfm{grid-template-columns:minmax(0,760px) 200px;justify-content:space-between;gap:clamp(32px,4vw,64px);display:grid}.crumbs.svelte-100slfm ol:where(.svelte-100slfm){color:var(--muted);flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0 0 14px;padding:0;font-size:.8125rem;list-style:none;display:flex}.crumbs.svelte-100slfm li:where(.svelte-100slfm){align-items:center;gap:6px;display:inline-flex}.crumbs.svelte-100slfm li:where(.svelte-100slfm) .icon{color:var(--faint)}.crumbs.svelte-100slfm a:where(.svelte-100slfm){transition:color .15s var(--ease)}.crumbs.svelte-100slfm a:where(.svelte-100slfm):hover,.crumbs.svelte-100slfm [aria-current]:where(.svelte-100slfm){color:var(--ink)}.toc.svelte-100slfm{top:calc(var(--header) + 28px);max-height:calc(100vh - var(--header) - 56px);align-self:start;font-size:.875rem;position:sticky;overflow-y:auto}.toc.svelte-100slfm h2:where(.svelte-100slfm){letter-spacing:.02em;color:var(--faint);margin:0 0 14px;font-size:.75rem;font-weight:500}.toc.svelte-100slfm ul:where(.svelte-100slfm){border-left:1px solid var(--line);margin:0;padding:0 0 0 14px;list-style:none}.toc.svelte-100slfm li:where(.svelte-100slfm){margin:0}.toc.svelte-100slfm li.sub:where(.svelte-100slfm){padding-left:14px}.toc.svelte-100slfm a:where(.svelte-100slfm){color:var(--muted);transition:color .15s var(--ease);padding:5px 0;line-height:1.4;display:block}.toc.svelte-100slfm a:where(.svelte-100slfm):hover{color:var(--ink)}.pager.svelte-100slfm{grid-template-columns:1fr 1fr;gap:16px;margin-top:72px;display:grid}.pager.svelte-100slfm a:where(.svelte-100slfm){border:1px solid var(--line-strong);transition:background-color .15s var(--ease), border-color .15s var(--ease);border-radius:18px;flex-direction:column;gap:6px;padding:20px 22px;display:flex}.pager.svelte-100slfm a:where(.svelte-100slfm):hover{background:var(--ivory);border-color:#d3c9b8}.pager.svelte-100slfm span:where(.svelte-100slfm){color:var(--faint);font-size:.8125rem}.pager.svelte-100slfm b:where(.svelte-100slfm){letter-spacing:-.01em;align-items:center;gap:8px;font-weight:500;display:inline-flex}.next.svelte-100slfm{text-align:right;grid-column:2;align-items:flex-end}.prev.svelte-100slfm{grid-column:1}@media (width<=1100px){.page.svelte-100slfm{grid-template-columns:minmax(0,1fr)}.toc.svelte-100slfm{display:none}}@media (width<=560px){.pager.svelte-100slfm{grid-template-columns:1fr}.next.svelte-100slfm,.prev.svelte-100slfm{grid-column:1}}
