.demo{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:28px 36px;display:flex}.demo-row{align-items:flex-end;gap:14px;display:flex}.demo-bar{background:#e4e4e4;border-radius:4px;flex-shrink:0;width:4px;height:26px;margin-bottom:18px}.demo-row.good .demo-bar{background:#171a1b}.demo-label{font-family:var(--font-mono);letter-spacing:.02em;color:var(--muted);margin:0 0 8px;font-size:11px;display:block}.kp{padding:3px;display:inline-flex}.kp button{width:64px;font-family:var(--font-mono);cursor:pointer;border:0;padding:10px 0;font-size:20px;font-weight:300;line-height:1.645}.good .kp button:active{transform:translateY(1px)}.bad .kp{border-radius:4px;gap:8px;margin:2px}.bad .kp button{box-sizing:border-box;color:#727272;background:#e9e9e9;border:1px solid #dcdcdc;border-radius:7px;padding:9px 0}.bad .kp button[aria-pressed=true]{color:#484848;background:#fff}.good .kp{border-radius:4px;gap:6px;margin:2px}.good .kp button{color:#727272;background:#e9e9e9;border-radius:7px;transition:background .15s,color .15s,box-shadow .15s}.good .kp button[aria-pressed=true]{color:#484848;background:linear-gradient(135deg,#fff 0%,#fdfdfd 55%,#f3f3f3 100%);box-shadow:0 2px 4px #00000014,0 0 2px #00000024,inset 0 -2px 3px #00000017,inset 2px 2px 3px #fffc}.good.dark .kp button[aria-pressed=true]{color:#fcfcfc;background:linear-gradient(135deg,#4a4a4a 0%,#3a3a3a 55%,#2e2e2e 100%);box-shadow:0 2px 4px #0000002e,0 0 2px #0000004d,inset 0 -2px 3px #00000059,inset 2px 2px 3px #ffffff24}.good.outline .kp button{box-sizing:border-box;border:1px solid #dcdcdc;padding:9px 0}.good.outline .kp button[aria-pressed=false]{color:#8a8a8a;background:#fcfcfc}.good.outline .kp button[aria-pressed=true]{border-color:#0000}@media (prefers-reduced-motion:reduce){.good .kp button{transition:none}}.lab-layout[data-astro-cid-5vqpszj5]{box-sizing:border-box;flex:1;grid-template-rows:minmax(0,1fr);grid-template-columns:240px 1fr;align-items:stretch;width:100%;height:100%;min-height:0;padding-top:60px;transition:grid-template-columns .24s;display:grid}.lab-side[data-astro-cid-5vqpszj5]{border-right:1px solid var(--hair);flex-direction:column;gap:22px;min-height:0;padding:36px 24px;display:flex;overflow:hidden}.lab-layout[data-astro-cid-5vqpszj5].is-collapsed{grid-template-columns:64px 1fr}.lab-side-title[data-astro-cid-5vqpszj5]{justify-content:center;margin-bottom:8px;display:flex}.lab-side-toggle[data-astro-cid-5vqpszj5]{width:36px;height:36px;color:var(--ink-strong);cursor:pointer;background:#f1f1f1;border:0;border-radius:8px;place-items:center;padding:0;transition:background .16s;display:grid}.lab-side-toggle[data-astro-cid-5vqpszj5]:hover{background:#e8e8e8}.lab-side-toggle[data-astro-cid-5vqpszj5].is-active{background:#e2e2e2}.lab-side-toggle[data-astro-cid-5vqpszj5]:focus-visible{outline-offset:2px;outline:2px solid #0070e9}.lab-side-list[data-astro-cid-5vqpszj5]{flex-direction:column;gap:22px;transition:opacity .16s,visibility linear;display:flex}.lab-overview[data-astro-cid-5vqpszj5]{gap:36px}.lab-ov-block[data-astro-cid-5vqpszj5]{flex-direction:column;gap:12px;display:flex}.lab-ov-block[data-astro-cid-5vqpszj5] h3[data-astro-cid-5vqpszj5]{font-family:var(--font-head);color:var(--ink-strong);font-size:15px;font-weight:500}.lab-ov-steps[data-astro-cid-5vqpszj5]{counter-reset:step;flex-direction:column;gap:8px;list-style:none;display:flex}.lab-ov-steps[data-astro-cid-5vqpszj5] li[data-astro-cid-5vqpszj5]{counter-increment:step;font-size:var(--p-size);line-height:var(--p-lh);color:var(--p-color);gap:12px;display:flex}.lab-ov-steps[data-astro-cid-5vqpszj5] li[data-astro-cid-5vqpszj5]:before{content:counter(step);font-family:var(--font-mono);color:var(--muted);font-size:11px;line-height:21px}.lab-ov-copy[data-astro-cid-5vqpszj5]{flex-direction:column;gap:10px;display:flex}.lab-ov-copy[data-astro-cid-5vqpszj5]>div[data-astro-cid-5vqpszj5]{grid-template-columns:92px 1fr;align-items:baseline;gap:16px;display:grid}.lab-kind[data-astro-cid-5vqpszj5]{font-family:var(--font-mono);font-size:12px}.lab-kind[data-astro-cid-5vqpszj5][data-kind=prompt]{color:#6a58d0}.lab-kind[data-astro-cid-5vqpszj5][data-kind=html]{color:#cc5f31}.lab-kind[data-astro-cid-5vqpszj5][data-kind=react]{color:#247fae}.lab-kind[data-astro-cid-5vqpszj5][data-kind=tailwind]{color:#1f8e78}.lab-ov-copy[data-astro-cid-5vqpszj5] dd[data-astro-cid-5vqpszj5],.lab-ov-text[data-astro-cid-5vqpszj5]{font-size:var(--p-size);line-height:var(--p-lh);color:var(--p-color)}.lab-side-collapse[data-astro-cid-5vqpszj5]{font-family:var(--font-mono);color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px;align-items:center;gap:8px;margin-top:auto;padding:8px 6px;font-size:11px;transition:background .16s,color .16s;display:flex}.lab-side-collapse[data-astro-cid-5vqpszj5]:hover{color:var(--ink-strong);background:#f1f1f1}.lab-side-collapse[data-astro-cid-5vqpszj5]:focus-visible{outline-offset:2px;outline:2px solid #0070e9}.lab-side-collapse[data-astro-cid-5vqpszj5] .ico-open[data-astro-cid-5vqpszj5]{display:none}.lab-layout[data-astro-cid-5vqpszj5].is-collapsed .lab-side-collapse[data-astro-cid-5vqpszj5]{justify-content:center;padding:8px 0}.lab-layout[data-astro-cid-5vqpszj5].is-collapsed .lab-side-collapse[data-astro-cid-5vqpszj5] .ico-close[data-astro-cid-5vqpszj5]{display:none}.lab-layout[data-astro-cid-5vqpszj5].is-collapsed .lab-side-collapse[data-astro-cid-5vqpszj5] .ico-open[data-astro-cid-5vqpszj5]{display:block}.lab-layout[data-astro-cid-5vqpszj5].is-collapsed .lab-side-collapse-text[data-astro-cid-5vqpszj5]{display:none}.lab-layout[data-astro-cid-5vqpszj5].is-collapsed .lab-side[data-astro-cid-5vqpszj5]{padding-left:14px;padding-right:14px}.lab-layout[data-astro-cid-5vqpszj5].is-collapsed .lab-side-list[data-astro-cid-5vqpszj5]{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s,visibility 0s linear .12s}.lab-side-group[data-astro-cid-5vqpszj5]{flex-direction:column;gap:4px;display:flex}.lab-side-label[data-astro-cid-5vqpszj5]{font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-size:11px}.lab-side-item[data-astro-cid-5vqpszj5]{font-family:var(--font-head);color:var(--muted);border-right:2px solid #0000;margin-right:-24px;padding:6px 24px 6px 0;font-size:14px;font-weight:400;text-decoration:none;transition:color .16s}.lab-side-item[data-astro-cid-5vqpszj5]:hover{color:var(--ink-strong)}.lab-side-item[data-astro-cid-5vqpszj5].is-active{color:#000;border-right-color:#000;font-weight:500}.lab-side-title-text[data-astro-cid-5vqpszj5]{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.lab-main[data-astro-cid-5vqpszj5]{min-width:0;min-height:0;padding:36px 48px 64px;overflow-y:auto}.lab-panel[data-astro-cid-5vqpszj5]{flex-direction:column;gap:28px;padding-bottom:40px;display:flex}.lab-panel[data-astro-cid-5vqpszj5][hidden]{display:none}.lab-panel-head[data-astro-cid-5vqpszj5]{flex-direction:column;gap:12px;display:flex}.lab-panel-head[data-astro-cid-5vqpszj5] h2[data-astro-cid-5vqpszj5]{font-family:var(--font-head);color:var(--ink-strong);font-size:20px;font-weight:500}.lab-stage[data-astro-cid-5vqpszj5]{padding:8px 0}.lab-why[data-astro-cid-5vqpszj5]{font-size:var(--p-size);line-height:var(--p-lh);color:var(--p-color)}.lab-more{width:fit-content;font-family:var(--font-mono);color:#0070e9;cursor:pointer;background:0 0;border:0;padding:0;font-size:12px;display:none}.lab-more:hover{color:#0058b8}.lab-sound-row[data-astro-cid-5vqpszj5]{border:1px solid var(--hair);border-radius:6px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding:10px 14px;display:flex}.lab-seg[data-astro-cid-5vqpszj5]{background:#f1f1f1;border-radius:6px;gap:2px;padding:2px;display:inline-flex}.lab-seg[data-astro-cid-5vqpszj5][hidden]{display:none}.lab-sound[data-astro-cid-5vqpszj5]{cursor:pointer;width:fit-content;color:var(--muted);align-items:center;gap:10px;font-size:11px;display:inline-flex}.lab-sound-text[data-astro-cid-5vqpszj5]{color:var(--ink-strong)}.lab-sound[data-astro-cid-5vqpszj5] input[data-astro-cid-5vqpszj5]{opacity:0;pointer-events:none;position:absolute}.lab-switch[data-astro-cid-5vqpszj5]{background:#e4e4e4;border-radius:999px;flex-shrink:0;width:28px;height:16px;transition:background .16s;position:relative}.lab-switch[data-astro-cid-5vqpszj5]:after{content:"";background:#fff;border-radius:50%;width:12px;height:12px;transition:transform .16s;position:absolute;top:2px;left:2px}.lab-sound[data-astro-cid-5vqpszj5] input[data-astro-cid-5vqpszj5]:checked+.lab-switch[data-astro-cid-5vqpszj5]{background:#171a1b}.lab-sound[data-astro-cid-5vqpszj5] input[data-astro-cid-5vqpszj5]:checked+.lab-switch[data-astro-cid-5vqpszj5]:after{transform:translate(12px)}.lab-sound[data-astro-cid-5vqpszj5] input[data-astro-cid-5vqpszj5]:focus-visible+.lab-switch[data-astro-cid-5vqpszj5]{outline-offset:2px;outline:2px solid #0070e9}.lab-seg-btn[data-astro-cid-5vqpszj5]{font-family:var(--font-mono);color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:4px;padding:4px 10px;font-size:11px;transition:background .16s,color .16s}.lab-seg-btn[data-astro-cid-5vqpszj5]:hover{color:var(--ink-strong)}.lab-seg-btn[data-astro-cid-5vqpszj5][aria-pressed=true]{color:var(--ink-strong);background:#fff;box-shadow:0 0 0 1px #e4e4e4}.lab-copy-list[data-astro-cid-5vqpszj5]{flex-direction:column;gap:16px;width:fit-content;min-width:260px;display:flex}.lab-copy-group[data-astro-cid-5vqpszj5]{flex-direction:column;align-items:flex-start;gap:8px;display:flex}.lab-copy-top[data-astro-cid-5vqpszj5]{border-bottom:1px solid var(--hair);justify-content:space-between;align-items:center;gap:24px;padding-bottom:8px;display:flex}.lab-copy-title[data-astro-cid-5vqpszj5]{font-family:var(--font-head);color:var(--ink-strong);font-size:14px;font-weight:500}.lab-copy-sound[data-astro-cid-5vqpszj5]{font-family:var(--font-mono);color:#9a9a9a;align-items:center;gap:4px;font-size:10px;display:inline-flex}.lab-copy-sound[data-astro-cid-5vqpszj5] .ico-off[data-astro-cid-5vqpszj5],.lab-copy-sound[data-astro-cid-5vqpszj5][data-state=off] .ico-on[data-astro-cid-5vqpszj5]{display:none}.lab-copy-sound[data-astro-cid-5vqpszj5][data-state=off] .ico-off[data-astro-cid-5vqpszj5]{display:block}.lab-copy-label[data-astro-cid-5vqpszj5]{font-family:var(--font-mono);letter-spacing:.04em;color:var(--muted);font-size:11px}.lab-copy[data-astro-cid-5vqpszj5]{flex-wrap:wrap;gap:8px;display:flex}.lab-copy-btn[data-astro-cid-5vqpszj5]{height:28px;font-family:var(--font-mono);color:var(--ink);cursor:pointer;background:0 0;border:1px solid #e4e4e4;border-radius:4px;padding:0 12px;font-size:11px;transition:background .16s,color .16s}.lab-copy-btn[data-astro-cid-5vqpszj5]:hover{background:#f3f3f3}.lab-copy-btn[data-astro-cid-5vqpszj5][data-kind=prompt]{color:#6a58d0}.lab-copy-btn[data-astro-cid-5vqpszj5][data-kind=html]{color:#cc5f31}.lab-copy-btn[data-astro-cid-5vqpszj5][data-kind=react]{color:#247fae}.lab-copy-btn[data-astro-cid-5vqpszj5][data-kind=tailwind]{color:#1f8e78}.lab-copy-btn[data-astro-cid-5vqpszj5].done{color:var(--ink-strong)!important}@media (prefers-reduced-motion:reduce){.lab-layout[data-astro-cid-5vqpszj5],.lab-side-list[data-astro-cid-5vqpszj5]{transition:none}}.lab-backdrop[data-astro-cid-5vqpszj5],.lab-drawer-close[data-astro-cid-5vqpszj5],.lab-open[data-astro-cid-5vqpszj5],.lab-browse[data-astro-cid-5vqpszj5]{display:none}.lab-title-row[data-astro-cid-5vqpszj5]{align-items:center;gap:10px;display:flex}@media (width<=860px){.lab-why[data-astro-cid-5vqpszj5].is-clamped{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.lab-more:not([hidden]){display:block}.lab-layout[data-astro-cid-5vqpszj5]{height:auto;padding-top:60px;display:block}.lab-layout[data-astro-cid-5vqpszj5].is-collapsed{display:block}.lab-side[data-astro-cid-5vqpszj5]{z-index:35;background:var(--bg);border-right:1px solid var(--hair);visibility:hidden;width:min(300px,84vw);height:auto;padding:20px;transition:transform .24s;position:fixed;top:60px;bottom:42px;left:0;overflow-y:auto;transform:translate(-102%)}.lab-side[data-astro-cid-5vqpszj5].is-open{visibility:visible;transform:none;box-shadow:10px 0 30px #00000014}.lab-layout[data-astro-cid-5vqpszj5].is-collapsed .lab-side[data-astro-cid-5vqpszj5]{padding-left:20px;padding-right:20px}.lab-layout[data-astro-cid-5vqpszj5].is-collapsed .lab-side-list[data-astro-cid-5vqpszj5]{opacity:1;visibility:visible;pointer-events:auto}.lab-side-title[data-astro-cid-5vqpszj5]{justify-content:flex-start;margin-bottom:14px}.lab-side-collapse[data-astro-cid-5vqpszj5]{display:none}.lab-drawer-close[data-astro-cid-5vqpszj5]{width:32px;height:32px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px;place-items:center;padding:0;display:grid;position:absolute;top:22px;right:16px}.lab-drawer-close[data-astro-cid-5vqpszj5]:hover{color:var(--ink-strong);background:#f1f1f1}.lab-backdrop[data-astro-cid-5vqpszj5]{z-index:34;background:#00000038;display:block;position:fixed;inset:60px 0 42px}.lab-backdrop[data-astro-cid-5vqpszj5][hidden]{display:none}.lab-browse[data-astro-cid-5vqpszj5]{width:100%;height:44px;font-family:var(--font-mono);color:var(--ink-strong);cursor:pointer;background:#f1f1f1;border:0;border-radius:4px;justify-content:center;align-items:center;gap:10px;margin-top:4px;padding:0 16px;font-size:12px;transition:background .16s;display:flex}.lab-browse[data-astro-cid-5vqpszj5]:hover{background:#e8e8e8}.lab-browse[data-astro-cid-5vqpszj5]:focus-visible{outline-offset:2px;outline:2px solid #0070e9}.lab-open[data-astro-cid-5vqpszj5]{width:32px;height:32px;color:var(--ink-strong);cursor:pointer;background:0 0;border:0;border-radius:6px;flex-shrink:0;place-items:center;margin-left:-6px;padding:0;display:grid}.lab-open[data-astro-cid-5vqpszj5]:hover{background:#f1f1f1}.lab-open[data-astro-cid-5vqpszj5]:focus-visible,.lab-drawer-close[data-astro-cid-5vqpszj5]:focus-visible{outline-offset:2px;outline:2px solid #0070e9}.lab-main[data-astro-cid-5vqpszj5]{height:auto;padding:0 0 48px;overflow:visible}.lab-panel[data-astro-cid-5vqpszj5]{padding:28px 24px 0}.lab-ov-copy[data-astro-cid-5vqpszj5]{gap:18px}.lab-ov-copy[data-astro-cid-5vqpszj5]>div[data-astro-cid-5vqpszj5]{grid-template-columns:1fr;gap:4px}}@media (width<=860px) and (prefers-reduced-motion:reduce){.lab-side[data-astro-cid-5vqpszj5]{transition:none}}