.demo,.media,#modes-stage,.stage-hero,.cb-shot{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}.cb-shot{margin:0}.cb-shot img,.media.shot img{width:100%;height:auto;display:block}.cb-step img{aspect-ratio:1408/980;object-fit:cover;object-position:top center}.shot-d{display:none}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .shot-l{display:none}:root:not([data-theme=light]) .shot-d{display:block}}:root[data-theme=dark] .shot-l{display:none}:root[data-theme=dark] .shot-d{display:block}.hero{isolation:isolate;flex-direction:column;align-items:stretch;max-width:1400px;margin:0 auto;padding-block:20px 36px;padding-inline:24px;display:flex;position:relative}.hero-top,.hero-stage{display:contents}.hero h1{order:1;font-size:clamp(34px,9vw,44px);line-height:1.03}.hero .lede{order:2;max-width:46ch;margin-top:14px;font-size:clamp(17px,1.35vw,19px);line-height:1.5}.hero .stage-box{order:3}.hero .beats-row{order:4}.hero .cta{order:5;align-items:flex-start;margin-top:20px}.hero .cta-row{justify-content:flex-start}.hero .btn.dl{min-width:0}.cta{flex-direction:column;align-items:center;gap:10px;display:flex}.fine{color:var(--muted);font-size:13px}.stage-box{width:100%;margin-top:22px;position:relative}.stage-hero{z-index:1;aspect-ratio:820/940;width:100%;position:relative}.hero-glow{z-index:0;pointer-events:none;background:radial-gradient(closest-side, color-mix(in srgb, var(--fill) 12%, transparent), transparent 80%);filter:blur(12px);height:60%;transition:background .5s;position:absolute;bottom:-30px;left:-6%;right:-6%}@media (forced-colors:active){.hero-glow{display:none}}.stage-hero{transition:background-color .5s,opacity .4s}.stage-hero.loading{opacity:0}.hero-glow{opacity:1;transition:background .5s,opacity .4s}.stage-box:has(>.stage-hero.loading) .hero-glow{opacity:0}@media (prefers-reduced-motion:reduce){.stage-hero,.hero-glow{transition: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 (prefers-reduced-motion:reduce){.hero-try{animation:none}}.stage-box .ctl{z-index:1;opacity:0;visibility:hidden;margin-top:12px;transition:opacity .3s,visibility .3s;position:relative}.stage-box.in-layouts .ctl{opacity:1;visibility:visible}.beats-row{align-items:flex-start;gap:16px;margin-top:14px;padding-bottom:30px;display:flex;position:relative}.beats{flex:1;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none;display:grid}.beats button{--p:0;width:100%;color:var(--muted);font:500 14px/1.3 var(--font);text-align:left;cursor:pointer;background:0 0;border:0;flex-direction:column;gap:8px;padding:6px 0;transition:color .2s;display:flex}.beats button:hover{color:var(--ink)}.beats button[aria-current]{color:var(--ink);font-weight:600}.beat-bar{background:color-mix(in srgb, var(--ink) 12%, transparent);border-radius:2px;height:3px;display:block;position:relative;overflow:hidden}.beat-bar i{background:var(--accent);transform-origin:0;scale:var(--p) 1;transition:background-color .5s;position:absolute;inset:0}.beats button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}.beats .beat-t{text-align:left;opacity:0;pointer-events:none;font-size:16px;transition:opacity .25s;position:absolute;top:26px;left:0;right:0}.beats button[aria-current] .beat-t{opacity:1}.beats-row .ghost{flex:none;margin-top:-2px}@media (prefers-reduced-motion:reduce){.beats button,.beats .beat-t{transition:none}}@media (forced-colors:active){.beat-bar{outline:1px solid canvastext}.beat-bar i{background:highlight}}@media (width>=701px){.hero{text-align:center;grid-template-areas:"top""stage""beats";justify-items:center;padding-block:clamp(24px,4vh,44px) 36px;display:grid}.hero-top{flex-direction:column;grid-area:top;align-items:center;display:flex}.hero h1{max-width:24ch;font-size:clamp(36px,4.2vw,56px)}.hero .lede{max-width:60ch}.hero .cta,.hero .cta-row{justify-content:center;align-items:center}.hero .cta{margin-top:22px}.stage-box{grid-area:stage;width:min(100%,max(560px,160svh - 608px));margin-top:26px}.stage-hero{aspect-ratio:1280/800}.beats-row{grid-area:beats;width:min(100%,max(560px,160svh - 608px));padding-bottom:0}.beats{gap:14px}.beats .beat-t{opacity:1;pointer-events:auto;font-size:13.5px;position:static}}.layouts{max-width:1200px;margin:0 auto;padding:72px 24px 0}.lay{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start;gap:48px;display:grid}.lay-stage{top:var(--stage-top,76px);flex-direction:column;gap:12px;display:flex;position:sticky}#modes-stage{aspect-ratio:16/10}.steps{position:relative}.opening{isolation:isolate;position:relative}.opening:before{content:"";z-index:-1;pointer-events:none;background:color-mix(in srgb, var(--m1) 9%, transparent);opacity:0;transition:opacity .9s;position:absolute;inset:0}.opening.in-focus:before{opacity:1}.opening.in-focus .lay-stage{background-color:color-mix(in srgb, var(--m1) 9%, var(--bg))}.steps ol:before{content:"";background:color-mix(in srgb, var(--ink) 12%, transparent);border-radius:2px;width:3px;position:absolute;top:0;bottom:0;left:0}.steps .thumb{background:var(--sec,var(--accent));opacity:0;border-radius:2px;width:3px;height:0;transition:top .55s cubic-bezier(.3,0,0,1),height .55s cubic-bezier(.3,0,0,1),opacity .3s,background-color .5s;position:absolute;top:0;left:0}.steps .thumb.on{opacity:1}.steps ol{flex-direction:column;margin:0;padding:0 0 0 24px;list-style:none;display:flex;position:relative}.step{min-height:56svh;display:flex}.step button{text-align:left;color:var(--muted);font:15px/1.5 var(--font);cursor:pointer;background:0 0;border:0;flex-direction:column;flex:1;justify-content:center;padding:0;transition:color .3s;display:flex}.step-t{flex-direction:column;gap:6px;padding-block:10px;display:flex}.step-t b{letter-spacing:-.01em;font-size:20px}.step-t small{font-size:13px}.step button:hover,.step.on button{color:var(--ink-2)}.step.on .step-t b{color:var(--ink)}.step button:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}.ctl{flex-direction:column;align-items:center;gap:6px;display:flex}.ctl .row{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 18px;display:flex}.ctl button{font:600 14px var(--font);color:var(--muted);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;border-radius:0;padding:4px 0;transition:color .15s,border-color .15s}.ctl button:hover{color:var(--ink)}.ctl button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--sec,var(--accent))}.ctl button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}.mode-note{color:var(--muted);text-align:center;max-width:60ch;min-height:3em;font-size:14px;line-height:1.5}@media (prefers-reduced-motion:reduce){.ctl button,.step button,.steps .thumb,.stage-box .ctl,.opening:before{transition:none}}@media (forced-colors:active){.steps ol:before{outline:1px solid canvastext}.steps .thumb{background:highlight}}@media (width<=900px){.lay{grid-template-columns:1fr;gap:0}.lay-stage{top:calc(env(safe-area-inset-top,0px) + 60px);z-index:5;background:var(--bg);order:-1;padding:10px 0 12px;transition:background-color .5s}.step{min-height:42svh}.step-t b{font-size:18px}}@media (width>=1100px) and (height>=640px){.opening{text-align:left;grid-template-columns:minmax(280px,300px) minmax(0,1fr);grid-template-areas:"top stage""beats stage""steps stage";align-items:start;column-gap:clamp(28px,2.6vw,40px);padding:clamp(20px,4vh,56px) max(12px,50vw - 820px) 72px max(24px,50vw - 576px);display:grid}.hero,.hero-top,.hero-stage,.layouts,.lay{text-align:left;display:contents}.hero-top{flex-direction:column;grid-area:top;align-items:flex-start;display:flex}.hero h1{text-wrap:balance;max-width:none;font-size:clamp(34px,2.65vw,40px)}.hero .lede{max-width:none;font-size:17px}.hero .cta{align-items:flex-start}.hero .cta-row{justify-content:flex-start}.stage-box{top:var(--stage-top,76px);grid-area:stage;place-self:start end;width:100%;max-width:calc(160svh - 288px);margin-top:0;position:sticky}.beats-row{flex-direction:row;grid-area:beats;align-items:flex-end;gap:16px;width:100%;margin-top:24px}.beats{flex-direction:column;flex:0 auto;gap:0;display:flex}.beats button{flex-direction:row;align-items:stretch;gap:14px;padding:0;font-size:15.5px}.beats .beat-t{padding-block:6px}.beat-bar{border-radius:0;flex:none;width:3px;height:auto}.beats li:first-child .beat-bar{border-radius:2px 2px 0 0}.beats li:last-child .beat-bar{border-radius:0 0 2px 2px}.beat-bar i{transform-origin:50% 0;scale:1 var(--p)}.beats-row .ghost{flex:none;margin:0 0 4px}.layouts .head h2{font-size:clamp(28px,2.4vw,34px)}.steps{grid-area:steps;margin-top:40px}.lay-stage{display:none}}.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}.grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:dense;gap:20px;display:grid}.fcard{background:var(--raised);border:1px solid var(--line);box-shadow:var(--lift);border-radius:24px;flex-direction:column;grid-column:span 2;padding:10px 10px 18px;display:flex}.fcard.w3{grid-column:span 3}.fcard.w4{grid-column:span 4}.fcard.w6{grid-column:span 6}.fcard.tall{grid-row:span 2}.fcard .media{aspect-ratio:var(--r,1.6);background:color-mix(in srgb, var(--sec,var(--accent)) 8%, var(--panel));box-shadow:none;background-image:none;border-radius:14px;overflow:hidden}.media>.demo{width:100%;height:100%;box-shadow:none;background:0 0;border-radius:0}.media.shot img{object-fit:cover;width:100%;height:100%;display:block}.fcard .cap{flex-direction:column;gap:5px;padding:14px 8px 0;display:flex}.fcard .cap b{letter-spacing:-.01em;font-size:17.5px}.fcard .cap span{color:var(--ink-2);font-size:15px;line-height:1.5}.fcard .cap a{font:600 14px var(--font);color:var(--sec,var(--accent));border-bottom:1.5px solid color-mix(in srgb, currentColor 35%, transparent);align-self:flex-start;margin-top:4px;text-decoration:none}.fcard .cap a:hover{border-bottom-color:currentColor}.fcard .cap a:after{content:" →"}.fcard.side{flex-direction:row-reverse;align-items:center;gap:20px;padding:10px}.fcard.side .media{flex:0 0 60%}.fcard.w6.side .media{flex-basis:64%}.fcard.side .cap{flex:1;min-width:0;padding:12px 8px 12px 18px}.fcard.w3 .cap b{font-size:19px}.fcard.side .cap b{font-size:21px}.fcard.w6 .cap b{font-size:24px}.fcard.side .cap span{font-size:16px}.fcard.tall .media{aspect-ratio:auto;flex:1;justify-content:center;min-height:0;display:flex}.fcard.tall .media>.demo{width:auto;max-width:100%;height:100%}@media (width<=1000px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}.fcard.w3{grid-column:span 2}.fcard.w6{grid-column:span 4}.fcard.side .media{flex-basis:56%}}@media (width<=700px){.fcard.side{flex-direction:column;align-items:stretch;gap:0;padding:10px 10px 18px}.fcard.side .media{flex:none}.fcard.side .cap{padding:14px 8px 0}.fcard.side .cap b,.fcard.w6 .cap b{font-size:18px}.fcard.side .cap span{font-size:15px}}@media (width<=600px){.grid{grid-template-columns:1fr;gap:18px}.fcard,.fcard.w3,.fcard.w4,.fcard.w6{grid-column:auto}.fcard.tall{grid-row:auto}.fcard.tall .media{aspect-ratio:var(--r,1.6);flex:none;display:block}.fcard.tall .media>.demo{width:100%;height:100%}}.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}.ai-control{align-items:flex-start;gap:18px;margin-top:34px;padding:18px 20px;display:flex}.ai-control svg{width:22px;height:22px;color:var(--sec,var(--accent));flex:none;margin-top:2px}.ai-control p{color:var(--ink-2)}@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}.made-coda{text-align:left;max-width:560px;color:inherit;align-items:center;gap:26px;margin-top:44px;text-decoration:none;display:flex}.made-coda-t{color:var(--ink-2);flex-direction:column;gap:4px;font-size:15px;display:flex}.made-coda-t b{color:var(--ink);font-size:17px}.made-coda-t .more{color:var(--accent);margin-top:4px;font-weight:600}.made-coda:hover .more{border-bottom-color:currentColor}@media (width<=600px){.made-coda{text-align:center;flex-direction:column;gap:22px}.made-coda-t{align-items:center}.made-coda-t .more{align-self:center}}#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{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.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}}