.layout[data-astro-cid-rgi463ch]{grid-template-areas:"head""switch""frames""texts";gap:24px;display:grid}.head[data-astro-cid-rgi463ch]{grid-area:head}.options[data-astro-cid-rgi463ch]{display:none}.frames[data-astro-cid-rgi463ch]{grid-area:frames;grid-template-columns:minmax(0,1fr);gap:24px;display:grid}.frame-phone[data-astro-cid-rgi463ch]{justify-items:center;display:grid}.frame-phone[data-astro-cid-rgi463ch] .phone{width:min(300px,78%)}.texts[data-astro-cid-rgi463ch]{grid-area:texts;gap:32px;display:grid}.text[data-astro-cid-rgi463ch] .body[data-astro-cid-rgi463ch]{margin-top:12px}.examples[data-astro-cid-rgi463ch]{flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none;display:flex}.examples[data-astro-cid-rgi463ch] li[data-astro-cid-rgi463ch]{min-height:30px;color:var(--color-soft);background:#ffffff08;border:1px solid #94a3b82e;border-radius:999px;align-items:center;padding:3px 12px;font-size:13.5px;display:inline-flex}.switch[data-astro-cid-rgi463ch],html.js .frame[data-astro-cid-rgi463ch]:not([data-active]),html.js .text[data-astro-cid-rgi463ch]:not([data-active]){display:none}html.js .frame[data-astro-cid-rgi463ch],html.js .text[data-astro-cid-rgi463ch]{animation:.25s both shown}@keyframes shown{0%{opacity:0}}html.js .switch[data-astro-cid-rgi463ch]{border:1px solid var(--color-line-strong);background:#0d1320cc;border-radius:999px;grid-area:switch;justify-self:start;gap:4px;width:fit-content;padding:4px;display:flex}.switch[data-astro-cid-rgi463ch] button[data-astro-cid-rgi463ch]{height:40px;font:inherit;white-space:nowrap;color:var(--color-muted);cursor:pointer;transition:color .2s ease, background-color .2s ease, transform .16s var(--ease-out-strong);background:0 0;border:0;border-radius:999px;padding:0 16px;font-size:14.5px;font-weight:500}.switch[data-astro-cid-rgi463ch] button[data-astro-cid-rgi463ch]:active{transform:scale(.97)}.switch[data-astro-cid-rgi463ch] button[data-astro-cid-rgi463ch][aria-pressed=true]{color:var(--color-ink);background:#fff}@media (width>=60rem){.layout[data-astro-cid-rgi463ch]{grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-areas:"head frames""options frames";align-items:center;gap:28px 56px}.head[data-astro-cid-rgi463ch]{align-self:end}.options[data-astro-cid-rgi463ch]{grid-area:options;align-self:start;gap:10px;display:grid}.texts[data-astro-cid-rgi463ch],html.js .switch[data-astro-cid-rgi463ch]{display:none}html.js .frame[data-astro-cid-rgi463ch],html.js .frame[data-astro-cid-rgi463ch]:not([data-active]){opacity:0;visibility:hidden;grid-area:1/1;align-self:center;transition:opacity .25s,visibility .25s;animation:none;display:block}html.js .frame-phone[data-astro-cid-rgi463ch],html.js .frame-phone[data-astro-cid-rgi463ch]:not([data-active]){display:grid}html.js .frame[data-astro-cid-rgi463ch][data-active]{opacity:1;visibility:visible}.frame-phone[data-astro-cid-rgi463ch] .phone{width:36.1%}.option[data-astro-cid-rgi463ch]{border:1px solid var(--color-line);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s ease, background-color .2s ease, transform .16s var(--ease-out-strong);background:#0a0e18db;border-radius:16px;gap:6px;padding:16px 18px 18px 46px;display:grid;position:relative}.option[data-astro-cid-rgi463ch]:active{transform:scale(.985)}.option[data-astro-cid-rgi463ch]:before{content:"";box-sizing:border-box;border:1.5px solid #94a3b880;border-radius:999px;width:16px;height:16px;transition:border-color .2s,border-width .2s;position:absolute;top:20px;left:18px}.option[data-astro-cid-rgi463ch][aria-pressed=true]{background:#161d2ef0;border-color:#ffffff47}.option[data-astro-cid-rgi463ch][aria-pressed=true]:before{border-width:5px;border-color:#fff}.option-label[data-astro-cid-rgi463ch]{letter-spacing:-.01em;color:var(--color-soft);font-size:1.15rem;font-weight:500;transition:color .2s}.option-text[data-astro-cid-rgi463ch]{color:var(--color-subtle);text-wrap:pretty;font-size:15px;line-height:1.6;transition:color .2s}.option[data-astro-cid-rgi463ch][aria-pressed=true] .option-label[data-astro-cid-rgi463ch]{color:#fff}.option[data-astro-cid-rgi463ch][aria-pressed=true] .option-text[data-astro-cid-rgi463ch]{color:var(--color-muted)}}@media (prefers-reduced-motion:reduce){html.js .frame[data-astro-cid-rgi463ch],html.js .text[data-astro-cid-rgi463ch]{animation:none}}@media (hover:hover) and (pointer:fine){.switch[data-astro-cid-rgi463ch] button[data-astro-cid-rgi463ch]:not([aria-pressed=true]):hover,.option[data-astro-cid-rgi463ch]:not([aria-pressed=true]):hover .option-label[data-astro-cid-rgi463ch]{color:#fff}.option[data-astro-cid-rgi463ch]:not([aria-pressed=true]):hover{border-color:var(--color-line-strong)}}