.demo-wrap[data-astro-cid-5s5cj52a]{flex-direction:column;align-items:center;gap:1.25rem;width:100%;max-width:900px;display:flex}.demo-area[data-astro-cid-5s5cj52a]{flex-direction:column;align-items:center;width:100%;display:flex}.resizable[data-astro-cid-5s5cj52a]{width:500px;min-width:115px;max-width:100%;position:relative}.container-zone[data-astro-cid-5s5cj52a]{border:2px dashed var(--c-border);border-radius:.75rem;margin-right:20px;padding:.75rem;transition:border-color .3s,border-radius .3s cubic-bezier(.34,1.56,.64,1);container-type:inline-size}.resizable[data-astro-cid-5s5cj52a]:has(.drag-handle:hover) .container-zone[data-astro-cid-5s5cj52a],.resizable[data-astro-cid-5s5cj52a]:has(.drag-handle.cursor-hover) .container-zone[data-astro-cid-5s5cj52a],.resizable[data-astro-cid-5s5cj52a]:has(.drag-handle.dragging) .container-zone[data-astro-cid-5s5cj52a]{border-radius:.75rem 0 0 .75rem}.media-query-mode[data-astro-cid-5s5cj52a] .container-zone[data-astro-cid-5s5cj52a]{container-type:normal}.drag-handle[data-astro-cid-5s5cj52a]{cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;border-radius:0 .75rem .75rem 0;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:20px;transition:background .25s cubic-bezier(.34,1.56,.64,1);display:flex;position:absolute;top:0;bottom:0;right:0}.drag-handle[data-astro-cid-5s5cj52a]:hover,.drag-handle[data-astro-cid-5s5cj52a].cursor-hover,.drag-handle[data-astro-cid-5s5cj52a].dragging{background:oklch(50% .15 260/.08)}.dark .drag-handle[data-astro-cid-5s5cj52a]:hover,.dark .drag-handle[data-astro-cid-5s5cj52a].cursor-hover,.dark .drag-handle[data-astro-cid-5s5cj52a].dragging{background:oklch(80% .1 260/.08)}.drag-handle-dot[data-astro-cid-5s5cj52a]{background:var(--c-muted);opacity:.35;border-radius:50%;width:4px;height:4px;transition:opacity .25s cubic-bezier(.34,1.56,.64,1)}.drag-handle[data-astro-cid-5s5cj52a]:hover .drag-handle-dot[data-astro-cid-5s5cj52a],.drag-handle[data-astro-cid-5s5cj52a].cursor-hover .drag-handle-dot[data-astro-cid-5s5cj52a],.drag-handle[data-astro-cid-5s5cj52a].dragging .drag-handle-dot[data-astro-cid-5s5cj52a]{opacity:.7}.readout[data-astro-cid-5s5cj52a]{opacity:0;height:1rem;margin-top:.625rem;transition:opacity .3s}.readout[data-astro-cid-5s5cj52a].visible{opacity:1}.width-readout[data-astro-cid-5s5cj52a]{font-variant-numeric:tabular-nums;color:var(--c-muted);letter-spacing:.04em;font-size:.6875rem;font-weight:600}.controls[data-astro-cid-5s5cj52a]{justify-content:center;display:flex}.card[data-astro-cid-5s5cj52a]{background:oklch(97% .005 264);border-radius:.75rem;overflow:hidden;box-shadow:0 1px 3px oklch(20% .02 260/.05),0 6px 20px oklch(20% .02 260/.06)}.dark .card[data-astro-cid-5s5cj52a]{background:oklch(22% .015 260);box-shadow:0 1px 3px oklch(0% 0 0/.2),0 6px 20px oklch(0% 0 0/.2)}.card-img[data-astro-cid-5s5cj52a]{background:linear-gradient(145deg,oklch(60% .2 270),oklch(50% .22 295));flex-shrink:0;transition:width .35s cubic-bezier(.34,1.56,.64,1),height .35s cubic-bezier(.34,1.56,.64,1),border-radius .35s cubic-bezier(.34,1.56,.64,1),margin .3s cubic-bezier(.22,1,.36,1)}.card-title[data-astro-cid-5s5cj52a]{color:var(--c-text);font-size:.875rem;font-weight:600;line-height:1.2}.card-meta[data-astro-cid-5s5cj52a]{color:var(--c-muted);margin-top:.125rem;font-size:.75rem;line-height:1.4}.card-price[data-astro-cid-5s5cj52a]{color:var(--c-accent);margin-top:.375rem;font-size:.875rem;font-weight:700}.card-compact[data-astro-cid-5s5cj52a]{color:var(--c-accent);text-align:center;font-size:.75rem;font-weight:700}@container (width>=300px){.card[data-astro-cid-5s5cj52a]{align-items:center;gap:.875rem;padding:.75rem;display:flex}.card-img[data-astro-cid-5s5cj52a]{border-radius:.5rem;width:64px;height:64px}.card-compact[data-astro-cid-5s5cj52a]{display:none}}@container (width<=299px) and (width>=150px){.card[data-astro-cid-5s5cj52a]{padding:0}.card-img[data-astro-cid-5s5cj52a]{border-radius:0;width:100%;height:100px}.card-body[data-astro-cid-5s5cj52a]{padding:.625rem .75rem .75rem}.card-compact[data-astro-cid-5s5cj52a]{display:none}}@container (width<=149px){.card[data-astro-cid-5s5cj52a]{text-align:center;padding:.75rem .5rem}.card-img[data-astro-cid-5s5cj52a]{border-radius:50%;width:32px;height:32px;margin:0 auto .375rem}.card-body[data-astro-cid-5s5cj52a]{display:none}.card-compact[data-astro-cid-5s5cj52a]{display:block}}.media-query-mode[data-astro-cid-5s5cj52a] .card[data-astro-cid-5s5cj52a]{align-items:center;gap:.875rem;padding:.75rem;display:flex}.media-query-mode[data-astro-cid-5s5cj52a] .card-img[data-astro-cid-5s5cj52a]{border-radius:.5rem;width:64px;height:64px}.media-query-mode[data-astro-cid-5s5cj52a] .card-compact[data-astro-cid-5s5cj52a]{display:none}@media (width<=480px){body{padding:1.25rem}.resizable[data-astro-cid-5s5cj52a]{width:100%}}