.demo[data-astro-cid-trxcs2lc]{margin:0}.frame[data-astro-cid-trxcs2lc]{border:1px solid var(--line);box-shadow:var(--shadow);width:min(100%, calc(84vh * var(--ar)));background:#fff;border-radius:16px;margin-inline:auto;position:relative;overflow:hidden}.frame[data-astro-cid-trxcs2lc] img[data-astro-cid-trxcs2lc]{object-fit:contain;object-position:top;width:100%;height:100%;position:absolute;inset:0}.before[data-astro-cid-trxcs2lc]{clip-path:inset(0 calc(100% - var(--pos)) 0 0);position:absolute;inset:0}.handle[data-astro-cid-trxcs2lc]{top:0;bottom:0;left:var(--pos);background:var(--blue);pointer-events:none;width:2px;position:absolute;transform:translate(-1px)}.handle[data-astro-cid-trxcs2lc] span[data-astro-cid-trxcs2lc]{background:var(--blue);border-radius:50%;width:40px;height:40px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 14px #00000040}.handle[data-astro-cid-trxcs2lc] span[data-astro-cid-trxcs2lc]:before,.handle[data-astro-cid-trxcs2lc] span[data-astro-cid-trxcs2lc]:after{content:"";border:6px solid #0000;position:absolute;top:50%;transform:translateY(-50%)}.handle[data-astro-cid-trxcs2lc] span[data-astro-cid-trxcs2lc]:before{border-right-color:#fff;left:6px}.handle[data-astro-cid-trxcs2lc] span[data-astro-cid-trxcs2lc]:after{border-left-color:#fff;right:6px}input[data-astro-cid-trxcs2lc][type=range]{opacity:0;cursor:ew-resize;width:100%;height:100%;margin:0;position:absolute;inset:0}.tag[data-astro-cid-trxcs2lc]{font:600 .72rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#fff;pointer-events:none;background:#17181cc7;border-radius:999px;padding:7px 10px;position:absolute;top:12px}.tb[data-astro-cid-trxcs2lc]{left:12px}.ta[data-astro-cid-trxcs2lc]{background:#1c3a8a;right:12px}figcaption[data-astro-cid-trxcs2lc]{margin-top:12px}.hero[data-astro-cid-m3zpgalb]{padding:48px 0 72px}@media (width>=900px){.hero[data-astro-cid-m3zpgalb]{padding:72px 0 104px}}.hero-grid[data-astro-cid-m3zpgalb]{align-items:center;gap:40px;display:grid}@media (width>=980px){.hero-grid[data-astro-cid-m3zpgalb]{grid-template-columns:1.02fr 1fr;gap:64px}}.hero[data-astro-cid-m3zpgalb] h1[data-astro-cid-m3zpgalb] em[data-astro-cid-m3zpgalb]{color:var(--blue);font-style:italic}.pitch[data-astro-cid-m3zpgalb]{gap:18px;max-width:60ch;margin:24px 0 30px;display:grid}.hook[data-astro-cid-m3zpgalb]{border-left:3px solid var(--gold);font:500 clamp(1.1rem, 1.6vw, 1.3rem)/1.55 var(--sans);color:var(--ink);margin:0;padding-left:16px}.hook[data-astro-cid-m3zpgalb] s{color:var(--ink-3);text-decoration-thickness:2px}.hook[data-astro-cid-m3zpgalb] mark{color:#12162a;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:#ffd65c;border-radius:4px;padding:0 .22em}.hook[data-astro-cid-m3zpgalb] strong{color:var(--blue);letter-spacing:.02em;font-weight:800}.flow[data-astro-cid-m3zpgalb]{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px;gap:12px;margin:0;padding:16px 18px;list-style:none;display:grid}.flow[data-astro-cid-m3zpgalb] li[data-astro-cid-m3zpgalb]{color:var(--ink-2);grid-template-columns:28px 1fr;align-items:start;gap:12px;line-height:1.5;display:grid}.flow[data-astro-cid-m3zpgalb] .n[data-astro-cid-m3zpgalb]{background:var(--blue-soft);width:28px;height:28px;color:var(--blue);font:700 .85rem/1 var(--sans);border-radius:50%;place-items:center;display:grid}.fmts[data-astro-cid-m3zpgalb]{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.fmt[data-astro-cid-m3zpgalb]{font:600 .72rem/1 var(--sans);letter-spacing:.06em;border:1px solid var(--line-2);color:var(--ink-2);border-radius:6px;padding:5px 8px}.note[data-astro-cid-m3zpgalb]{margin-top:14px}.visual[data-astro-cid-m3zpgalb]{justify-self:center;width:100%;max-width:560px}.steps[data-astro-cid-m3zpgalb]{gap:28px;margin:0;padding:0;list-style:none;display:grid}@media (width>=820px){.steps[data-astro-cid-m3zpgalb]{grid-template-columns:repeat(3,1fr);gap:36px}}.steps[data-astro-cid-m3zpgalb] li[data-astro-cid-m3zpgalb]{border-top:1px solid var(--line-2);padding-top:22px}.steps[data-astro-cid-m3zpgalb] .n[data-astro-cid-m3zpgalb]{font:italic 600 2.6rem/1 var(--serif);color:var(--blue);margin-bottom:12px;display:block}.steps[data-astro-cid-m3zpgalb] p[data-astro-cid-m3zpgalb]{color:var(--ink-2)}.styles-sec[data-astro-cid-m3zpgalb]{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.style[data-astro-cid-m3zpgalb] h3[data-astro-cid-m3zpgalb]{margin-bottom:8px}.sample[data-astro-cid-m3zpgalb]{border-top:1px dashed var(--line-2);margin-top:22px;padding-top:18px}.src[data-astro-cid-m3zpgalb]{margin-top:18px}.feats[data-astro-cid-m3zpgalb]{gap:32px 40px;display:grid}@media (width>=720px){.feats[data-astro-cid-m3zpgalb]{grid-template-columns:repeat(2,1fr)}}@media (width>=1040px){.feats[data-astro-cid-m3zpgalb]{grid-template-columns:repeat(4,1fr);gap:32px}}.feat[data-astro-cid-m3zpgalb]{border-left:2px solid var(--blue);padding-left:20px}.feat[data-astro-cid-m3zpgalb] h3[data-astro-cid-m3zpgalb]{margin-bottom:8px;font-size:1.45rem}.lang-sec[data-astro-cid-m3zpgalb]{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.langs[data-astro-cid-m3zpgalb]{flex-wrap:wrap;gap:10px;margin:0 0 24px;padding:0;list-style:none;display:flex}.langs[data-astro-cid-m3zpgalb] li[data-astro-cid-m3zpgalb]{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-weight:500}.more[data-astro-cid-m3zpgalb]{margin-top:24px}.final[data-astro-cid-m3zpgalb]{text-align:center}.final-in[data-astro-cid-m3zpgalb]{max-width:760px}.final[data-astro-cid-m3zpgalb] .lead[data-astro-cid-m3zpgalb]{margin:0 auto 28px}