dt-preview{display:flex;justify-content:center;padding:12px;border-radius:var(--shape-m);background:var(--surface-container)}dt-preview canvas{display:block;width:auto;max-width:100%;max-height:34vh}dt-player{display:flex;flex-direction:column;gap:8px}dt-number{min-width:44px;padding:8px 0;border-radius:var(--shape-full);background:var(--surface-container-high);color:var(--on-surface-variant);font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;text-align:center}dt-number[state=puesto]{background:var(--secondary);color:var(--on-secondary)}dt-assign{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:var(--shape-m);background:var(--surface-container)}dt-numbers{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}dt-chip{display:flex;align-items:center;justify-content:center;padding:10px 0;border-radius:var(--shape-s);background:var(--surface-container-high);color:var(--on-surface);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;transition:transform var(--motion-spring),background var(--motion-fast)}dt-chip:active{transform:scale(.92)}dt-chip[state=chosen]{background:var(--primary);color:var(--on-primary)}dt-chip[state=taken]{opacity:.28;cursor:default;pointer-events:none}