.demo,.media,#modes-stage,.stage-hero{background-color:color-mix(in srgb, var(--sec,var(--accent)) 7%, var(--panel));background-image:radial-gradient(circle, color-mix(in srgb, var(--ink) 11%, transparent) 1.1px, transparent 1.3px);box-shadow:0 0 0 1px var(--line), 0 28px 50px -34px var(--shade);background-size:24px 24px;border-radius:14px;transition:background-color .5s;overflow:hidden}.hx-host>.hx-window:not(.no-frame){box-shadow:0 0 0 1px #0000001f}.stage-hero .hx.hx-window{--hx-canvas:#ece6dc;--hx-grid:#3c281417}.stage-hero .hx.hx-window[data-theme=dark]{--hx-canvas:#1a1512;--hx-grid:#f5ebdc1a}.stage-hero .hx.hx-window.hx-build{box-shadow:none}.hero{--nav-h:61px;--h1:clamp(40px, 6.2vw, 84px);text-align:center;flex-direction:column;align-items:center;max-width:1240px;margin:0 auto;padding:clamp(24px,4vh,48px) 24px 36px;display:flex;position:relative}.hero-top{flex-direction:column;align-items:center;display:flex;position:relative}.hero h1{font-size:var(--h1);letter-spacing:-.035em;line-height:1}.hero h1 .w,.intro-line .w{display:inline-block}.hero .lede{max-width:36em;margin-top:18px;font-size:clamp(17px,1.45vw,20px);line-height:1.5}.hero .cta{margin-top:24px}.cta{flex-direction:column;align-items:center;gap:10px;display:flex}.hero .cta-row,.final .cta-row{grid-auto-columns:1fr;grid-auto-flow:column;display:inline-grid}.hero .cta-row .btn,.final .cta-row .btn{justify-content:center;min-width:0}@media (width<=560px){.hero .cta-row,.final .cta-row{grid-auto-flow:row}}.fine{color:var(--muted);font-size:13px}.hero-stage{width:min(100%, 1080px, max(480px, (100svh - var(--nav-h) - 440px) * 1.6));flex-direction:column;gap:12px;margin-top:28px;display:flex;position:relative}.stage-box{border-radius:14px;width:100%;position:relative}.stage-box:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.stage-hero{aspect-ratio:1280/800;width:100%;position:relative}.show-ctl{justify-content:space-between;align-items:center;gap:12px 16px;min-height:44px;display:flex}.pause{font:600 13.5px/1 var(--font);color:var(--muted);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:999px;flex:none;min-height:40px;padding:10px 15px;transition:color .15s,border-color .15s}.pause:hover{color:var(--ink);border-color:color-mix(in srgb, var(--ink) 30%, transparent)}.intro-skip{z-index:3;justify-content:center;position:absolute;top:0;left:0}.intro-skip.under{top:calc(100% + 16px);left:50%;translate:-50%}.hero:not(.intro) .intro-skip,.hero.plain .intro-skip{display:none}.seg{background:var(--panel);border:1px solid var(--line);border-radius:999px;flex:none;gap:4px;padding:4px;display:inline-flex}.seg button{font:600 15px/1 var(--font);min-height:40px;color:var(--ink-2);cursor:pointer;background:0 0;border:0;border-radius:999px;align-items:center;gap:9px;padding:9px 16px;transition:background-color .2s,color .2s,transform .12s;display:inline-flex}.seg button svg{fill:none;stroke:currentColor;stroke-width:1.5px;width:16px;height:16px}.seg button:hover{color:var(--ink)}.seg button[aria-pressed=true]{background:var(--raised);color:var(--ink);box-shadow:0 1px 3px #00000024}.seg button.press{transform:scale(.94)}.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero h1 .s{font:inherit;letter-spacing:inherit;color:inherit;text-align:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;margin:0;padding:0;transition:color .5s}.hero[data-view=focus] h1 .s:first-child,.hero[data-view=canvas] h1 .s:last-child{color:color-mix(in srgb, var(--ink) 42%, var(--bg))}.hero[data-view] h1 .s:hover{color:var(--ink);transition-duration:.15s}.hero h1 .s:focus-visible{outline:3px solid var(--accent);outline-offset:6px}.hero.intro h1 .s{pointer-events:none}.intro-line{z-index:2;font:700 clamp(30px, 4.2vw, 58px)/1.05 var(--font);letter-spacing:-.03em;text-align:center;color:var(--ink);pointer-events:none;margin:0;position:absolute;bottom:calc(100% + 22px);left:0;right:0}.intro-line .n{font-variant-numeric:tabular-nums}.hero-top>.intro-line{font-size:var(--h1);letter-spacing:-.035em;text-align:left;line-height:1;bottom:auto;right:auto}.hero-top>.intro-line .s{display:block}@media (width>=960px) and (aspect-ratio>=5/4){.hero{--h1:clamp(44px, 4.6vw, 76px);max-width:none;min-height:calc(100svh - var(--nav-h));box-sizing:border-box;text-align:left;grid-template-columns:clamp(300px,26vw,400px) minmax(0,1fr);align-items:center;column-gap:clamp(28px,3.5vw,60px);padding:28px 24px 28px max(24px,50% - 600px);display:grid}.hero-top{align-items:flex-start}.hero h1 .s{display:block}.hero .lede{max-width:none;font-size:18px}.hero .cta{align-items:flex-start}.hero .cta-row{grid-auto-flow:row}.hero-stage{width:min(100%, 1280px, (100svh - var(--nav-h) - 56px - 56px) * 1.6);justify-self:end;margin:0}}.hero.intro .rv,.hero.intro .stage-box{opacity:0;transform:translateY(14px)}.hero.intro .rv{filter:blur(4px)}.hero.intro .rv.on,.hero.intro .stage-box.on{opacity:1;filter:blur();transition:opacity .4s,transform .45s cubic-bezier(.3,0,0,1),filter .4s;transform:none}.hero.intro .out .w,.hero.intro .rv.out{opacity:0;filter:blur(4px);pointer-events:none;transition:opacity .28s,transform .3s cubic-bezier(.3,0,0,1),filter .28s;transform:translateY(-10px);transition-delay:0s!important}.hero.intro:not(.js) h1 .w:not(.on),.hero.intro:not(.js) .hero-top>.rv:not(.on),.hero.intro:not(.js) .hero-stage>.rv:not(.on),.hero.intro:not(.js) .stage-box:not(.on){animation:10ms linear 6s forwards rv-safety}@keyframes rv-safety{to{opacity:1;filter:none;transform:none}}.hero-try{z-index:200;background:var(--raised);width:max-content;max-width:calc(100% - 32px);color:var(--ink);border:1px solid var(--line);border-radius:14px;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;padding:12px 14px 12px 18px;font-size:15px;animation:.2s ease-out hero-try-in;display:flex;position:absolute;top:50%;left:50%;translate:-50% -50%;box-shadow:0 18px 50px -16px #00000073}.hero-try a{color:var(--fill-ink);background:var(--fill);white-space:nowrap;border-radius:999px;padding:7px 14px;font-weight:700;text-decoration:none}.hero-try[hidden]{display:none}@keyframes hero-try-in{0%{opacity:0;scale:.96}}@media (width<=700px){.hero{padding-top:24px}.hero h1{font-size:clamp(38px,11vw,48px)}.hero-stage{width:100%}.stage-hero{aspect-ratio:820/940}.seg button{padding:8px 12px;font-size:14px}}@media (prefers-reduced-motion:reduce){.hero-try,.seg button,.hero h1 .s{transition:none;animation:none}}.deep{--bg:color-mix(in srgb, var(--c5) 20%, #15100d);--panel:color-mix(in srgb, var(--c5) 22%, #1e1713);--raised:color-mix(in srgb, var(--c5) 20%, #2a201a);--ink:#f4efe6;--ink-2:#d8cfc1;--muted:#ab9f8f;--line:#f4efe626;--fill:var(--c4);--fill-ink:#18161c;--accent:var(--c0);--sec:var(--c0);--shade:#0000008c;background:var(--bg);color:var(--ink);color-scheme:dark;transition:background-color .5s}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .deep{--bg:color-mix(in srgb, var(--c5) 30%, #1d150f);--panel:color-mix(in srgb, var(--c5) 30%, #261b14);--raised:color-mix(in srgb, var(--c5) 28%, #32241b)}}:root[data-theme=dark] .deep{--bg:color-mix(in srgb, var(--c5) 30%, #1d150f);--panel:color-mix(in srgb, var(--c5) 30%, #261b14);--raised:color-mix(in srgb, var(--c5) 28%, #32241b)}.head.c{text-align:center;align-items:center;margin-inline:auto}.layouts h2 kbd{font:700 .62em/1 var(--mono);vertical-align:.12em;border-radius:10px;padding:.14em .38em}.lay-body{flex-direction:column;align-items:center;gap:14px;display:flex}.lay-stage{flex-direction:column;gap:14px;width:min(100%,1040px,max(420px,160svh - 993.6px));display:flex}#modes-stage{aspect-ratio:16/10;box-shadow:0 0 0 1px var(--line), 0 40px 80px -40px #000c}.mode-note{color:var(--muted);text-align:center;max-width:60ch;min-height:3em;margin:0 auto;font-size:15px;line-height:1.5}.lay-pick{flex-direction:column;align-items:center;gap:18px;width:100%;max-width:1040px;display:flex}.lays{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;width:100%;margin:0;padding:0;list-style:none;display:grid}.lay button{width:100%;height:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;padding:0}.lay .card{box-sizing:border-box;border:1px solid var(--line);background:var(--raised);height:100%;box-shadow:none;border-radius:14px;align-content:start;gap:6px;padding:10px 10px 12px;transition:border-color .2s,box-shadow .2s;display:grid}.lay button:hover .card{border-color:color-mix(in srgb, var(--fill) 50%, var(--line))}.lay button[aria-pressed=true] .card{border-color:var(--fill);box-shadow:inset 0 0 0 1px var(--fill)}.lay button:focus-visible{outline:none}.lay button:focus-visible .card{outline:2px solid var(--accent);outline-offset:3px}.lay .card b{color:var(--ink);letter-spacing:-.01em;margin-top:4px;font-size:15.5px;line-height:1.25}.lay .card small{color:var(--muted);flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;display:flex}.lay .card small kbd{font-size:11.5px}.card .wf{background:color-mix(in srgb, var(--ink) 6%, transparent);border-radius:8px;width:100%;height:auto;display:block}.card .wf-grey{fill:color-mix(in srgb, var(--ink) 22%, transparent)}.card .wf-mark{fill:color-mix(in srgb, var(--ink) 46%, transparent)}.card .wf-accent{fill:var(--fill)}.card .wf-cursor{fill:var(--ink)}.layouts:not([data-orient=vertical]) .wf[data-o=vertical],.layouts[data-orient=vertical] .wf[data-o=horizontal]{display:none}@media (width>=960px){.lay-body{grid-template-columns:320px minmax(0,1fr);grid-template-areas:"pick stage";align-items:center;column-gap:40px;display:grid}.lay-stage{grid-area:stage;justify-self:center;width:min(100%,160svh - 321.6px)}.lay-pick{grid-area:pick;align-items:stretch;gap:14px}.orient{align-self:flex-start}.orient button{padding-inline:14px}.lays{grid-template-columns:minmax(0,1fr);gap:8px}.lay .card{grid-template-columns:112px minmax(0,1fr);align-items:center;gap:4px 14px;padding:8px 12px 8px 8px}.lay .card .wf{border-radius:6px;grid-row:1/3}.lay .card b{align-self:end;margin:0}.lay .card small{align-self:start}}@media (width<=900px){.lays{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=560px){.lays{grid-template-columns:repeat(2,minmax(0,1fr))}.orient button{padding:8px 12px;font-size:13.5px}}@media (prefers-reduced-motion:reduce){.lay .card,.deep{transition:none}}@media (forced-colors:active){.lay .card{border-color:canvastext}.lay button[aria-pressed=true] .card{border-color:highlight;box-shadow:inset 0 0 0 1px highlight}.card .wf-accent{fill:highlight}.card .wf-grey,.card .wf-mark,.card .wf-cursor{fill:canvastext}}.ghost{font:700 14px var(--font);color:var(--ink);cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;padding:4px 2px;display:inline-flex}.ghost span{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:6px;text-decoration-thickness:2px;transition:text-decoration-color .15s}.ghost:hover span{text-decoration-color:var(--accent)}.ghost:after{content:"↺";font-weight:400;transition:rotate .3s;display:inline-block}.ghost:hover:after{rotate:-90deg}.ghost:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}@media (prefers-reduced-motion:reduce){.ghost span,.ghost:after{transition:none}.ghost:hover:after{rotate:none}}section{padding-block:104px}.head{flex-direction:column;gap:16px;max-width:820px;margin-bottom:48px;display:flex}.head .lede{max-width:62ch}.more{font:600 15px var(--font);color:var(--sec,var(--accent));border-bottom:2px solid color-mix(in srgb, currentColor 35%, transparent);align-self:flex-start;padding-bottom:2px;text-decoration:none;transition:border-color .15s}.more:hover{border-bottom-color:currentColor}.more:after{content:" →"}.band{background:color-mix(in srgb, var(--sec,var(--accent)) 7%, var(--panel));border-block:1px solid var(--line);transition:background-color .5s}.band+.band{border-top:0}.card{background:var(--raised);border:1px solid var(--line);box-shadow:0 24px 50px -40px var(--shade);border-radius:18px}@media (width<=900px){section{padding-block:72px}.head{margin-bottom:32px}}:root{--lift:0 1px 0 #ffffff8c inset, 0 30px 56px -38px #321e0a73, 0 8px 18px -12px #321e0a38}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--lift:0 1px 0 #ffffff0f inset, 0 30px 56px -30px #000c}}:root[data-theme=dark]{--lift:0 1px 0 #ffffff0f inset, 0 30px 56px -30px #000c}.kcard .pic>.demo,.mini .th>.demo,.chapter-lead .media>.demo{width:100%;height:100%;box-shadow:none;background:0 0;border-radius:0;position:absolute;inset:0;aspect-ratio:auto!important}.kit{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}.kcard{background:var(--raised);border:1px solid var(--line);min-width:0;box-shadow:var(--lift);border-radius:22px;flex-direction:column;display:flex;overflow:hidden}.kcard .pic{aspect-ratio:4/3;background:color-mix(in srgb, var(--sec,var(--accent)) 10%, var(--panel));position:relative}.kcard .cap{flex-direction:column;gap:6px;padding:16px 20px 20px;display:flex}.kcard .cap b{letter-spacing:-.01em;font-size:18px;line-height:1.25}.kcard .cap span{color:var(--ink-2);font-size:15px;line-height:1.5}.kcard.lead{flex-direction:row;grid-column:span 2}.kcard.lead .pic{aspect-ratio:auto;flex:0 0 58%;min-height:280px}.kcard.lead .cap{justify-content:center;gap:10px;padding:28px 30px}.kcard.lead .cap b{font-size:clamp(21px,2vw,26px)}.kcard.lead .cap span{font-size:16px}@media (width<=900px){.kit{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=600px){.kit{grid-template-columns:minmax(0,1fr)}.kcard.lead{flex-direction:column;grid-column:auto}.kcard.lead .pic{aspect-ratio:4/3;flex:none;min-height:0}.kcard.lead .cap{padding:16px 20px 20px}}.chapter{border-top:1px solid var(--line);grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(28px,5vw,64px);padding-block:52px;display:grid}.chapter:last-child{padding-bottom:0}.chapter.flip .chapter-lead{order:-1}.chapter-text{flex-direction:column;gap:14px;min-width:0;display:flex}.chapter-text>p{color:var(--ink-2)}.minis{flex-direction:column;gap:16px;margin:6px 0 4px;padding:0;list-style:none;display:flex}.mini{grid-template-columns:132px minmax(0,1fr);align-items:center;gap:16px;display:grid}.mini .th{aspect-ratio:16/10;background:color-mix(in srgb, var(--sec,var(--accent)) 9%, var(--panel));box-shadow:0 0 0 1px var(--line);border-radius:10px;position:relative;overflow:hidden}.mini .th .demo-poster{object-fit:cover;object-position:top left}.mini .demo-hint{display:none}.mini .cap{flex-direction:column;gap:2px;display:flex}.mini .cap b{font-size:16.5px;line-height:1.3}.mini .cap span{color:var(--ink-2);font-size:15px;line-height:1.5}.chapter-lead{flex-direction:column;gap:12px;min-width:0;margin:0;display:flex}.chapter-lead .media{aspect-ratio:var(--r,1.6);background:color-mix(in srgb, var(--sec,var(--accent)) 8%, var(--panel));box-shadow:0 0 0 1px var(--line), var(--lift);border-radius:16px;position:relative;overflow:hidden}.chapter.tall .chapter-lead{align-items:center}.chapter.tall .chapter-lead .media{width:min(100%,360px)}.chapter.tall .chapter-lead .cap{max-width:360px}.chapter-lead .cap{color:var(--ink-2);font-size:15px;line-height:1.5}.chapter-lead .cap b{color:var(--ink);font-weight:600}@media (width<=900px){.chapter{grid-template-columns:minmax(0,1fr);gap:24px;padding-block:40px}.chapter.flip .chapter-lead{order:0}}@media (width<=480px){.mini{grid-template-columns:96px minmax(0,1fr);gap:12px}}.tour-head{padding-block:64px 8px}.tour-head .wrap{flex-direction:column;gap:16px;max-width:1200px;display:flex}.tour-head h1{max-width:22ch}.rows{flex-direction:column;display:flex}.chap{letter-spacing:-.02em;color:var(--ink);margin-top:56px;font-size:clamp(22px,2.2vw,28px)}.chap:first-child{margin-top:0}.chap+.frow{padding-top:24px}.frow{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:56px;padding-block:52px;scroll-margin-top:84px;display:grid}.frow.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.frow.flip .txt{order:2}.frow .txt{flex-direction:column;gap:14px;display:flex}.frow .txt p{color:var(--ink-2)}.frow ul{color:var(--ink-2);flex-direction:column;gap:8px;margin:4px 0 0;padding:0;font-size:15.5px;list-style:none;display:flex}.frow li{gap:10px;display:flex}.frow li:before{content:"";background:var(--sec,var(--fill));border-radius:2px;flex:none;width:7px;height:7px;margin-top:9px}.keys{color:var(--muted);flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;display:flex}.viz{width:100%}#trust .viz{max-width:400px;margin-inline:auto}.frow.wide{grid-template-columns:minmax(0,1fr);align-items:start;gap:28px}.frow.wide .txt{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;gap:12px 56px;display:grid}.frow.wide .txt>h3{grid-area:1/1/span 3}.frow.wide .txt>:not(h3){grid-column:2}@media (width<=900px){.frow,.frow.flip,.frow.wide{grid-template-columns:1fr;gap:24px;padding-block:36px}.frow.flip .txt{order:0}.frow.wide .txt{flex-direction:column;display:flex}}.ai-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px;display:grid}.ai-steps figure{flex-direction:column;gap:12px;margin:0;display:flex}.ai-steps figcaption{color:var(--ink-2);font-size:15px}.ai-steps figcaption b{color:var(--ink);margin-bottom:2px;font-size:16px;display:block}@media (width<=900px){.ai-steps{grid-template-columns:1fr}}.set-wrap{grid-template-columns:minmax(0,1fr);gap:20px;display:grid}#v-settings{aspect-ratio:1468/973}.set-hint{color:var(--muted);text-align:center;font-size:14px}.basics{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px;display:grid}.basic{flex-direction:column;gap:12px;display:flex}.basic .pic{aspect-ratio:4/3;position:relative}.basic .pic>div{position:absolute;inset:0}.basic b{font-size:17px}.basic span{color:var(--ink-2);font-size:15px}@media (width<=900px){.basics{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=560px){.basics{grid-template-columns:1fr}}.try{background:var(--raised);border:1px solid var(--line);box-shadow:0 30px 60px -44px var(--shade);border-radius:22px;grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;gap:40px;padding:36px;display:grid}.try .txt{flex-direction:column;align-items:flex-start;gap:14px;display:flex}.try .txt p{color:var(--ink-2);max-width:46ch}.try .cta-row{justify-content:flex-start;gap:10px 16px;margin-top:6px}@media (width<=900px){.try{grid-template-columns:1fr;padding:22px}}.final{text-align:center;background:radial-gradient(70% 80% at 50% -10%, color-mix(in srgb, var(--c0) var(--wash,16%), transparent), transparent 70%), radial-gradient(50% 60% at 8% 110%, color-mix(in srgb, var(--c3) var(--wash,16%), transparent), transparent 70%), radial-gradient(50% 60% at 92% 110%, color-mix(in srgb, var(--c2) var(--wash,16%), transparent), transparent 70%);padding-block:120px;transition:background .5s;position:relative}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .final{--wash:26%}}:root[data-theme=dark] .final{--wash:26%}.final .wrap{flex-direction:column;align-items:center;gap:18px;display:flex}.final h2{margin-top:10px;font-size:clamp(36px,5vw,64px);line-height:1.02}.final .lede{text-align:center;max-width:52ch}.final .cta{gap:18px;margin-top:12px}.maker{text-align:left;max-width:560px;color:var(--ink-2);flex-direction:column;gap:10px;margin-top:44px;font-size:15.5px;line-height:1.55;display:flex}.maker b{color:var(--ink);font-size:17px}.maker .sig{color:var(--muted);font-size:14px}.maker .sig a{color:var(--accent);border-bottom:1px solid #0000;font-weight:600;text-decoration:none;transition:border-color .15s}.maker .sig a:hover,.maker .sig a:focus-visible{border-bottom-color:currentColor}.maker .sig a:after{content:" →"}#finalMark .hx-logo{width:104px;height:104px;filter:drop-shadow(0 16px 24px var(--shade));display:block}.facts{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:4px 0;margin:0;padding:0;font-size:13px;list-style:none;display:flex}.facts li+li:before{content:"·";margin-inline:10px}.facts a{color:inherit;text-underline-offset:3px;text-decoration-color:color-mix(in srgb, var(--muted) 50%, transparent)}.facts a:hover{color:var(--ink)}@media (prefers-reduced-motion:reduce){body,.btn,.band{transition:none}}.demo.is-live{content-visibility:auto}.demo{width:100%;position:relative}.demo>.demo-poster{object-fit:contain;width:100%;height:100%;transition:opacity .35s;position:absolute;inset:0}.demo>.demo-live{position:absolute;inset:0}.demo.is-live>.demo-poster{opacity:0;pointer-events:none}.demo:not(.is-live)>.demo-live{visibility:hidden}.demo.is-leaving>.demo-live{visibility:visible}.demo.expands{cursor:zoom-in}.demo.expands:after{content:"";z-index:4;border-radius:inherit;position:absolute;inset:0}.demo.expands:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.demo-hint{z-index:5;font:600 13px var(--font);color:var(--fill-ink);background:var(--fill);pointer-events:none;opacity:0;border-radius:999px;align-items:center;gap:6px;padding:6px 12px 6px 10px;transition:opacity .15s,translate .15s;display:inline-flex;position:absolute;bottom:10px;right:10px;translate:0 4px;box-shadow:0 4px 14px -6px #0006}.demo-hint svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:14px;height:14px}.demo.expands:hover>.demo-hint,.demo.expands:focus-visible>.demo-hint{opacity:1;translate:0}@media (hover:none){.demo-hint{opacity:.95;translate:0}}@media (width<=700px){.demo>.demo-live{display:none}}.demo-dialog{background:var(--bg);width:100vw;max-width:none;height:100dvh;max-height:none;color:var(--ink);border:0;margin:0;padding:0}.demo-dialog::backdrop{background:#00000080}.demo-dialog-bar{padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;border-bottom:1px solid var(--line);align-items:center;gap:12px;display:flex}.demo-dialog-title{flex:1;font-weight:600}.demo-dialog-close{border:1px solid var(--line);background:var(--raised);width:40px;height:40px;color:var(--ink);cursor:pointer;border-radius:50%;place-items:center;display:grid}.demo-dialog-close svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;width:18px;height:18px}.demo-dialog-body{height:calc(100% - 61px - env(safe-area-inset-top,0px));place-items:center;padding:12px;display:grid;overflow:auto}.demo-dialog-stage{width:100%;max-height:100%;position:relative}.demo-dialog-stage>.demo-dialog-still{object-fit:contain;width:100%;height:100%;transition:opacity .3s;position:absolute;inset:0}.demo-dialog-stage>.demo-dialog-live{position:absolute;inset:0}.demo-dialog-stage:not(.is-live)>.demo-dialog-live,.demo-dialog-stage.is-live>.demo-dialog-still,.demo-dialog-stage.is-live>.demo-dialog-loading{opacity:0;pointer-events:none}.demo-dialog-hint{color:var(--muted);text-align:center;margin:0;font-size:14px}.demo-dialog-about{flex-direction:column;gap:10px;width:100%;max-width:60ch;padding:4px 4px 8px;display:flex}.demo-dialog-about p{color:var(--ink-2);margin:0;font-size:15.5px;line-height:1.5}.demo-dialog-about a{font:600 15px var(--font);color:var(--accent);border-bottom:1.5px solid color-mix(in srgb, currentColor 35%, transparent);align-self:flex-start;margin-top:4px;text-decoration:none}.demo-dialog-about a:hover{border-bottom-color:currentColor}.demo-dialog-about a:after{content:" →"}@media (orientation:landscape){.demo-dialog-hint{display:none}}.demo-dialog-body{align-content:center;gap:12px}.demo-dialog-loading{font:600 13px var(--font);color:var(--ink);background:var(--raised);border:1px solid var(--line);white-space:nowrap;border-radius:999px;padding:6px 12px;transition:opacity .3s;position:absolute;bottom:10px;left:50%;translate:-50%;box-shadow:0 4px 14px -6px #0000004d}html.demo-dialog-open{overflow:hidden}@media (width>=701px){.demo-dialog{border:1px solid var(--line);border-radius:16px;width:min(94vw,1680px);height:92dvh;margin:auto;overflow:hidden;box-shadow:0 30px 80px -20px #00000080}.demo-dialog-bar{padding-top:10px}.demo-dialog-body{height:calc(100% - 61px);padding:20px}.demo-dialog-stage{width:min(100%, calc((92dvh - 61px - 40px) * var(--ar,1.333)))}.demo-dialog-hint{display:none}.demo-dialog-body.has-about{grid-template-columns:minmax(0,1fr) 272px;place-items:center;column-gap:28px}.demo-dialog-body.has-about .demo-dialog-about{max-width:none;padding:0 8px 0 0}}@media (forced-colors:active){.demo-hint{border:1px solid buttontext}.demo,.media,.card,.fcard{border:1px solid canvastext}}@media (prefers-reduced-motion:reduce){.demo-hint,.demo>.demo-poster{transition:none}}