.demo-wrap[data-astro-cid-itz4bsk4]{display:flex;flex-direction:column;align-items:center;gap:1.25rem;width:100%;max-width:900px}.demo-area[data-astro-cid-itz4bsk4]{width:100%;display:flex;flex-direction:column;align-items:center}.resizable[data-astro-cid-itz4bsk4]{position:relative;width:500px;min-width:115px;max-width:100%}.container-zone[data-astro-cid-itz4bsk4]{container-type:inline-size;border:2px dashed var(--c-border);border-radius:.75rem;padding:.75rem;margin-right:20px;transition:border-color .3s ease,border-radius .3s cubic-bezier(.34,1.56,.64,1)}.resizable[data-astro-cid-itz4bsk4]:has(.drag-handle:hover) .container-zone[data-astro-cid-itz4bsk4],.resizable[data-astro-cid-itz4bsk4]:has(.drag-handle.cursor-hover) .container-zone[data-astro-cid-itz4bsk4],.resizable[data-astro-cid-itz4bsk4]:has(.drag-handle.dragging) .container-zone[data-astro-cid-itz4bsk4]{border-radius:.75rem 0 0 .75rem}.media-query-mode[data-astro-cid-itz4bsk4] .container-zone[data-astro-cid-itz4bsk4]{container-type:normal}.drag-handle[data-astro-cid-itz4bsk4]{position:absolute;top:0;right:0;bottom:0;width:20px;cursor:col-resize;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:0 .75rem .75rem 0;transition:background .25s cubic-bezier(.34,1.56,.64,1);-webkit-user-select:none;user-select:none;touch-action:none}.drag-handle[data-astro-cid-itz4bsk4]:hover,.drag-handle[data-astro-cid-itz4bsk4].cursor-hover,.drag-handle[data-astro-cid-itz4bsk4].dragging{background:#2a5fb714}.dark .drag-handle[data-astro-cid-itz4bsk4]:hover,.dark .drag-handle[data-astro-cid-itz4bsk4].cursor-hover,.dark .drag-handle[data-astro-cid-itz4bsk4].dragging{background:#98bffe14}.drag-handle-dot[data-astro-cid-itz4bsk4]{width:4px;height:4px;border-radius:50%;background:var(--c-muted);opacity:.35;transition:opacity .25s cubic-bezier(.34,1.56,.64,1)}.drag-handle[data-astro-cid-itz4bsk4]:hover .drag-handle-dot[data-astro-cid-itz4bsk4],.drag-handle[data-astro-cid-itz4bsk4].cursor-hover .drag-handle-dot[data-astro-cid-itz4bsk4],.drag-handle[data-astro-cid-itz4bsk4].dragging .drag-handle-dot[data-astro-cid-itz4bsk4]{opacity:.7}.readout[data-astro-cid-itz4bsk4]{margin-top:.625rem;height:1rem;opacity:0;transition:opacity .3s ease}.readout[data-astro-cid-itz4bsk4].visible{opacity:1}.width-readout[data-astro-cid-itz4bsk4]{font-size:.6875rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--c-muted);letter-spacing:.04em}.controls[data-astro-cid-itz4bsk4]{display:flex;justify-content:center}.card[data-astro-cid-itz4bsk4]{background:#f3f5f9;border-radius:.75rem;overflow:hidden;box-shadow:0 1px 3px #11161f0d,0 6px 20px #11161f0f}.dark .card[data-astro-cid-itz4bsk4]{background:#171b22;box-shadow:0 1px 3px #0003,0 6px 20px #0003}.card-img[data-astro-cid-itz4bsk4]{background:linear-gradient(145deg,#5471f5,#7235d0);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-itz4bsk4]{font-size:.875rem;font-weight:600;color:var(--c-text);line-height:1.2}.card-meta[data-astro-cid-itz4bsk4]{font-size:.75rem;color:var(--c-muted);line-height:1.4;margin-top:.125rem}.card-price[data-astro-cid-itz4bsk4]{font-size:.875rem;font-weight:700;color:var(--c-accent);margin-top:.375rem}.card-compact[data-astro-cid-itz4bsk4]{font-size:.75rem;font-weight:700;color:var(--c-accent);text-align:center}@container (min-width: 300px){.card[data-astro-cid-itz4bsk4]{display:flex;align-items:center;gap:.875rem;padding:.75rem}.card-img[data-astro-cid-itz4bsk4]{width:64px;height:64px;border-radius:.5rem}.card-compact[data-astro-cid-itz4bsk4]{display:none}}@container (max-width: 299px) and (min-width: 150px){.card[data-astro-cid-itz4bsk4]{padding:0}.card-img[data-astro-cid-itz4bsk4]{width:100%;height:100px;border-radius:0}.card-body[data-astro-cid-itz4bsk4]{padding:.625rem .75rem .75rem}.card-compact[data-astro-cid-itz4bsk4]{display:none}}@container (max-width: 149px){.card[data-astro-cid-itz4bsk4]{padding:.75rem .5rem;text-align:center}.card-img[data-astro-cid-itz4bsk4]{width:32px;height:32px;border-radius:50%;margin:0 auto .375rem}.card-body[data-astro-cid-itz4bsk4]{display:none}.card-compact[data-astro-cid-itz4bsk4]{display:block}}.media-query-mode[data-astro-cid-itz4bsk4] .card[data-astro-cid-itz4bsk4]{display:flex;align-items:center;gap:.875rem;padding:.75rem}.media-query-mode[data-astro-cid-itz4bsk4] .card-img[data-astro-cid-itz4bsk4]{width:64px;height:64px;border-radius:.5rem}.media-query-mode[data-astro-cid-itz4bsk4] .card-compact[data-astro-cid-itz4bsk4]{display:none}@media(max-width:480px){body{padding:1.25rem}.resizable[data-astro-cid-itz4bsk4]{width:100%}}